# Care, delivered: Giving a 5-year-old OTC store a makeover seniors could actually use Designer: Phaneendra Sivangula Interactive version: https://hellophaneendra.com/#/work/medicare Role: UX Designer (design lead) Timeline: 40 days Team: Head of Design, developers, internal and external stakeholders Summary: NationsOTC lets Medicare and Medicaid members spend their insurance benefits on over-the-counter health products. In 40 days, I redesigned the legacy store for members aged 55 and up, without touching its old code. Problem: A complex, dated store built on old tech, used by seniors only because nothing else let them spend their benefits. Approach: Persona-led experience audit, a new design system applied area by area, accessibility fixes and constant stakeholder feedback. Outcome: An adaptive desktop and mobile store, 3x the daily orders, and a Spot Award for the work. --- HEALTHCARE / E-COMMERCE / NB HEALTHCARE TECHNOLOGIES ## Giving a 5-year-old OTC store a makeover seniors could actually use NationsOTC lets Medicare and Medicaid members spend their insurance benefits on over-the-counter health products. In 40 days, I redesigned the legacy store for members aged 55 and up, without touching its old code. ROLE UX Designer (design lead) TIMELINE 40 days TEAM Head of Design, developers, internal and external stakeholders SCOPE 8+ experiences, 120 screens, 2 user roles +300% orders per day after launch 72% conversion, up from 44% ~4M Medicare & Medicaid members PROBLEM A complex, dated store built on old tech, used by seniors only because nothing else let them spend their benefits. APPROACH Persona-led experience audit, a new design system applied area by area, accessibility fixes and constant stakeholder feedback. OUTCOME An adaptive desktop and mobile store, 3x the daily orders, and a Spot Award for the work. 01 The brief BACKGROUND ### A store that looked like 1995 NationsOTC is a 5-year-old, highly complex product that members use to buy over-the-counter health products with their insurance benefits. Demand kept growing, but the product never changed. Siva Koneru, Head of Design, wanted to untangle it piece by piece and replace it with a modern, user-friendly experience. The first step was a new product details page. The challenge: give the old product a real makeover without major changes to its code or functionality, in about 6 weeks. MY PART ### Leading the design end to end As the UX Designer, I led the design work under Siva's guidance, handed designs off to developers and made sure there was no design-to-development gap. I also managed timelines, deliverables and schedules. - Experience audit, concept map and experience map - Interaction design and interaction notes - Visual design and prototyping 02 Research PERSONA ### Designing for members 55 and up Seniors had used the site since 2015, not because it was good, but because nothing else let them spend their benefits on OTC and food products with no out-of-pocket cost. Too much change, too fast, would overwhelm them, and everything had to be accessible. I built personas with internal and external stakeholders, then went through every button and function in the main areas asking one question: Would an older, first-time user know what this means? 6 times out of 10 the answer was no, so we changed it. 03 Design UI DESIGN ### A new design system on very old tech Just before the project, I had been building the company's first design system. The OTC store ran on old technology, with real limits: - No drop shadows - No rich interactions - No clear hierarchy - Failing accessibility standards almost everywhere Users shouldn't notice a jarring change, so I audited each area of the old product and applied the new brand and UI standards one area at a time, with multiple design versions per release for a smooth transition. Many members were visiting on phones and tablets. With no time for native apps, we built an adaptive site that follows mobile and tablet standards. ACCESSIBILITY ### Small fixes, big difference Within the timeframe, I improved accessibility wherever I could: adding icons, larger text and highlighted text fields so members always knew where they were on the page. Even the highlights were a technical nightmare and shipped a few months later. I also reviewed every button so its label was consistent and explicit. FEEDBACK & ITERATION ### Putting designs in front of real users We kept testing designs with internal and external stakeholders and iterated on what we heard. The visits showed valuable features members didn't know existed, hidden behind obscure icons. Some feedback was negative. One client preferred the old version. That helped us work out whether it was resistance to change or a real problem many users would share, and fix it early. Here is the final flow, from logging in to a product page. Benefits lead every step, and the health profile shapes what members see. 01Log in Recommended products start right at the door. 02Start a health profile Home invites members to share conditions, and shows what's trending. 03Conditions in plain words Simple buttons instead of medical forms. 04Search by benefit Results filtered by wallet and benefit balance. 05Product details Price, purchase limit and Add to Cart up front. 06Condition info and related products Clear labels, larger text and explicit buttons. 04 Outcome LAUNCH ### Three times the orders, every day +300% orders per day 72% conversion, up from 44% ~4M Medicare & Medicaid members The store launched in desktop and mobile layouts. Daily orders grew by 300%, conversion rose from 44% to 72%, and by 2022 it was serving more than 25 million people in the US. The final designs. Use the arrows or swipe. Click a screen to see it full size. 01 / 05 Log in, and get products picked for you RECOGNITION ### A Spot Award for Project OTC The work on Project OTC earned me a Spot Award (Rookie) at NB Healthcare Technologies in January 2021. Only a handful are given across the organization each year. TAKEAWAYS ### What I'd bring to the next one 1 #### Change gently. For long-time users, a gradual redesign beats a big reveal. 2 #### Clarity is accessibility. Explicit labels did as much as bigger text. 3 #### Negative feedback is data. Find out if it's habit or a real problem, then act.