CLIENT: Confidential

TIMELINE: April - August 2019

ROLE: UI design, Visual design

TOOLS: Sketch, Illustrator

TEAM: Monica Ma, Hunter Whitney

Case study

This is a UX/UI project for a well-known biomedical company specializing in pharmaceuticals, diagnostics, and personalized healthcare. The project was led by UX designer Hunter Whitney, and I helped out with UX/UI design and illustrations for a company admin tool. To honor strict confidentiality, I’ll be displaying only partial images of the product. The final deliverable included 21 website screens in medium-fidelity, 7 illustrations, and 36 icons. The team planned to transfer the designs to the in-house UX team hey were building. One of the main challenges was to create an internal tool that would speak to scientists their visual language and at the same time would be joyful to use every day. And I think we accomplished it.

Design thinking and research

Hunter Whitney was my Design Thinking professor at UC Berkeley Extension, and I gladly joined him in this project because I share the same interest in science, data visualization, and design thinking. Besides, it seemed challenging - which I appreciate - because it was about finding a balance between presenting scientific information in a fun way that will make users happy and fulfilled about their jobs. When I joined, some low-fidelity on boarding mockups had been already created and confirmed with the client. My first task was to translate them into Sketch, research alternative UI layouts, as well as icons and illustrations. Below is a mood board that emerged after a week of collaborative research.

Design Challenges

Design Challenge 1: Onboarding

The first design challenge was to create Onboarding flow showcasing three or four steps and allowing users to set up their work environment. By that time it had already been decided that there would be five vertical menu tabs to the left, including Onboarding. So, we had to somehow incorporate a list with the Onboarding steps without over cluttering the pages. Client also requested that there is a Landing page for the onboarding which greets user and describes the project in general.

The first two versions of the Onboarding user flow are below. In Version 1, the Steps can be accessed via horizontal tabs at the top, while in Version 2 all steps are visible at all times. Even though Version 1 was simpler, its functional limitation was that it was not scalable because there could be more text in the step description.

The final version included a Landing screen with a carousel slider that greets employees and displays daily featured content in the next slides. If users select the Onboarding tab, the greyed out tab icon changes color to blue, and they see three Onboarding steps as expandable horizontal tabs.

Design Challenge 2: Blending UI and science

The second challenge was to design Cluster Usage and Applications and Services pages that would make the content - previously presented as a relatively boring list - more engaging and relevant to science and medicine. We played off the menu icons for these pages. For the Application and Services page, we incorporated a hexagon with an app logo in the middle. For the Cluster Usage page we took a cluster icon and "deconstructed" it to represent each cluster individually.

Design Challenge 3: Team page

Team page was a very fun design challenge. We wanted to emphasize on the idea that every member of the company is just like any element in the Mendeleev periodic table - closely tied with its neighbors. Together they are a team building amazing things together. Each personal card expands on click into a large pop-up with mode detailed information about a person and contact details. Adding CTA buttons (email, call, LinkedIn, etc.) were explored but not in scope for this design deliverable.

Design system

Below is the design system for the project. For the colors we used company's brand blue hues, and we also added some brighter colors for the illustrations and minor visual elements like section tabs.

Project takeaways

I enjoyed working on this project because it perfectly connected two areas of my interest - science and design. It also allowed me to advocate for cheerful user experiences in what industry calls “boring” internal dashboards. How do we visually unite those in UI design in the ways that are engaging, intuitive, and empowering? Those are some of the questions we asked and came up with the solutions for.

I believe we delivered our client what they needed to take this project to the next level - a thorough design process with the solutions that were customized and reflected their employees’ needs of effortless connectedness.