SafeKey-Hero-Image
amazon-diatrust
family_font copy 2

Celltrion DiaTrust™

OVERVIEW

Based in South Korea, Celltrion is a leading biopharmaceutical company, renowned for its focus on addressing unmet medical needs and enhancing access to high-quality treatments.

In response to the COVID-19 pandemic, Celltrion ventured into at-home self-testing, empowering individuals to manage their health proactively. As the lead designer for this crucial project, I led end-to-end design efforts for the DiaTrust™ COVID-19 Ag Home Test Kit, driving successful market launch and sales growth under FDA EUA authorization. 

ROLE

Design lead

TEAM
  • Project manager: Roy Park
  • QA lead: Bomin Park
  • Statistics lead: Boram Lee
  • Development: EchelonDx
  • Marketing: Null Object

Packaging Design

Original:
212300320910-e366e24a-2c21-42a1-8a02-3254ab93f1b7_314d459d-0f26-4ca6-8467-7108412f0554
Redesign:
family_font copy 2
Other versions:
DiaTrust (2T)_Diagonal_3D-Model (reduced_cropped)
2 TESTS
Pediatric (4T)_3D-Model (reduced_cropped)
4 TESTS
Pediatric_(25T Diagonal)_3D-Model(reduced_cropped)
25 TESTS FOR KIDS
B (angle01)_reduced
2 TESTS FOR KIDS

Mobile App • Celltrion SafeKey

My Roles: UI/UX lead  • Design director • UI co-designer

Other Credits: Screen designs co-designed by Carla Capriles. Illustrations by Akriti Agarwal. 3D mockups by Manjinder Singh.

ISSUES
  • The original app and flow required too much reading for the user.
  • The visuals used in the app were not clear and were not consistent with each other.
  • Hierarchy of information was almost non-existent.
  • Inconsistent typography and design, no design system was being used.
CHALLENGES
  • Deadlines: Strict deadlines for statistics, user testing schedules, FDA regulations, release dates, production demands, and other factors required rapid execution. Given the high stakes involved, precision was a huge priority.
  • Responsibilities: My role was to be in charge of not only the UI/UX design requirements but also being in charge of the packaging design, directing the marketing materials, and overseeing design changes needed in all assets. 
  • Conflicts: A lot of the time, my desires to create a user-friendly experience collided with the requirements set by the FDA and RA team. I worked to find the middle ground of meeting regulatory standards while prioritizing user experience.
REPLANNING THE APP'S FLOW

I revamped the app's flow through careful analysis of market research and user testing outcomes. My primary goal was to enhance fluidity and intuitive design throughout the flow. This involved making strategic decisions such as emphasizing specific steps and implementing popups in appropriate contexts.

UX-POSTITS_reduced
Celltrion SafeKey

Celltrion SafeKey is the official companion app for the Celltrion Diatrust™ COVID-19 Ag Home Test.
This app guides users through the test process and helps them report the results according to federal, state, and local regulation.

side-Rectangle-4
Rectangle-2
side-Rectangle-5
Entering the app

In the new update, the app is usable for both the Home Test (14+ years) and the Home Test for Kids (2-13+ years). After test type selection, the user is taken to the relevant flow.

Rectangle-0
Rectangle-1
Rectangle-2
Rectangle-3
Test Device

Each test device comes with its own unique QR code and serial number. The user is able to proceed with the test sequence once the test device is verified. The app will prevent the user from taking the test if the test device is expired, or has already been used. 

Rectangle-5
Rectangle-6
Rectangle-8
Rectangle-4
Rectangle-9
Rectangle-10
Testing with Symptoms

The user is shown illustrations for the components needed for testing. With the new update, users will be able to store profiles and reduce time inputting their personal information. 

Due to the high accuracy rate, the DiaTrust home test is unique in that it allows users to take only a single test (as opposed to the recommended two) when the user shows symptoms of COVID-19. The app indicates this and suggests the recommended number of tests based on the users inputted symptoms.

An animated step-by-step guide

Utilizing animations, the app breaks down each step into easy-to-follow directions for the test. The screens below are specific to the pediatric usage flow, where the adults perform the test on children.

A 15-minute wait until the result

Unique to other COVID-19 mobile apps, SafeKey explains how the test works in order to provide the user clarity and transparency. This is shown in a slideshow along with other crucial information during the 15-minute timer screen. Through this, the user is able to swiftly understand the test without being disrupted during the testing process itself.

Rectangle-23a
Rectangle-21
Rectangle-23
Rectangle-20
Confirming the Result

Many users in usability studies express confusion around reading the line results on the test device. This app shows all possible results from the start in which the user could choose from. There are many cases in which the 'T line' is faint, which makes users question if it is a valid line or not. As a frequent concern, the app shows  a clickable help icon stating 'The line is really faint, what should I do?'. Upon clicking the user is guided on how to clearly confirm their line result. After their selection, the user is also given a confirmation popup to check if the selected result is correct. They are also once more guided about reading faint lines to prevent as much false results as possible. 

Rectangle-24
Rectangle-25
Rectangle-26
Rectangle-27
Rectangle-28
Rectangle-29
Rectangle-30
Rectangle-31
Rectangle-32
What Next?

The user gets their result with a full explanation of what their result means as well as official CDC guidelines on how to proceed. 

These results are then stored on both the web and native app, accessible via 'Past Results' on the home page.

Marketing Videos

Roles: Internal Creative Lead • Supervisor • Storyboarder • Script Writer.

Other Credits: 3D rendering, animating, and editing by Agency Null Object. Null Object creative lead: Hansol Jang.

There were two videos that we've released for the product. 

  1. Highlight Video: A video that captivatingly introduces the product to the viewers. 
  2. How to Use Video: A walk-through video showing viewers how to use the test.

After storyboarding, I wrote the script that verncularly described details, precautions, and the procedure of the product. Most importantly, I aimed to to deliver our branding tone of trustworthiness and encouraging the self to take control of one's own health. Once I casted the voice-over performer, I worked with them to ensure these points were delivered effectively and as intended. 

StoryBoard_How-to-Video

One-Pager

A clean and simple one-pager for distributors indicating that there are two boxes for the same product. 

It emphasizes that the components are the same and visually shows the only difference between the two boxes.

DiaTrust_One-Pager-about-2Boxes(for-Distributor-Use)_2022-01-28 reduced

DiaTrust™ Official Website

Roles: Website Wireframing • Product Supervisor

Other: Website design and copywriting by Null Object.

diatrust-website (reduced)

Visit the website: diatrustcovid.com