Groundwork
Context
Optum Rx’s landing & public pages needed a refreshed design and updated experience to match it’s latest branding, color, typography, and content that aligned with the authenticated experience.
Challenge
Some of the UI components & elements had unique constraints, limiting my team & me to only a handful of options, sections, and character limits for the page sections, functionality, and copy that we chose.
Solution
My team & I redesigned all of the public pages ranging from landing and forms pages to the educational articles and help pages, keeping in mind current & new members at the forefront.
User research
Ultimately, user research was extremely limited. Given the changing priorities on the project, we didn’t have much chance to conduct user studies to garner feedback & data from our members directly. Thus, we relied heavily on previous analytics data & best practices from external user studies.
Page traffic
Jan - May 2022
Having only a short window to work with for analytics data & virtually no previous user research, a lot of our design decisions had to be based on external user research & best practices. Our content-focused articles (e.g., Using your account, Medicine disposal, etc.) had to be built from the ground up by removing outdated information & forms and matching our latest features, designs, & experiences.
Design research
Optum Rx legacy
Landing, Help & support, and Resource articles
Our legacy pages still used former brand guidelines, color schemes, & typography - as well as having a quite ‘dated’ look & feel for many of the informational pages. To start, my team & I began by combing through all the existing content on these pages, determining whether the mentioned services/features were still active or in use, and overhauling the education pages to align with our authenticated experiences.
Competitor analysis
Three direct competitors
A few competitors of ours have been Humana/CenterWell, Express Scripts Pharmacy, and CVS Caremark. And, some pharmacy benefit managers (PBMs) have separated their services from respective home delivery pharmacy partners or services. In our research, we were interested in how that information was split & conveyed on their public pages.
Additionally, we looked for how they structure their sitemap, pages, navigation, & content for key features like “quick” refill (i.e., refill an Rx without logging in), order tracking, sign in, and help pages, all while keeping in mind the split between home delivery & PBM services.
Virtually all competitors shared commonalities with layouts & patterns on the landing page. Most, if not all, featured a welcome hero & image, an unauthenticated action or two (e.g., order tracker, quick refill, etc.), and a sign-in link either in the hero or navigation header. Beyond that, competitors deviated in terms of how their members could get help (e.g., via chat, email, phone) and learn about their features & experiences (e.g., blogs, articles, FAQs).
Inspirational screenshots
For visual inspiration, layout, & information architecture
Since the majority of the Optum Rx public pages are content-heavy or showcasing our products & services, we gathered screenshots from more innovative ‘brochure-style’ websites in order to explore some more ideas that went beyond even what our competitors were doing.
Wires & mockups
My involvement in the designs below focused on the general page layout, structure, content, & organization for the wireframes. My team, along with my feedback & input, took on the visual design, approved copy, illustrations, & branding.
Landing page wireframe
Above that, is space available for our global message component (e.g., shipping & weather updates, general medication recalls, etc.) that members can expand (i.e., similar to an accordion interaction) to learn more if interested.
To the right of that, a section is devoted to our home delivery promotional page where members can click a link to learn more about the program & its benefits.
Just above the footer is a modular section meant to house additional resources, optional next actions, & contacting support. There are two dynamic slots in the top row for less important information but also for messages that could use greater visual emphasis depending on the event. The bottom row has static cards for contacting support teams as well as links to the mobile app for the iOS & Android stores.
(Wireframe) Optum Rx > Home
Live site / mockup
These components posed an initial challenge for us with various constraints ranging from rigid cards, buttons, & sections to character limits on headers, paragraphs, & microcopy.
Thus, we merged that structure with the development library to produce what is seen on Optum Rx’s live website.
(Live site) Optum Rx > Home
Moving forward
Farther down the road, I would like to explore a different approach to the education resources entirely. It could be useful to implement a question and answer (Q&A) forum that allows for members to ask questions (and also answer other questions asked) that could be addressed by our support team. Then, having that feedback loop could be used to generate an ongoing up-to-date frequently asked questions (FAQ) section too.
My time working with the public pages has taught me a great deal about the importance of information architecture (IA) and considering device heights for the landing page. What users see & understand in the first seconds from landing on a website is crucial for making a good, solid impression for any business.