Mobile-first design of an ecommerce store.
As the only designer working on this project, I designed this app from conception to High-Fidelity prototype. My main responsibilities were conducting interviews, logo and branding materials, creating personas, journey maps , empathy maps, creating digital wireframes, low and high-fidelity prototypes, conducting usability studies, accounting for accessibility, and iteration on designs.
Role
This project, I was the UX researcher and Lead designer.
Duration
1 Month (Feb. 2022)
Tools
Figma, Photoshop, Illustrator
Scope
Branding, UI/UX Design, User Research, Usability Testing
Problem Statement
Due to Covid19, online shopping has skyrocketed! Customers have decided to shop retail online because it’s more convenient. There needs to be more options for mobile e-commerce for quick and easy purchasing on the go.
The objective
Complete branding of a mobile-first e-commerce website that includes a new logo, and a responsive website so customers will be able to make a seamless purchasing experience.
01. Discover Phase
Research
I wanted to learn about the pain points from online retail shoppers so that Shopon can provide customer with a positive and convenient shopping experience.
I started off with secondary research in order to gain some industry insights and current trends in the E’commerce Fashion industry. I followed that up with competitive analysis, surveys, and conducted user interviews
I found that…
People shopping for clothes on mobile devices want a seamless shopping experience and a positive customer service experience. However, they struggle to do so because the lack of features and functionality is not available to them, or require more effort from the user.
Competitive Analysis
To get a clearer vision of the features, functions and flows, I chose to perform a competitive analysis. I listed out some important features of existing apps and compared them thoroughly.
02. Define Phase
User Persona
Empathy Mapping
In order to better define the target audience with more clarity, as well as illustrate their needs, behaviors and decisions, I used Empathy Mapping as my method, a collaborative visualization based on insights from user interviews, which helped me gain a better perspective on the thoughts and feelings of my target audience.
03. Ideation
Task Flow
With the problem statement in mind, I developed a task flow to show the ideal flow that the user would take to complete a task on Shopon’s website. In this particular case, it focused on finding and purchasing a product from the website. Working on this helped me identify the key screens for my design.
User Flow
Once I completed the task flow, I then proceeded to create a detailed user flow. This essentially illustrates the various paths the user is able to take to complete the tasks. Creating the flow allows me to think of all pathways from the user’s perspective and consider the different options that the user has while using shopon’s website.
Information Architecture
I create a map of my information architecture to help me to navigate my thought process while creating the app as a whole.
Branding
UI Kit
Moodboard
Customer Service Live Chat
In the research I conducted, one of the main issues people had with shopping online, was the lack of decent customer service. Customers want to feel at ease when shopping online so when they have questions about items, they have support readily available. Being able to contact customer support quickly puts customers minds at ease, and adds a sense of security about to the overall online shopping experience.
Shopping & Searching
I wanted to make the shopping experience as easy as possible, to not overwhelm the users. I put the filter within the search input and kept a simple layout for shopping products.
What I've learned
- More people enjoy shopping on mobile devices more than desktop because of convenience.
- Having customer service readily available makes users happy and feel better about purchasing.
- Customers prefer to use search and filter options instead of scrolling.
- Customers enjoy being able to checkout without having to login.
Future
- I will be conducting more usability studies to identify more areas of potential improvement.
- Will continue iterating design ideas for the product/ shop pages.
- I will be working on creating this project into a full website design for desktop users.
- Explore designs to find ideas on how to add some purposeful interactivity within the app.