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 PrototypeProject type: UX and UI
Timeline: May 2020 - July 2020
Tools: Sketch, Adobe Illustrator, Figma, Maze
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.
Due to the large quantity and variety of items, online grocery shopping can be repetitive and tedious comparing to other online shopping experiences.
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.
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:
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.
User surveys
User interviews
Qualitative takeaways from questionnaire and interviews:
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.
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?”
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.
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.
Iterated wireframes were created in Sketch, and exported into prototyping applications to Figma. This digital mock-up can be tested on users.
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.
Based on quantitative and qualitative data from remote usability testing, the following modifications were implemented:
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.
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:
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.