Interaction Design
Wireframing
Accessibility
Whole Foods sought to conduct a full redesign of their legacy homesite, while incorporating personalization, facilitating easy consumption of blog and recipe editorial content, and for the first time, introducing e-commerce.
As an Interaction Designer, I collaborated with Digital Marketing Executives, Product Owners, Content Managers, and Engineers through the design process: creating personas, user flows, and wireframes to serve as the basis for stakeholder alignment and visual design iteration. Along the way, I also served as a champion for inclusive design as the point Accessibility advocate, monitoring compliance with Web Content Accessibility Guidelines (WCAG) to ensure the final product would be both delightful and accessible for future users. As a result, the design of a website North Star inclusive of 35+ key user journeys mapped to a matrix of top tasks was designed and served as the basis for the company's digital evolution.
Stakeholders and IΒ often pondered the question, "How might we mimic the in-store experience through our digital channels?" and secondarily, "What opportunities exist to facilitate the in-store experience leveraging the website/app?"
From this, the concept of a digital 'aisle' was formed which, through complex filtering and dynamic 'cards', created an engaging easy-to-navigate experience for shoppers to discover new products, recipes, and promotions. Additionally, features such as the shopping list, aided in-store purchasing and created a natural segway for the introduction of e-commerce.
Over 35 unique flows that mapped to user stories were the basis for the creation of individual User Flows, Wireframes, and Interaction Design. Below are examples of two - wires for the recipe page and a user flow that shows the complexity of the newsletter signup process.
β