medium_hero-pattern-right.png

small_hero-pattern-right.png

thumbnail_hero-pattern-right.png

hero-pattern-right.png

<h1>CHALLENGE TO RESULTS <strong className="large">CASE STUDIES</strong></h1>


Back-end Development

Graphic Design

UX/UI Design


**Sector: Hospitality**

**Task: Modular Websites**

## Project Highlights:

- While under a tight deadline, an international luxury hospitality brand asked Assemble to create a new WordPress website for one of their hotel locations with full editing, updating, and page creation capabilities.
- Since none of their team had any development or coding expertise, Assemble recommended a modular site using Elementor that would make adding and updating site components easy and highly customizable
- The client could drag and drop UI components from galleries, accordions, text-image blocks, multi-column blocks, and more into any page and incorporate their brand style.
- This formula cut production time down drasticallyto meet the short turnaround and gave the client the ability to update and elevate their site moving forward

## The Approach:

When a multinational hospitality company needed a quick turnaround on a new website for one of their new locations, they came to Assemble. To accommodate the tight production deadline, in addition to ever-changing rates and amenities, they needed a site that gave their team the ability to add updates, make edits, and create new pages — without any coding or development expertise. Given only a few general concepts and references of what the client wanted the site to look like and how it should function, Assemble opted for a modular site that would make any post-launch adjustments easy.

With the quick deadline looming, Assemble built the site on WordPress utilizing dummy/FPO images and copy to get everything in place for the client. Using Elementor, a well-known WordPress site builder, we created a site with a simple drag and drop interface to make editing easy. We also extended its functionality by creating custom UI components, such as galleries, accordions, text-image blocks, multi-column blocks, etc., giving the client extensive control over the style of any additions made to the site.

## The Big Wins:

Not only was the system extremely easy for the client to update and scale, requiring no coding or web development experience at all, but the final product was extremely high-quality and elegant — a perfect match for their high-end brand.

Even further, this system enabled us to cut the web development timeline down to a fraction to meet the client’s quick turnaround. What would typically require a month of work on regular web development, took only a week.

The client was so thrilled with both the process and the result, that they asked us to use the same system to redesign for 3 of their other high-end hotel websites in their extensive portfolio. And Assemble is excited to continue our partnership!

## A Key Takeaway:

In a modular site like this, the various content blocks we incorporated are very easy to style, so the client wasn’t limited in terms of configuring to their ideal look and feel, and instead, could adjust to continue to meet their branding needs as they evolved. They could change the color scheme and alignment of any component that we had already built out for them. The client will be able to go to any specific page, and simply drag a component to the stage, then start adding their own copy and images to it to replace the current placeholders and add new content moving forward.

This formula allows non-developers to both easily create new pages and update existing pages to display final content, while keeping the creative and branding consistent across every page.

If you’re looking for a simple and cost-effective solution that gives your team the capability to maintain and update your site without any previous coding or web dev experience, let Assemble build you a modular website that meets all your marketing and SEO needs. Contact us today to discuss your project.

Modular-Website-Case-Study.jpg

Client Modular Website

cs-1-vertical.jpg

CLM Development

Front-end Development


**Sector: Healthcare**

**Task: VEEVA Presentation**

## Project Highlights:

- A global fertility sales CLM was looking to create a comprehensive VEEVA presentation to connect HCPs with various health clinics and facilities offering the specific services they need.
- Assemble was tasked with making the platform’s standard static CLM both dynamic and customizable, which would also require all-new tracking and navigation systems. The final presentation would have four main sections, each with several sub slides and various filters to show/hide content.
- The client also wanted to incorporate their existing 50+ high-quality animations and iconography into the presentation, which would bring the project total to over 100 different unique elements, including slides, pop-ups, icons, and more.
- Overall technical tasks included: JSON data import (locations per state), custom tracking using Call Clickstream Veeva object, incorporation of HEVC MOV videos, and implementation of internal key message swipe navigation using HammerJS & GSAP

## The Approach:

While creating highly advanced presentations is one of VEEVA’s primary benefits, the highly customized user experience and complexity of data this client required couldn’t be met with the default static format. Assemble instead had to create dynamic slides with the ability to show or hide internal sections based on the user’s (an HCP) interests. “We had to implement an initial customizable screen, showing different categories of information that each sub slide contains,” Fabian Miranda, Assemble’s Senior Web Developer and VEEVA Technical Lead, explained. “From there, the HCP could then select specific options and filter slide content based on the information they care about.”

But due to the presentation’s dynamic nature, the team couldn’t rely on the platform’s default native tracking, so they needed to add a custom tracking system to ensure no data would be lost. “A standard static CLM presentation requires a specific keymessage.zip per slide which allows all tracking — such as time spent on specific slides, user reactions, etc.— and navigation to occur automatically,” Fabian added. “But in a case like this where you have several sub slides, you need to implement all this manually using custom javascript, in addition to creating a custom internal navigation. As crucial components for data collection and overall functionality, it was important we found the right solution for the client.”

## The Big Wins: 

By taking a dynamic approach to a presentation of this size and complexity, the development and set up of each slide was a lot simpler, saving the client both time and money. Rather than generating a static key message from scratch for every new slide, all the various titles, texts, assets, etc. that will make it unique are pulled directly from a shared media folder and rendered into the slides that the user sees. “Using dynamic functionality makes the whole application scalable and easier to maintain, so future additions or changes are a lot simpler, saving both sides significantly in costs. In terms of effort, the difference can be as significant as 15 minutes versus 2 hours.”

Assemble was also able to add a unique feature which allowed users to filter by locations. “We were given a huge Excel file of facilities per state that we were able to convert it to a JSON data file, import into VEEVA, and render into a dynamic list. Based on where the HCP was located, they could select their state and view their options, making the experience even more tailored to each user.”

## A Key Takeaway: 

With a significant investment previously made in a collection of over 50 high-end animated icons, the client was eager to incorporate these elements throughout the presentation. So Assemble took the liberty of researching the specific Codec needed (HEVC) to incorporate MOV files with transparent background (alpha channel). “We were able to render all these as HEVC MOV files into the proper form at that is able to keep the alpha channel and easily incorporate all of them into the presentation. This approach also makes it easy to reproduce on Webkit / Safari iOS, which is the rendering engine behind VEEVA CRM app.

“The client was thrilled when they saw how quickly and effectively the animations worked throughout the presentation,” Fabian continued. “They put a lot of time into these icons and we’re grateful we could make them work within this presentation as such a vital resource for them.”

But the work isn’t over. As the fertility CLM looks to utilize the VEEVA Engage for Meetings module to share the presentation both in-person and remotely, they’ve asked Assemble to create a new static version due to platform requirements. “Thanks to the dynamic approach, we are able to go through the library of assets and easily replace videos with bitmaps, making the transition a lot simpler. The client truly appreciates the efficiency we can provide, and we’ll be helping them a lot more in the future.”

blogpost_VEEVADynamicPresentation.jpg

Veeva Dynamic CLM Presentation

cs-3-vertical.jpg

Banner Development


**Sector: Pharma**

**Task: Data Collection Form Banner Ads**

## Project Highlights:

- A healthcare marketing company wanted to team up with Assemble on behalf of two Pharma brands to create rich media banner ads that would utilize a form to collect user data.
- The brands each required a distinct version of the banner ad. One prompted users to fill out in order to subscribe to a product trial, while the other would allow them to receive additional information.
- Assemble was tasked with creating the expandable banners that would embed the client’s form into the creative and also provide a Thank You message to confirm the form was submitted properly.

## The Approach:

Assemble developers are no novices to creating rich media banner ads, but embedding data collection and storage capabilities was uncharted territory — for any production team. “A few months ago, we wouldn’t have thought we could fulfill this request because we had never seen a form work this way,” Andres Moraga, Sr. Web Developer at Assemble, explained. “You typically don’t have forms in rich media because of both technical and policy limitations.”

One of those limitations became obvious when the team first attempted a simple form intended for websites. Due to its nature, once the form was submitted, the whole page would refresh instead of securing the data and sending a confirmation.

Other limitations came with storing the data in general. “App servers do not store personal information,” Franchesca Reyes, Assemble Project Manager, shared. “So for example, if the ad placement is Google, the data won’t be saved here automatically. It requires a certain level of expertise on how various platforms connect, and then finding the right way to get this done without breaching the regulations.”

So how did they do that? They avoided these apps all together. “The client provided us with various HTML snippets from their Salesforce account that we would put into the banner form to test the different responses,” Ricardo Chamberlain, Sr. Project Manager at Assemble, explained. “If it was submitted successfully, we were shown a confirmation, and if it wasn’t, we got an error message.”

“After a number of trial and errors, the client was able to generate a usable code sample from their Salesforce account and provide an API to connect to it in order to store the information here,” Fabian Miranda, Sr. Web Developer, added. “By doing so, Google wasn’t responsible for managing any of the information once it was submitted, and the client had all the data right in their Salesforce database.”

## The Big Wins:

With both policy and functionality working against them, you could say the biggest feat was simply launching these all-new types of banner ads successfully. But for Assemble, the real win was the collective team effort that made it possible. “Problem-solving is what we love to do,” Andres explained, and having a client that was just as committed to the work, we were able to keep running through trial and errors to figure out a workaround. We would communicate the technical errors we faced in each attempt, and they would help us solve them until we found the one that worked.”

“Between the client’s coding knowledge, our production expertise, and Fran’s understanding of the policies on trafficking these ads,” Ricardo added, “we had multiple teams offering their own unique expertise to put us in the best position to pull this off.”

But the behind the scenes effort and launch itself are only as valuable as the success of the banners themselves. And these ads were worthy of the effort. “The fact that Pharma banners are typically very straightforward in their style,” Franchesca explained, “incorporating these forms created an entirely different look and feel than what you’d usually expect to see. The successful execution of these ads really speaks volumes because we were able to help our clients do something that would help them stand out in all new ways.”

## A Key Takeaway:

The perks of problem-solving in this project didn’t just help this client achieve their goals, it’s also paving the way for brand new banner capabilities for all Assemble clients. “We knew Google and most ad servers are very reluctant to save customer information,” Fabian shared. “But the results from this project gave us valuable insight on how to create ads that allow clients to collect and store data moving forward. As long as we don’t involve Google or other ad servers in the collection process, we can continue to implement these types of banners for our clients. 

“In this scenario, our client had Salesforce, but in the future, if we have a client who doesn’t, we could even create web services that allow our clients to store this kind of data on their own databases. We’re excited about the new doors this opens for all of our clients.”

CHALLENGE TO RESULTS CASE STUDIES

Client Modular Website

Case Studies list