DISCLAIMER: This Case Study was made as one of the projects of the UX Design Course for the Juno College of Technology, and has no relation to the brand mentioned.

Priscila Mattos | UX Designer | July 2020

View Prototype

OVERVIEW

Project type: UX and UI

Timeline: May 2020 - July 2020

Tools: Sketch, Adobe Illustrator, Figma, Maze



MY DESIGN PROCESS

Design Process

CHALLENGE

The goal of this project was to design a web application for an online grocery service that was easy, quick, convenient and helped the client stand out from other grocery delivery services. I was the sole designer on this project.


PROBLEMS TO SOLVE

Due to the large quantity and variety of items, online grocery shopping can be repetitive and tedious comparing to other online shopping experiences.


EMPATHIZE

The first step in the design thinking process was discovering and determining the user’s needs, behaviours, concerns and motivations when interacting with the Atlantic Superstore website.

Empathy Map
Research Plan

RESEARCH

The main objective of this research is to analyze, critique, and redesign a functional User Experience Flow, understanding what are the user needs and concerns when shopping on the Atlantic Superstore website. It may include, but not limited, the following ideas:


RESEARCH PLAN

Participants will be recruited through friends, family, and personal connections. A link to a Google Form questionnaire including 14 questions based on shopping experiences is going to be sent by e-mail to seven participants who are already engaged in online grocery shopping. They will be able to answer the questionnaire using their desktop or mobile device at home.


RESEARCH COMPONENTS

User surveys

User interviews

Quotes from Research

Qualitative takeaways from questionnaire and interviews:


DEFINE

In this step, the objective was defining the customer’s motivations and needs. It is the key to keep the user at the centre of the design process and rebuild an application that satisfies user and business goals.


Research






HOW MIGHT WE QUESTIONS

I learned from my research that people prefer to shop on a web browser than mobile devices. Therefore, this informed my decision to better improve the web experience because it was already a platform they were more comfortable using. Within the web experience, I wanted to specifically improve the product page and the check out process, and framed them through these ‘how might we’ statements:

“How might we improve the check out process for users in order to avoid having one step per screen?”

“How might we reposition products on the webpage to make it understandable for the user?”

User Journey Map

LOW-FIDELITY PROTOTYPE

Since I got enough information about what the user’s needs are, I sketched out some ideas for the new user flow. A clickable prototype was created using InVision to test the main screens.



View low-fidelity prototype here

IDEATE

In this phase, a task flow was created to have a clear idea of the necessary steps that the user needs to complete a task. Also, I created a moodboard with design ideas based on market research data, and then the first wireframe was built using Sketch.

USER FLOW

PROTOTYPE

Iterated wireframes were created in Sketch, and exported into prototyping applications to Figma. This digital mock-up can be tested on users.

USABILITY TESTING

The iterated wireframes and prototype were tested with users in-person and through online, remote user testing platforms (Maze and Zoom), and included: click analysis, time spent on each task, and missing paths. During the testing, users were asked to complete three tasks based on the main user flows: sign up for an account, add a product to cart, then proceed to check out.

Overview and goals/Key findings

Solutions

Based on quantitative and qualitative data from remote usability testing, the following modifications were implemented:

VISUAL DESIGN

Following the brand attributes and design, the original colour palette and typography were kept. Product images have been standardized. I worked in Sketch and Illustrator to create buttons, icons, and colour palette.

KEY LEARNINGS

To my understanding, a clear layout of information and a well-structured user flow motivates the user to stay focused and move towards a goal. The success of the user flow was measured as follows:


In this project I learned:

CONCLUSION

Based on a user-centred study, this is my first project focused on UX/UI. Understanding the user's real pains and needs, I redesigned the Atlantic Superstore mobile website in order to guide the user to complete a task successfully.