Prescription Medication App

I led visual design and created a new design system for the Optum Rx prescription medication mobile app redesign.

Year
2020

My Role
Lead Visual Designer

Complete redesign

The Optum Rx mobile app had become outdated and needed a refresh. I worked alongside a Principal UX designer on the complete redesign of the Optum Rx mobile app, where I led visual design for the project. Below are some examples of the look and feel of the app before the redesign.

My approach

Redesigning the entire app from the ground up was an amazing opportunity for us to fix certain usability issues as well as update the look and feel globally to be more in line with Optum’s evolution as a brand.

Some of my initial questions:

  • How was this app being built? Did we need to adhere to iOS and Android native elements? Were we building a web app or a hybrid app?

  • How did other apps from across the enterprise look? What were the conversations other teams were having around mobile app design?

  • What did Optum’s existing design system have to say about mobile app design? How updated was it? How comprehensive was it?

  • What are the white labeling considerations for the redesign? How is white labeling done today in our digital products and what are our possibilities?

  • How might we rethink the mobile app tile and style of graphics used in the app stores? Are there any emerging conversations in other teams about standards for mobile app tiles and store graphics?

My role

I led visual design for the project and worked alongside a Principal UX designer. The Principal UX designer worked through the experience flow and created basic wireframes based on requirements from product. I then worked closely with the Principal UX designer and the Product Manager to understand the needs and translate the low-fidelity wireframes into high-fidelity screen designs. Below are some examples of wireframes I received from UX.

App design system development

After connecting with other teams across the enterprise, I learned that the existing app design guidelines in Optum’s DPL (design pattern library) were outdated and had many issues that had not yet been addressed. I was given the green light to create new design patterns and guidelines for Optum Rx’s app. First I began working on definition of the basics: color, typography, icons, buttons. This foundation helped me work through all the rest while designing screens. This is the 4th pattern library like this I’ve created, and I find that it’s important to suss out as many potential uses of a certain component as possible before committing to it in a pattern library. This is where the back and forth is helpful (and also messy!). It’s about stretching the system and your own design decisions until you find the cracks, so that your final solutions are solid and flexible enough for an entire system.

I kept in touch with various teams throughout the creation of the new design system to maintain enterprise-wide partnerships and get feedback. Below is a sample of the elements and components I created for the Optum Rx’s app design system. For brevity, not everything is shown in the below image, including white label guidelines.

High-fidelity screen design iteration

As mentioned above, I worked on high fidelity screens and the new Optum Rx app design pattern library simultaneously. Many times I found that a certain design element like color or typography needed to be modified as it became clear that it wasn’t working in a certain design. Or sometimes an icon design in one area inspired a change in another area. It’s a delicate dance but an exciting one. Below are some samples from design iterations as I worked through how I wanted the app and the system to come to life.

Key Takeaways:

  • I tried to push the design limits of the order tracker and came up with some pretty novel ideas. In the end, usability testing proved that it was confusing for consumers so we needed to simplify.

  • I came up with interesting new ideas to use color as a method of continuity between different types of tasks that a member might take. The idea was that this color would follow them through the completion of their task as part of the header background. I received feedback from stakeholders and others that this was too different and our engineering partners helped me realize how much extra time it would take to build. In the end, I didn’t think it helped usability and based on the feedback received thus far, I decided to scrap it.

  • Creating a system is much more than finding what styles fit the brand or look nice. It’s about making sure you’re putting together the colors, icons, type, and components together in ways that are consistent yet flexible for all scenarios. Scalability is what sets a good design system apart.

Below are some samples of final screen designs.

(Does not include every feature designed and every variation delivered to engineering.)