Tokenization Infographic

Situation

Our client needed an interactive and exciting way to explain the new venture in tokenization to their internal stakeholders and business partners.

Timeline

3 months

Impact and Outcome

We received positive feedback from our client and are working towards refining the live infographic online.

Collaborators

Lee Costic, Andrew Korf, Emma Schlamm, Guarav Singh

My Role

UX Designer and illustrator

Client

Top 10 Pharma Client (Anonymized due to NDA)

Challenges

Short time frame and small budget


 

Preview of the Final Product

 

Background

Client

Our client is a large top 10 pharmaceutical company. They specialize in research and development and are the industry leaders in the healthcare tokenization practice.

Situation

Knowing that tokenization is a new concept in healthcare, our client asked ZS to formally introduce tokenization to their internal staff. They wanted something to highlight the new possibilities and teach their stakeholders how they can integrate tokenization into their work.

Due to the quick timeframe, we presented a few options before settling on an interactive infographic that provided all the information in a visually exciting way. That way, our clients would be able to easily scan the infographic when on the go, while being compelled to use the website because of the beautiful visuals.

 

Graphic showing tokenization

What is Tokenization?

To provide more context, Tokenization is an industry-leading capability leveraged by our client. Tokenization involves protecting personal participant information with a randomly assigned ID number (similar to a personal barcode) .

It allows for better and more efficient ways to conduct clinical trials through the combination of randomization, security, and anonymized patient data (RWD).

 

Challenge & Approach

Given the tight timeline and the small budget, we had to work quickly to figure out the user needs and design our website. As the UX designer and illustrator of the project, I worked side-by-side with the lead designer to wireframe, drawn, and tell a compelling story of tokenization from our client.

the Problem

Tokenization is an incredibly complex process and we had to figure out how to transform the technical content in a fun and digestible way. The client also wanted a way to still dig into the technical information, so we had the strategize how to balance the information with the visuals.

We came up with a plan to

  1. Understand the user (talking the stakeholders)

  2. Create a compelling story with the content (content strategy)

  3. Choose the right tone and imagery (art direction)

  4. Make the infographic come alive (animation & design)

 

Understanding the Users

Persona

The first step was to understand who we were designing for. After looking through our desk research and conducting stakeholder discussions, we created a content document that outlines the tokenization process. The UX researcher split the document up into major sections that explain what it is, how they can apply it to their work, and how to start using tokenization.

As we kept our persona in mind which I created in the left screenshot, we knew that the design must

  1. Be scannable to empower our clients who are busy

  2. Have a call to action so the design will guide our stakeholders to adopt the tokenization capability

  3. Must be visually exciting to express the difficult concepts and help get them excited about the new venture

 

Transforming the Content to Design

We had a UX researcher write the content document and as a designer, it was my job to transform the words into visuals. To start, I created a storyboard and continuously made it higher fidelity as we got approval from our client. The storyboard acted as a bare-bones guide in preparation for designing the higher fidelity website.

 

Creating the right mood, imagery, & Tone

Since the infographic website would heavily rely on visuals, it was my job to get the imagery right. We played with two main styles - clinical and tech-oriented before creating a custom style that combined both positive attributes of the light/healthcare and cool/tech vibe.

After confirming the art direction with our client, I drew out the rest of the document with that style and kept the characters light-hearted. The artistic goal of this style was to show how innovative and cool the new venture was while maintaining the serious look of healthcare.

All explorations done by me

 

Balancing the Content and the Art

An issue we ran into during the process of design was that the website looked cluttered when putting all the information inside. Although that was one drawback, the benefit of that was that you could access all the details.

We aimed to find a middle ground for the issue, so we asked our client if we could truncate the content into the main points; however, he insisted that all the technical information still had to be there.

After some brainstorming, we came up with the idea of using drawers to shorten the content and let the design breathe. Our users could see the most important information at a glance and open the drawers to reveal more details left video).

 

Microinteractions

After drawing all the illustrations and wireframing the website, we really wanted to elevate the website by adding animations. These micro-interactions would draw in the viewer and really make them alert to read the information. To make that happen, we wrote down in text what the animations will be when scrolling down the page. We asked our web developer to code the micro-interactions and it really made the whole user experience more immersive.

 

Final Design

I drew all the illustrations and wire-framed the website in mobile and responsive views. I really wanted the website to feel real for the users to take interest in it, so I picked a isometric design that had 3D elements.

All illustrations done by me

 
 

Outcomes and Learning

Our client was pleased with the outcomes of the website and we are continuously refining the design for the mobile and responsive sizes.

My main takeaway from this project was to allow time for exploration. Much of the challenge was finding the right tone to convey in the website and really thinking about the concept for each tokenization segment. There needs to be enough time for brainstorming and exploring lo-fi sketches before really starting the final design.