Rite Aid’s
Digital Refresh
Enhancing the digital experience with a "fusion" of traditional medicine and alternative remedies
Rite Aid’s RxEvolution Strategy Overview
Rite Aid is rebranding as part of Rite Aid’s RxEvolution strategy to transform the company into the leading whole health destination that treats mind, body, and spirit. It seeks to deliver a fresh, differentiated experience across all channels with a company strategy targeting Millennial and Gen X women who take care of themselves, their children, aging parents, and even pets. Rite Aid has been establishing on-trend supplier relationships, delivering new and enhanced training to its in-store associates and pharmacists, physically refreshing its fleet of stores, and modernizing its e-commerce infrastructure and online experience. Together, this comprehensive approach is aimed at helping customers achieve a level of well-being that goes beyond traditional perceptions of healthy.
Upgrading the Digital Experience
Rite Aid's goal is to launch a completely modernized online experience through RiteAid.com and its mobile app, kicking off a digital refresh that provides customers with an elevated user experience. The enhanced RiteAid.com will be fresh and modern with personalized content, intuitive navigation, and new omnichannel shopping options.
The Challenge
How might we create a unified, modernized, and user-friendly digital experience on RiteAid.com that speaks to its new business goals and target audience without alienating its current customer base?
The Goal
Build a foundational component library to support Rite Aid’s digital refresh including documentation for internal and external partners. The ultimate goal is to create a true design system, encoded in HTML and CSS.
My Role
Lead UX Designer for the creation and implementation of Rite Aid's new design system, including the redesign of top-of-the-funnel pages like the home page, product details pages, and category pages.
Interviews
Before diving in headfirst, it was important for us to understand the use cases for Rite Aid's web services. To better understand our new target audience we conducted user interviews in the form of casual conversations about their day-to-day task and the pain points they faced while shopping online and managing their family's pharmacy needs.
Personas
Based on user interviews we set up three personas. We refer to them throughout all of our UX design projects. Their main differences lie in their motivations.
Jenny the "Juggler"
Jenny works as a senior manager in a reputed company in New Jersey. As a new parent, she has a lot of responsibilities. Also, her parents are financially dependent on her.
She wants to ensure the healthy upbringing of her child for which she strongly believes in an organic lifestyle and unprocessed food. At times Jenny depends on her
family and friends for advice.
Judy the "Nester"
Judy works at a news agency as a content writer in New York. She is a goal-oriented, strong independent woman. With growing age she experiencing basic health issues she is put on regular medication, which affects her active healthy life. Judy is part of various charitable services and she enjoys being part of them.
Being a medicare couple Judy and her husband proactively volunteer and examine the latest medications.
Julie the "Transactional"
Julie works as a Receptionist in a reputed hotel based in Las Vegas. Her job requires her to be a multitasker which accounts for a lot of responsibilities. She is worried about the pandemic and if it will affect her job and family.
She wants to get vaccinated to be safe from this situation.
Why a Design System?
As we started to define a roadmap of features and pages for Rite Aid's new digital experience, we realized a single source of truth was needed that would allow us to design, realize, and develop consistent and organized digital products. Therefore, we decided to set up a design system in Figma with reusable components and a unified set of rules.
RiteAid.com's new digital color palette with a focus on meeting AA ADA requirements
Prioritize System Parts
We conducted a Design Sprint with the Rite Aid product and tech teams including developers, product managers, marketing, and UX to identify what parts the team would prioritize for this system.
As a result, we set the goal for version 1.0 of the design system to build the foundation by creating a compressive, scalable visual language and build atomic components most often reused and combined to make larger reusable modules and landing pages to improve the user experiences. Our emphasis in this process was to improve the overall UX of the site and help speed up the design and development phases through standardized UX patterns and best practices.
Components vs. Module
Critical to the success of the system was alignment with all teams on the difference in the parts we would be designing and building. Components are distinctive UI elements that are built to be used over and over throughout a product. They are most often actionable elements like buttons, input fields, selections, or tooltips.
The combination of different components adds up to modules. We are able to reuse and rearrange modules on various pages throughout the site as needed.
Redesigning Key Pages for RiteAid.com
Now that we had built and defined our components library and modules in Figma, it was time to start putting them to use. We came together as a product team and decided to tackle three key pages on our e-commerce platform:
Home page
Product details page
Beauty category page
After coming up with our strategy for improving these pages, we got to work ideating, prototyping, and testing before creating our final UI designs in Figma. The site needed to embody Rite Aid's new whole health mentality. We achieved this by designing a brighter and more modern site that includes helpful content to educate our users and provide quizzes to them so they can receive a personalized product shopping experience.
Newsweek Recognition
After our digital refresh launch, Newsweek ranked RiteAid.com #4 for Care & Cosmetics (multi-brand). The goal of these rankings is to point Newsweeks readers to the Best Online Shops of 2021. Newsweek paired with respected global data-research firm Statista to create their rankings.
the pdp page
Next Steps
We have big plans for Rite Aid’s Design Systems continued growth. The library is built in a way that new releases can be easily adopted into products and we are working to generate a backlog of new modules and components to build. Legacy products are adopting elements of our new design system as part of updates, and new products are being built using the library.
