senior designer
2019-present
2019-present
OptumRX and Optum Home Delivery Pharmacy is a member facing PBM, private-label product, and open market pharmacy, which helps up to 200 million users to manage their prescriptions.
As a senior and lead product designer on the Optum RX design team, I am responsible for communication between the the product and design teams and overseeing designs for all capability work to make sure it aligns to our design standards and patterns, as well as satisfying all requirements from business, product and development.
Over the last 5 years, we leveraged member feedback and analytic data to create a design system for Optum RX/Home Delivery using Optum Brand guidelines with mui-react as a base framework component library. I work closely with a small group of front-end developers to ensure and inspect that the development tokens and components match our specs and maintain a working shared component library (SCL) in Storybook. In that time we created over 20 different private-label client themes and scaled the system to 5 products (microproducts) across the Optum RX/Optum ecosystem. Additionally, I am the lead designer on the Rx Management capability where I incorporate our design system and patterns into the existing legacy portal pages, fulfill product feature requirements and updates, and enhance the user experience with insights gained from our analytics and user research team, as well watching recorded user sessions in Glassbox.
The main challenge for the design system is to offer clean, simple layouts and flexible structures, so the user can quickly identify medications that need their attention. It is is also key that the pages follow a consistent look and component structure for a seamless and intuitive feel across the entire site. Additionally, we are working under the larger Optum brand, so the system had to conform and adapt to Optum guidelines and any changes or updates that may occur.
Content structure
The first element of the design system we designed was a very basic title/subtitle structure for displaying content. We used a familiar pattern of displaying the most important piece of information with the title in a larger, bold font and supporting pieces of content in a smaller, regular weight body font style.
A typical way we began using this was using the title area for a medication name and the subtitle area for to highlight key metadata values about the prescription that would help the user recognize the correct prescription and not get lost in confusing long names. The structure of the metadata can be flexible depending on the context of the page and action the user is taking. During user testing we found that users responded very well to separating the brand and generic name of a drug and showing the number refills remaining to help them quickly manage their prescriptions.
Example of how a medication name displayed before (left) and after (right) redesign
Containers & cards
We then took that basic content hierarchy and placed them inside different containers and cards that allow users to easily digest chunks of information and take specific actions. Other UI elemets, such badges, buttons, icons, or checkboxes are added to further highlight the main action or key information. We worked closely with our A11Y engineers to ensure the hierarchy, code, and functionality of the cards exceeded WCAG standards.
Example of content structure in clickable cards with added badge UI element to designate statues for different prescriptions
A similar content structure and set of rules are placed into larger parent containers to group related actions or content on a page. The basic card structure has a consistent use of padding levels, and border weight, color, and radius, depending on the use and hierarchy inside their parent containers.
Drawer actions
Another early pattern we established was placing actions and additional copy inside drawers to allow the user to focus on one action or options to resolve an issue with their medication. Our goal was to reduce the cognitive load on the user by limiting the amount of information on the page and guiding them to the primary action.
RX Management
The main capability we began the applying redesign to was RX Management. RX Management really only consists of two main pages, My prescriptions/Medication list and Prescription details. From the Medication list users can see the status of all their current active prescriptions and prescription details allows users to take action on any of their prescription statuses.
Medication list
The first update we made to the medication list was to replace the old medication cards. Users had a hard time identifying the most important action on the legacy cards and felt overwhelmed by the complexity of the cards in general. Typically they could find the primary cta, but struggled to track information and actions such as price and the auto refill status toggle across such a wide width. Additionally, there was some confusion about turning auto refill on/off and changing the date.
My prescriptions around 2020
Medication list around 2022
First we updated the card to a simple clickable card that would navigate the user to the prescriptions details page (previously the link was the med name in the old med card.) We were unsure if our average user group would be familiar with clicking such a large target area and removing the standard affordance of a blue link color to indicate navigation. To aid the affordance of the card we added a chevron to the far right of the card. Next, we reduced the width of the cards by adding a warm white page container to help pad out single column pages. To help users identify urgent statuses we added new brand icons to designate the fill status of their prescriptions. Lastly, to provide further details on the status we added a badge using our notification colors to indicate severity.
User testing confirmed our choices with a higher success rate of identifying the prescriptions needing immediate attention and clicking the card to go to the details for that prescription. Users also found the new cards to be much easier to read and follow.
The last update we made to the page was to further chunk the content into containers to both help distinguish the prescription and pharmacy types, as well as further reduce the width of the cards to help with readability. We also removed the icons from refill and coverage disruption statuses to help reduce the visual and cognitive load on the page. We worked with the larger Optum design/brand teams and our accessibility partners to develop status badges that stood out more.
The initial changes made to the RX Management pages helped set the standard for our new design patterns and page templates that have now been incorporated into our SCL and larger design system. Below are some more examples of how this system was applied in other areas of the member portal.
Prescription details
mWeb Prescription details pages showing various medication statuses needed for management
Renewal flow
We use consistent badge type and notification coloring and language through a flow. Additionally similar page layouts help the user move smoothly from page to page.
Refill flow
