E

About

Contact

Storysoft

Digital Stories

MOBILE-FIRST, INTERACTIVE MICROSITES

Storysoft Stories are designed for the pharmaceutical industry to use as a marketing material that stands out in a crowded space by being mobile-friendly, interactive, and with omnichannel distribution. These are microsites built on a proprietary codebase that is used as the framework of each Story, along with pre-built components that meet pharmaceutical industry requirements. Clients can use existing sales materials to engage the user in an interactive journey through key brand topics such as drug efficacy, support programs, clinical study results, and more.

Project Duration:

Ongoing – April 2022

Ongoing – April 2022

My Role:

UI, Prototyping

UI/UX, Prototyping

My Partners:

Storysoft Teams, Partner Agencies, & Copy Writers

Storysoft Teams, Partner Agencies, & Copy Writers

Notable Clients:

Abbvie, Argenx, Janssen, Merck, Roche, Sanofi, Takeda, and more

Abbvie, Argenx, Janssen, Merck, Roche, Sanofi, Takeda, and more.

the Problem and Ask

Pharmaceutical brands are competing in a crowded market

Let's create unique and engaging experiences that meet pharmaceutical legal requirements and grab audiences' attention

How might we…

Highlight key messaging and required content in an engaging experience?

Create a responsive design that is suitable for smaller devices that meets medical compliance?

Incorporate client brand assets into the existing proprietary codebase in a visually pleasing and medically-compliant manner?
Highlight key messaging and required content in an engaging experience?

Create a responsive design that is suitable for smaller devices that meets medical compliance?

Incorporate client brand assets into the existing proprietary codebase in a visually pleasing and medically-compliant manner?

My Role

While the base product we call a Story already exists as a reusable template, my role is to utilize this template to create unique Stories. The Stories I design are typically for clients, but occasionally we create internal demo Stories that are used for marketing purposes.

*These demo Stories will be what you see in the visuals throughout.
Due to confidentiality agreements, client projects cannot be shown.

While the base product we call a Story already exists as a reusable template, my role is to utilize this template to create unique Stories. The Stories I design are typically for clients, but occasionally we create internal demo Stories that are used for marketing purposes.

*These demo Stories will be what you see in the visuals throughout.
Due to confidentiality agreements, client projects cannot be shown.

While the base product we call a Story already exists as a reusable template, my role is to utilize this template to create unique Stories. The Stories I design are typically for clients, but occasionally we create internal demo Stories that are used for marketing purposes.

*These demo Stories will be what you see in the visuals throughout. Due to confidentiality agreements, client projects cannot be shown.

Details

Each Story is a new beast of dense, data-heavy content and medical compliance requirements that vary by product and region. More often than not, these requirements include having important safety information and access to prescribing information, study designs, and references always being present on the user’s screen.

These requirements limit the amount of screen space available for key messages and designed content. This poses new design challenges with every client requiring me to decide how to keep each Story both visually engaging and medically compliant.

the Process - Step one

Getting started with branded materials and assets

Setting the project up for success

Starting Materials

A client-approved script that includes narrative copy and supporting graphics broken down into pages.

A collection of marketing materials and assets, including editable files of branded assets and brand guidelines when available.

An overview document describing the client’s goals and what would be considered a high-value action preformed by the target user.
A client-approved script that includes narrative copy and supporting graphics broken down into pages.

A collection of marketing materials and assets, including editable files of branded assets and brand guidelines when available.

An overview document describing the client’s goals and what would be considered a high-value action preformed by the target user.

Details

My First step? Start with a deep dive into these three items. When breaking down each new Story, I don’t just take it one page at a time. Instead, I look at everything as a whole and ask the following.

Are there any patterns within this content?
Have I faced similar challenges before?
How do I address the visual hierarchy for this Story?

Once I have established answers to these questions, I take my findings and begin designing.

Example Story Script

the Process - Step TWO

Building layouts & applying client branding

The creation of each Story

Key Milestones

  1. My rough draft that includes each frame (or page) of the Story filled with the unstyled copy and any pre-existing graphics within the Story template. This is my starting point for every Story that is built in-house.

  2. The initial version, V1, goes through internal review. This includes the same frames from the rough draft, except these are stylized and branded.

  3. V2, V3, V4, and so on, each being a new iteration that includes any client change requests. Typically, these edits are to comply with certain medical requirements or to match existing materials.

  4. A semi-finalized prototype that is approved by the client. This prototype version gets passed along to the MLR review process as detailed in the next section.
  1. My rough draft that includes each frame (or page) of the Story filled with the unstyled copy and any pre-existing graphics within the Story template. This is my starting point for every Story that is built in-house.

  2. The initial version, V1, goes through internal review. This includes the same frames from the rough draft, except these are stylized and branded.

  3. V2, V3, V4, and so on, each being a new iteration that includes any client change requests. Typically, these edits are to comply with certain medical requirements or to match existing materials.

  4. A semi-finalized prototype that is approved by the client. This prototype version gets passed along to the MLR review process as detailed in the next section.

Details

The next step? Create that shiny new Figma File and bring in all the expected content and client-provided assets. The very first iteration of every Story is a bunch of frames with copy and graphics roughly laid out in between the templated components. This is the step where I begin to use my initial findings to guide my design decisions.

Then it’s time for a splash of color and a pretty typeface! Utilizing patterns found earlier in the design process, I begin to place each element in a category that then gets associated with a specific, predefined brand style. This method allows me to keep a consistent feel throughout the Story while staying true to client's brand guidelines.

Once I have the designed elements, I replace the roughly laid out elements and build out each designed screen. This version gets sent to internal teams for an initial review. From here, there are some changes, and once these are applied and approved, I set up a review link for clients to use for feedback. Feedback can take many rounds due to multiple client teams and departments reviewing asynchronously, each with their own input. When these design files are client-approved, I begin prototyping the Story.

Figma File Example

the Process - Step Three

The many rounds of review

Like one of those games where if you lose, you go back to the start

The Challengers

Internal Reviewers: An easy start. My colleagues review the prototype to make sure my design matches the provided manuscript. Usually, changes here are text changes or requests for a higher contrast between elements. These same reviewers are also testing the programmed Story for any bugs, specific device issues, or scaling problems, among other things. Most of these changes are for the development team, but can result in design changes.

Client Reviewers: These are the reviewers I want to impress. The more they love an initial design, the less likely I am to have multiple rounds of edits. Typically, this is when the content gets updated, claims reworded, and occasionally certain branded aspects need edits to match existing materials.

Med-Legal Reviewers (MLR): The final boss level. MLR is a team of reviewers that declares the Story safe for publishing to the public. Claims must be true, legibility and hierarchy are scrutinized to certain standards, and the Story itself has to function properly.
Internal Reviewers: An easy start. My colleagues review the prototype to make sure my design matches the provided manuscript. Usually, changes here are text changes or requests for a higher contrast between elements. These same reviewers are also testing the programmed Story for any bugs, specific device issues, or scaling problems, among other things. Most of these changes are for the development team, but can result in design changes.

Client Reviewers: These are the reviewers I want to impress. The more they love an initial design, the less likely I am to have multiple rounds of edits. Typically, this is when the content gets updated, claims reworded, and occasionally certain branded aspects need edits to match existing materials.

Med-Legal Reviewers (MLR): The final boss level. MLR is a team of reviewers that declares the Story safe for publishing to the public. Claims must be true, legibility and hierarchy are scrutinized to certain standards, and the Story itself has to function properly.

Details

This prototype version of the Story includes animations and videos, as well as the path for each action and clickable element. This version is sent to the client for any last-minute adjustments, before the prototype is sent off to Med-Legal for review.

Here’s where things can get messy sometimes. With each Story, not only does the content get reviewed to make sure it’s meeting compliance, but so does the visual design. Hierarchy is paramount in each Story as there are rules about the sizing of logos, generic and brand drug names, safety information, etc., and their relation to each other.

These designs are looked at in great detail to ensure that no false claims can be made, as the pharmaceutical industry is highly regulated, and at the end of the day, no one wants to get sued. With this, often the content of the Story or the scale of some elements gets changed, and sometimes a whole new “page” gets added. I take these updates and apply them to the prototype version of the Story before sending it back to internal review, client review, and then to Med-Legal review for final approval.

Reviewed Figma File Example

the Process - Step Four

Executing a successful launch

Preparations for development handoff

Details

Once a Story gets the stamp of approval from MLR, I begin finalizing the Figma file for handoff to development. I add notes when appropriate and package a folder with the necessary assets that are passed to our development team during a kickoff call. During these kickoff calls, I present the design broken down by each frame or “page”, explaining animations, the user flow, and any unique solutions that haven’t been done in previous Stories.

Once a Story gets the stamp of approval from MLR, I begin finalizing the Figma file for handoff to development. I add notes when appropriate and package a folder with the necessary assets that are passed to our development team during a kickoff call. During these kickoff calls, I present the design broken down by each frame or “page”, explaining animations, the user flow, and any unique solutions that haven’t been done in previous Stories.

This is where my role shifts. I turn my focus to the next project while being ‘on-call’ for any Stories actively with the development team. I assist developers when assets need adjusting and re-exporting or if they just have a question. The Story then undergoes another cycle of reviews before launch.

This is where my role shifts. I turn my focus to the next project while being ‘on-call’ for any Stories actively with the development team. I assist developers when assets need adjusting and re-exporting or if they just have a question. The Story then undergoes another cycle of reviews before launch.

Final Designs

Creating marketing materials

Below are some visuals of the demo Stories used by the sales team.

Olivia's Path

Noah's Path

*Demo Stories shown in the visuals above. Due to confidentiality agreements, client projects cannot be shown.

*Demo Stories shown in the visuals above. Due to confidentiality agreements, client projects cannot be shown.

the outcome

Below are my thoughts and findings from this project

Looking back to reflect, learn, and improve

Details

When each Story comes to a close, I like to do a small celebration and put a line through that Story’s name on my to-do list before moving on to the next project. That’s when I think most about past Stories, at the start of a new one. I find the best way to reflect is noticing the patterns that exist from Story to Story and use this to build custom and improved solutions with each new brand and topic.

As far as tracking the success of each Story, Storysoft gathers visitor data from multiple channels and develops insights derived from the data compared to the client’s goals for each Story. These insights allow us to present clients with optimization opportunities that could increase the success of each Story; however, the majority of our client's Stories exceed the industry standard conversion rate.

Previous

Next

E

Email

LinkedIn