Introduction

Albertsons Companies, Inc is one of the largest food and drug retailers in the US. It includes 21 different banners, serving customers across 35 states. As Albertsons and Safeway brands got merged, the company decided to invest more on online grocery delivery and expand digital presence to increase sales.
Shop Safeway.com

My Role

UX designer - User flow, wireframe, low/high fidelity prototyping, interaction design, accessibility and analysis.

Team of 2 designers and 6 developers

Tools

Sketch, Illustrator, Photoshop, Mockplus, Invisionapp

Adobe analytics tools

Business goal

The primary goals of the redesign were to increase sales frequency per user and amount spent per order by offering a better user experience. New ‘Drive-up and Go’ service was introduced, which required a new user interface, giving customers option to order online and pick up from their preferred store saving on delivery fee.

The Problem

Provide users a fast and intuitive experience for new and repeat customers who would add items to their cart, select a delivery/pick-up time and complete checkout process. The project would address any functional gaps which were causing less than optimal user experience. Customers would be able to place order from anywhere from any device.

Process

Research and Synthesize

Partnered with User Researcher to understand how the existing site has been used and what issues customers have been facing. This included Usability Testing with “Think Aloud” method as they walk through the process of buying a product. The most valuable customer feedback came from customer service team and going through open tickets from real customers.

With the data from user research, we:

  • managed to identify and highlight likes and dislikes of using online store
  • understood how they interacted with similar websites and what were their expectations
  • discovered their pain points and learned more about what they felt at different stages of online buying process
  • identified functional requirements and gathered ideas about how we could solve some of the problems.

Ideate, Prototype and Validate

Reviewed site analytics and e-commerce best practices to identify key opportunities to optimize the checkout experience and started creating wireframes for different screen sizes. Based on user research data, created user flow diagrams to understand how users interact with the site to place order with minimum steps, without going to-and-fro to review order details. Considering the challenges, company goals and accessibility guidelines, sketched multiple wireframes, and low-fi prototypes to optimize the user experience. Presented these options for user testing to validate the design prototypes. Used quantitative data and qualitative feedback to inform the design decisions iteratively. Based on user testing updated hi-fi prototypes for stakeholder reviews.

Facilitated brainstorming sessions with Product Managers, marketing team, and other stakeholders to define problems, prioritize ideas, and review designs.

Collaborated with cross-functional teams to work iteratively, and to streamline design and maintain a customer-centric perspective in design decisions.

Checkout mobile wireframes for selecting date and time, pickup store and payment details on checkout

Checkout mobile prototypes

Challenges

Facilitate selection of delivery or pick up service options - Customers were having difficulty updating their delivery options. The link to edit delivery options was not intuitive adding more calls to customer service team.

Easy access to shopping cart information as they shop - As customers browse they were not able to see items in the cart and the amount.

Avoid non-linear checkouts - Earlier due to non-linear checkout process, customers had steps within steps that loop back to a previous step upon completion. This created confusion and discouraged customers to complete the process.

Design declutter for selecting delivery date and time - The customers were given multiple options but not in a clean way. The page would reload if customer wants to select next week creating performance issues and confusion for customers.

Solution

On the redesigned responsive site, customers are first given an option to select a delivery method to place online order. This helps user to pick their preferred pick up store upfront or edit the delivery address if required.

On desktop redesigned site, the shopping cart list is available on the browse page as a sliding side panel which expands at the right side, displaying the “Checkout” and “Full cart” buttons. This feature helps customers to add or remove quantity from the cart. It also enables direct access to checkout, clearly showing payment amount for the items in the cart. Each element shows focus indicators when navigated using keyboard, helping users know which element has the focus. The new design is more cleaner and consistent interface. It uses familiar metaphors and language which are used on similar ecommerce sites.

The checkout page has all the required forms to complete the checkout process so customers do not have to go back and forth. It shows number of steps to complete which gives user better understanding of the steps involved. This gives users flexibility to check and update information at the same page and avoid errors.

Redesign decluttered the options for date and time selection with more clean and functional experience for customers avoiding user error and frustration.

Select/update location for delivery or the store for pick-up service.

Customers have access to cart details as a sliding side panel while browsing products.

Linear design for checkout flow

Clean and functional design for date and time selection.

Testing and Feedback

Testing and feedback was a continuous process starting from discovery phase, then ideation and prototyping to identify the pain points. Invision prototypes were shared with stakeholders to get early feedback.

Design Principles Achieved

  • Use familiar metaphors and language
  • Clean and functional design
  • Flexibility
  • Recognition over recall
  • Prevent errors