Overview
Optum Rx’s public-facing pages had fallen out of sync with the authenticated member experience. The landing pages, educational content, and help resources needed a comprehensive redesign to align with Optum’s updated brand guidelines—including modernized color palettes, typography, and content strategy—while creating a cohesive experience for the company’s 28 million users.
Challenge
Working within Adobe Experience Manager (AEM) presented significant technical constraints. The platform’s component library limited our design flexibility, restricting us to predefined UI elements, fixed layout sections, and strict character limits. This required creative problem-solving to deliver a fresh, modern experience while working within a rigid CMS framework.
Solution
Redesign of Optum Rx’s entire public web presence, including landing pages, form flows, educational articles, and help documentation. Throughout the process, we maintained a dual focus on both prospective and current members, ensuring the experience served users across different stages of their healthcare journey.
TOOLS
- Figma
- Adobe Exprience Manager
- Adobe Workfront
- Baymard Website
- NNG Website
- Photoshop
- Illustrator
Design research
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.
Landing page
Contact us / Help & support
Educational article
Competitor analysis
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).
Competitor screenshots
Landing page
CenterWell Pharmacy > Home
Contact us / Help & support
CenterWell Pharmacy > Support
Express Scripts > Contact us
CVS Caremark > Contact us
Educational article
CenterWell Pharmacy > Home
Inspirational screenhots
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.
Landing page
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
The major changes from the legacy landing to our new landing page focused on tightening up excessive whitespace, showcasing high traffic features, better messaging, & contextual navigation to support & resources.
For the hero & initial viewport content, I aimed to maintain our login widget convention for our members, given what we saw from available analytics.
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.
Just below the viewport, or barely shown after the page has loaded, is our quick order tracker & home delivery promotional section. The order tracker was brought to the forefront on the page allowing members to get right to the form fields, rather than going to the “Track Order” page only.
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.
Throughout the page, there are two more global message components that are meant to capture additional messaging that might be less urgent or dated (e.g., previous COVID-19 test kit announcements, etc.).
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.
Landing page wireframe
After the wireframing & UX review stages, my team & I had to refactor our designs that were based on our own design component library and reconfigure them to a different development component library.
These components posed an initial challenge for us with various constraints ranging from rigid cards, buttons, & sections to character limits on headers, paragraphs, & microcopy.
Our UI designer, copywriters, and development partners worked in lockstep to deliver & preserve as much of the wireframes’ structure as possible.
Thus, we merged that structure with the development library to produce what is seen on Optum Rx’s live website.
Moving forward
Future iterations
Learnings