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>


Email Development

Digital Production

**Sector: Pharma**

**Task: Email Development**

## Project Highlights:

- Our agency client was in need of quick and smooth production of several,differentiating product emails each week, none of which followed a specific consistent template.
- Due to the complexity of the distinct email designs, the agency created an online integrated development environment (IDE) that integrated all the technologies this level of detail required — which Assemble quickly adapted and supplemented with reusable elements that expedited the process even further.
- Several concerns around communication gaps, inconsistent assets, and unclear instructions and expectations caused confusion, redundancies, and delays, which Assemble addressed with the creation of an internal action plan with
invaluable resources for each workflow.
- As a result of the collaboration which accommodated the client’s specific work styles and tools, Assemble was able to streamline the production process, reduce errors, and consistently create distinguished, high-functioning newsletters
daily.

## The Challenge: 

When you have a Pharma client that prides itself on out-of-the-box email layouts that break the conventional industry mold, old-fashion, table-based html code can present a major challenge during implementation. That was the case with our agency client that came to Assemble in need of simplifying these complex developments, so they could continue to push the boundaries of design detail, while meeting their mass weekly delivery without errors and headaches.

The two main libraries that hosted the items required to accomplish the next-level design were EJS (a simple templating language that facilitates HTML markups with plain JavaScript) and MJML (a semantic syntax that’s responsive by design to minimize code written from scratch). Coming into the project, the agency had already created an Online IDE that incorporated both of the non-traditional utilities, so instead of a developer needing to install each of the libraries on his/her own local environment, they can simply start coding in this cloud-based environment. And while Assemble had our own high-functioning email development framework, we knew we had to adjust to those of their internal dev team — and help find a way to maximize its capabilities. 

But that wasn’t the only challenge the request presented. Custom to a specific way of working internally, our agency client’s partner workflows lacked structure and clear instructions/feedback, which translated to a very complicated asset hand off and risk of miscommunications.     

## The Approach: 

First things, first was nailing down an internal action plan that would streamline handoffs and approvals throughout the process. Assemble first identified the root cause of the various issues through a QA audit and unit testing, creating a list of all of the elements that needed improvement. We then created several checklists with detailed instructions to ensure accurate validation seamless handoffs — from which files to use, where each type of file should be, and how to send them. 

Then, the real work began. Assemble not only adopted the client’s Online IDE, but also enhanced its level of efficiency by creating our own MJML snippets generator with a collection of common blocks that are frequently present in the client’s emails, expediting the production workflow even further. 

Assemble also created a basic template built on the MJML utility that included the required imports to work with EJS and MJML, along with a collection of reusable MJML snippets within an independent, easy-to-use module, known as BAM! (Build-a-Mail Interface) tool. This gave our developers a nice canvas to recycle various usable elements to incorporate into the client's IDE, instead of manually creating each row of code in HTML, as well as the ability to generate entire blocks of code by simply typing a small keyword. 

## The Big Wins:

With the new internal workflows in place, Assemble was able to help our client streamline the process, reduce feedback, and avoid costly gaps along the way. While fully invested in our own email development framework, we were able to make the necessary pivots to adopt our clients’ specific development processes, so collaboration between both teams was easier and more systematic. 

Thanks to this flexibility and organization paired with our collective tools, Assemble’s entire team of developers was able to use EJS and MJML to create the emails in record time, despite having no previous experience on either utility. Overall, we improved the quality of the email, delivered fewer human errors, and revamped the internal workflows for our clients to make collaboration with us, as well as other partners, far more effective moving forward.  


blogpost_cs_emails.jpg

Pharma Email Development & Process Optimization

blogpost_cs_emails-vertical.jpg

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.”

CHALLENGE TO RESULTS CASE STUDIES

Pharma Email Development & Process Optimization

Case Studies list