INTRODUCTION

This case study serves as my final project made in fulfillment of the requirement for graduation in the She Code Africa Mentorship Program.

The main objective of the brief is to enhance the user experience when it comes to online shopping.

Shop Easy is an e-commerce application that enables users to easily for their items without having to go through the stress of going physically to a store.

GOALS

I started designing with the following goals in mind:

1. To create a clean User Interface with easy userflow

2. To implement most of Jakob Nielson’s 10 theories of Heuristic Evaluation

3. Understand how people use e-commerce applications

4. Create an application with great user experience

CHALLENGE

The challenge I faced when designing this application was that I wanted to design an e- commerce application which has similarities with other e- commerce mobile applications, so that users can be familiar with it but I wanted the application to also be unique in its brand identity.

SOLUTION

This case study proposes to address features of other e-commerce applications that need to be removed or improved and add new features, where necessary, so as to tackle the pain point of users and improve their experience.

DESIGN PROCESS

Before I started this design, the first thing I did was to break down my design process into 5 stages

RESEARCH METHODS

User Surveys

User interviews

Competitor Analysis

Empathize

This means that I need to put myself in the shoes of the user, to better understand their needs regarding the product and putting aside my personal preferences.

To understand what users really want in an e-commerce application, I had to find out their goals and painpoints. I designed a short survey to gather enough data to determine the following:

1. Demographics of users – Age, gender, personality, types, occupation.

2. Type of products they shop for

3. How often do they use e-commerce applications?

From my research, the demographics of the users were:

Ages 16 - 25 …………….55%

Ages 26 - 40……………...35%

Ages 40 and above……...10%

To properly answer questions 2 & 3, better understand the pain points and goals of those who shop for clothing online and to test my assumptions, I developed an interview script and conducted user interviews with participants who fell within the provisional persona profiles I’d established. I asked each subject some questions about their online shopping habits and preferences. I had 3 participants with different demographics – a 22year old woman, 33 year old woman and 45 year old man.

Some of the questions I asked were:

1. How do you shop for an item?

2. How is the checkout experience like?

3. How do you track your order?

4. What do you like/dislike about shopping online?

During this user interviews, I recorded the audio of each and took notes as I asked questions. Some of the answers I got are below

"When shopping online, I worry that I will buy something that won’t look anything like it does online."

"I love the convenience factor of ordering online and the fact that I can always return the product if I end up not liking it"

"I like checking the reviews of others on a product, so I know it’s gonna be worth my money."

Afterwards, I conducted a Competitive Analysis by checking some of the reviews of other e-commerce applications like Amazon, Jumia and Konga.

ANALYSIS AND FINDINGS

From the interviews, competitive ananlysis and responses I got from the surveys, I derived the following analysis

1. Inadequate filter feature which frustrates the shopping experience;

2. Search results and pages take time to load or do not load at all;

3. Irrelevant search results;

4. Stressful checkout process;

5. Difficulty in tracking order due to insufficient information.

6. Pop-ups and poorly placed advertisements dampen the online shopping experience

7. Reviews are essential and relied on by online shoppers

8. An accurate size guide and description can reduce the rate and hassle of returns.

80% of the users of the e-commerce applications complained on Google Play Store that sometimes, whenever they tried to search for an item, they get frustrated when they get a message saying “Sorry, we couldn’t load your content” or pages take forever to load

POSSIBLE SOLUTIONS

Based on the findings, I decided that Shoppy’s App and branding should include:

  1. Highlighted deals and promotions

2. Product reviews that focus on fit and sizing

3. Clean and modern interface designs appealing to both men and women

Based on the demographics, I found out that the majority of users shopped for:

  1. Household Items

2. Fashion Items

3. Electronics

4. Others

Regarding the use of E-commerce Applications, most users make use of e-commerce applications on an average of 1 – 2 times in a month.

Define

To define the problems of the users, I had to understand their goals & painpoints when using an e-commerce application.

USER GOALS

  1. To save time and buy a product with ease and from the comfort of their homes or offices.

2. To see the reviews of other users of a product

PAINPOINTS

Irrelevant recommendations on the home page

Ideate

To understand the users of the app better, I developed users persona that emerged from the data I’d gathered and mapped, from my user interviews. This helped me understand the emotional state of the user and the world they live in. It also allowed me to discover common patterns within user data from which insights could be identified.

Based on my research, I created my primary persona, Kristin. Kristin enjoys wearing contemporary and fashionable clothing at a reasonable cost. She works full time and appreciates the convenience of being able to order clothing so she can enjoy and appreciate a work-life balance.

This persona served as continuous reminders of the characteristics of the kind of people who would use the Shoppy mobile app throughout the design process.

INFORMATION ARCHITECTURE

I was able to prioritize features for the site and chart a Information Architecture. The Information Architecture shows the most common path for a user from their entry point to the final end goal of purchasing an item.

USERFLOW

I then used the Information Architecture to predict the way a user would use the application. Mapping this user flow helped me understand the key screens to prioritize as I began wireframing.

After defining the goals, challenges and pain point of my users, I had a clear picture of what I had to solve

WIREFRAMING

Lo-fi Wireframe

I began to wireframe key pages informed by my user flow. This set of initial wireframes shows the pages that a user would encounter as they progress from opening the app on the home page towards purchasing a shoe.

Hi-fi Wireframe

Now comes the Visual Design Part of the Apps,

According to the flow the first thing a user view is the splash screen and onboarding pages, followed by Login or Signup depending upon the type of user.

Here is the Home page where they can find related products, search new products, check offers, check the sale page, and also add products to the wish list.

Now here’s the Shopping screen, where people actually shop for products. Here the users are on the shop page where they can checkout categories like Men, Women, Kids and Accessories, etc. and can browse based on the selected categories where they can even sort the products according to the needs and also view all products.

Now comes the Profile section. Here the user can edit their profiles. They can check their orders, Addresses, Payment details, Shipping Details, Settings, etc.

Now here’s the Product section. Here the user actually makes the decision to buy the product or not.

Here’s the Cart section of the app.

The Checkout page where the user can pay for the product, change the shipping address, add a new card and choose payment & delivery methods.

Confirmation screen — which shows taht the order is confirmed and gives the user a tracking number

The complete app was completed from scratch within only a week so, I had to choose what features to include in this project and yes of course certain things can be done in other great ways such as adding more payment methods and creating empty screens. The scope for this project expands when I keep on iterating and polish the end visual designs more.

PROTOTYPE

Here’s the link to the prototype - https://www.figma.com/proto/uOCA0HzN5SUSUgA22uGdjQ/Shop-Eazy---Wireframe?node-id=244%3A0&scaling=fit-width

Usability Testing

OVERVIEW & GOALS

I created a high-fidelity prototype of the main user flow in Figma in order to test the usability of the website. My main goals were to:

Determine the usability of the Shop Easy App and observe how easily a user can complete the supplied task

Make note of any difficulties for further iteration/improvement

Collect feedback from the user on ease of navigating the application

Through in-person usability tests, I was able to assess the user experience according to my test goals.

I tested the Shop Easy app prototype on a total number of five participants. The task was for each user to browse, select women’s shoes, particularly heels, red, size 38 and add the item to their cart.

KEY FINDINGS

Overall, users were able to navigate the site smoothly, find items efficiently, and navigate to checkout successfully. Feedback was related to both the user experience as well as the UI and aesthetics.

Overall impressions: Intuitive, straightforward, clear, and smooth.

NEXT STEPS

Since this is a personal project and because of the short time frame, I only designed the key pages including the home, results page of a particular type of item, and checkout flow for mobile. The next would be to complete all other pages of the site. With further usability testing, I would be able to gather feedback to improve the product prior to handing off the design to a developer.

REFLECTIONS & LOOKING AHEAD

This was my first user experience design project and it was quite exciting! This project gave me a great opportunity to design different screens which I have never done before. It helped me get creative and learn to be a problem solver.

Throughout the process, I learned many techniques from interview best-practices to UI design, to prototyping, and everything in between, including how to be more empathetic towards my users and to conduct user research.. Although this was a fictional application, I followed the same process that I would for any other UX project. In future iterations, I hope to explore designing and prototyping an intuitive and easy checkout process once a user has finished adding all desired items to his or her cart. Working on a fictional project may have its drawbacks, but experimenting on Shop Easy, a realistic sort of project, was a great first experience.

--

--

Law graduate || Tech enthusiast || Professional Volunteer || Christian

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Victoria Taiwo

Law graduate || Tech enthusiast || Professional Volunteer || Christian