Walmart Vision Center eCommerce Experience
Product design for Walmart’s first-ever prescription eyewear eCommerce experience.
My Role
Senior Product Designer
Team
Design, Product, Engineering, Business, Legal & Compliance, ADA
Tools
Figma, UserTesting.com
Timeline
1-year
The Challenge
Since 1990, Walmart Vision Centers have successfully served customers in ~3,000 physical locations, with optical labs producing ~6 million glasses annually. However, the shift toward online shopping resulted in Walmart losing market share to other retailers. This changing customer behavior highlighted the company's lack of a strong digital presence despite the expertise offered in the physical Vision Center locations.
The Outcome
We successfully launched Walmart's first digital prescription eyewear shopping experience, collaborating closely with our business, engineering, product, and design teams. This complex project was the first within Walmart's eCommerce ecosystem to handle Personal Health Information (PHI) under HIPAA regulations, requiring close collaboration with legal and compliance teams, all while ensuring a seamless mixed cart experience. Additionally, it is the most customizable product ever to be offered in the Walmart retail environment, presenting unique design opportunities to solve.
Early Research
In partnership with the Customer Insights & Strategy team, a survey of more than 1,000 participants found that ~50% of respondents preferred starting their prescription glasses shopping online. However, Walmart Vision Centers lacked a digital presence, requiring customers to visit stores to browse and purchase prescription eyewear. This limitation significantly restricted the number of customers Walmart could serve, prompting the initiative to create a seamless omnichannel optical experience that enables customers to shop however and wherever they want.
The MVP Experience
We aimed to develop a top-tier experience that empowers customers to shop seamlessly across all platforms and at their convenience. By offering features like a mixed cart, virtual try-on, lens guides, and easy prescription upload, we wanted to ensure customers have the tools and information they need to make confident choices and find their ideal pair of glasses.
Below is a snapshot of some of the features that were included in this launch and the HMW statements they aim to address.
Glasses Item Page
➡️ How might we make the ability to customize prescription glasses discoverable on Walmart’s standard item page?
➡️ How might we give customers the context they need in order to decide to begin the customization process?
➡️ How might we give customers the confidence that these glasses are the right look for them?
Lens Customization
➡️ How might we provide customers with the price transparency they need when selecting lenses?
➡️ How might give customers the information they need to decide which lenses are right for them?
➡️ How might we make the customization process feel easy, intuitive and delightful?
Add a Prescription
➡️ How might we ensure we’re compliant with HIPAA regulations in this eCommerce experience?
➡️ How might we keep things simple for customers, not bogging them down with entering prescription values manually.
➡️ How might we give customers confidence that we are tailoring their glasses to their unique measurements and prescription?
Cart and Delivery
➡️ How might we set expectations regarding when customers can expect their new glasses?
➡️ How might we keep customers informed with the status of their order while we are manufacturing them?
➡️ How might we ensure their glasses are fitted correctly once they are delivered?
User Testing
In close collaboration with our Design Researcher, we conducted several rounds of both moderated and unmoderated research studies that provided invaluable insights, allowing us to identify and address customer confusion and pain points effectively. This iterative feedback loop enabled us to refine our designs and enhance the overall user experience for our prescription eyewear shopping experience.
Iterations
With research insights from user testing, we made design updates throughout our prototype to address critical issues. Below are a few examples of our iterative approach.
➡️ Include more context on item page regarding prescription eyewear customization
➡️ Rework visual hierarchy to group question and selections more closely
➡️ Make icons more informative and relevant
➡️ Enable editing functionality when reviewing selections
Engineering Handoff and Visual Quality Assurance Testing
We meticulously documented our designs to accommodate the various engineering teams involved in developing the product across Walmart's expansive engineering organization. This centralized source of truth streamlined communication and facilitated efficient collaboration, allowing us to conduct thorough and exacting visual quality assurance testing. As a result, we ensured the delivery of a best-in-class product experience that met our high quality and usability standards.
Results and Continued Iterations
This complex product has been fully launched and scaled to all Walmart customers, with 25,000 pairs of glasses sold thus far. Since the launch, we've continued to iterate based on early findings in the success metrics. One post-launch iteration addressed a high rate of cancelled orders due to missing or inaccurate prescription details. This quick iterative loop brought the cancellation rate down by 30%.
➡️ Provide more guidance on prescription requirements