OVERVIEW

Project type: UX and UI

Timeline: May 2020 - July 2020

Tools: Sketch, Adobe Illustrator, Figma, Maze

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.

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:

• Possibilities/alternatives to make it easier to find products for people with dietary restrictions;
• User’s routine and the way it is related to grocery shopping;
• How much a bad design can affect the user experience;

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

Qualitative takeaways from questionnaire and interviews:

• The main concerns involve the home page, top navigation menu, and readability. Some participants felt confused with repeated or unnecessary information. The excess of promo banners was also mentioned.
• All participants were familiar with the process of online shopping, and most of them prefer to do it in a Desktop instead of a mobile device.
• All participants were familiar with the process of online shopping, and most of them prefer to do it in a Desktop instead of a mobile device.

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.

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?”

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.

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

• Visual sign showing that a product was added to cart is important to show the user that the task was completed;
• Users tend to look for a path to the main categories of the grocery store;
• User got lost when there are many pages on the check out processes
• The font size in some sections was too small.

Solutions

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

• Re-arrangement of the department section on the home screen, so that it would align with user’s mental models and help ease navigation;
• A shortcut in small buttons redirecting to the most searched categories were created;
• Notification to show that the user logged;
• Notification created to show that a product has been added to cart;
• The checkout process in one screen.

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:

• Performed A /B tests for buttons;
• Heat map analysis and time spent on task data collected with Maze;
• Usability tests with users were made through Zoom.

In this project I learned:

• The benefits that good user research can bring to a product or service;
• UX Design doesn’t mean perfection, it means meeting user needs and expectations;
• User Interview and Usability tests are the most important steps and are also the opportunity to find out the insights that will help you in the improvement process.
• I was able to see myself growing along with the project, and exploring all the methods learned in class.

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.