A101 Online Shopping App

UX/UI CASE STUDY

Project Brief

A101 online shopping is an application that allows products such as food, beverage, cleaning products to be ordered online and delivered to the address.

The Problem

Discover the pain points of the current app and propose solutions to improve user experience.

The Goal

The goal was to understand A101 Online Shopping users' response to the current mobile app, discover pain points, and propose some solutions to improve their experiences.

My Role

I prepared this study in line with Userspots' 6-week training. My role here is to prepare both UX and UI design.

Tools

Figma, Miro, Google Slide

*Since the original study is in Turkish, some drawings and application screens remain in their original form.

Research

I conducted research to understand users' reactions to the current mobile application, discover the pain points in the application, and improve user experience.

In-depth Interview

Based on the questions I prepared before, I interviewed 3 users who used the A101 application.

Main research questions:

Can you tell me a little bit about yourself?
Can you tell me about your daily routine?
How do you do your grocery shopping?
How often do you shop online?
What does it mean to you that the application is useful?

"Its interface looks simple even though it does a lot of work, so it has an interface that you don't need too much effort to do something."

How was the registration process for the mobile application for you?

"When you want to look at the products without entering an address, it gives an error, you have to enter an address."

Key Quotes directly from the users:

"I purchase my weekly shopping online instead of going out due to the pandemic." "When I'm looking for something, if I don't have anything specific in my mind, I get lost in that category." "Usability is to get what I am looking for as soon as possible." "If it is not urgent for me, I usually wait for the campaign and discount periods." "I do not have to enter my address and become a member to view products and categories."

2. Usability Testing

I conducted tests with 3 people who did not use the application before, to measure the usability and comprehensibility of the product over scenarios I had previously determined. I set up 4 different scenarios in these tests.

Research questions:

Can the user easily find the product he/she is looking for?
Is the information given in the product details sufficient?
Is it easy to choose a product quantity?
Is it difficult to add to the cart?
What kind of a path does he/she follow when searching for a product with a special offer?
Is it having difficulty completing the checkout step?

Usability Testing/ Scenario 1

In the evening your friends come to dinner, you want to prepare a nice meal for them, but you realize that there are no mushrooms at home and you need to buy mushrooms.

Usability Testing/ Scenario 2

You want to buy a product, but you are torn between two alternatives. Maybe you may return a product you buy later. For this, you want to know what the return conditions are.

Usability Test Analysis Report :

Products cannot be viewed without being a member 😕 Problems in searching for products 😕 Banners and alerts are not understandable 😕 Information such as frequently asked questions is unavailable 😕 Payment can be made after the delivery time is selected 😕

3. Netnography

I collected user reviews of the application in Google Play Store and App Store.

Ideation

Based on the results of the in-depth interview, usability testing, and netnography research, I arranged an Affinity Map.

I grouped all the information and assigned titles. Thus, the problems started to manifest themselves more clearly.

Affinity Mapping

I prepared Affinity Mapping to analyze the problem points with the comments of the users and to group and organize the information.

Grouping Titles :

Membership
- There is no service to my address
- While becoming a member ...
- I cannot see the products without being a member
What was my password?
Products missing/wrong
Number and amount of items in the basket
Search field issues
Delivery time, form, fee
Application view suggestions

Using an affinity map helped clarify the design challenges and enabled me to effectively identify core user pain points.

Defining the Problems

☹ My products are missing or wrong
☹ I returned the products but my fee is not refunded
☹ I can't see what I've added to my cart, can't delete
☹ I can't see the delivery times, wasn't this delivery free?
☹ I'm having problems with the overall appearance of the app

There are three issues most highlighted in this study, and I wanted to address them:

Benchmark

In order to understand how other applications solved the problems, I compared their applications.

Wireframe

Let’s start with the solutions

Starting from the pain point, I tried to find solutions to solve them and introduce new features overall to improve the user experience.

Based on the pain points I got from users, I have selected multiple options to test and see how to do it by initiating minimum changes to optimize the user experience.

Lo-Fi Sketches

First of all, I started to embody the ideas, with the drawings I made by putting them on paper. This was a stage where many renewals and changes occurred.

Hi-Fi Wireframe

As I progressed through the process, I started converting my sketches into a black and white interactive prototype done with Figma.

At this stage, I will be presenting solution ideas for problematic flows in the application by comparing the new and old screens.

Pain Point 1: Can't see products without being a member

Some users just want to see the products, compare prices, and navigate between categories.

According to the current original app, the user must complete a 12-step subscription just to view the products.

Solution for Pain Point 1

Users had to be a member to view products in the current application. In this way, according to their location, it could be checked whether there was service to the region, and information about the stock situation could be given. However, this situation prevented those who only wanted to see the products and want to compare prices without being a member.

My solution here is to enable the user to view prices, products, and other details without being a member. After downloading the application, users can access the home page and browse the products without sharing the location and without being a member.

Design for Pain Point 1

Here, the user can reach the home page after a few steps to view the products.

Also, when users add a product to the basket and want to go to the order phase, a reminder to share their location may appear. The user can see whether the products in the basket are distributed to the region where they are located, by selecting their address with a single click.

Pain Point 2: I'm a member now but no service to my address!

After the user enters all of their information and becomes a member, they are greeted with a warning saying "We do not have a store serving in your region".

Solution for Pain Point 2

Here, after users enter their own locations, if there is no service for their region, various alternatives can be offered to them.

When the delivery begins to the region where the user is located, they can be notified by email, they can view the list of delivery areas or create an order by entering another address.

In this way, users can be offered different solutions instead of leaving the application with a bad experience with a single message.

Design for Pain Point 2

In this new design, I aimed a direction that gives more informational messages than a classic banner warning.

Pain Point 3: I am having trouble searching and finding products

There is no search box on the homepage and it is difficult for the user to search only in the categories section.

Solution for Pain Point 3

The search box added to the homepage allows products to be searched by categories and products. It also provides product search facilities such as sorting filtering.

Design for Pain Point 3

I made the new design by editing the deficiencies in the current application. On the side screens, there is the design of the current application and the new design that emerged after the new arrangement.

Prototype

User Testing

After the project...

This UX case study has been a challenging and rewarding experience for me. It was challenging to prepare suitable questions for users and to create scenarios for use. However, it has been a great experience to understand users and find out what works. I am happy to learn that even by making small changes to this project, we can make a big impact and create a great experience for users. It is very important to always validate our assumptions by testing them.

Page updated

Google Sites

Report abuse