Case Study: UI/UX “Shop n Chill” Online shopping app


Yo! the name is Abdullah Umar Hermawan, age 15, first year high schooler at IDN Boarding School, Jonggol. Currently learning about UI/UX and 3D modeling at school.

This case study is about making online shop easier for everyone, including those who are new to online shopping.


Recently, issues around covid-19 has settled down and people started to out in public freely as the pandemic has dropped, but online shopping is still something important as some of us still spend most of their time at home.

Problem Statement

Hard to get used to the UIs in most online shopping apps and sometimes had seller, stock or delivery issues.

Roles & Responsibilities

This Case Study is made by me alone from start to end.


I will be using the using the five steps in Design Thinking to make this project.

“Design thinking is a human-centered approach to innovation that draws from the designer’s toolkit to integrate the needs of people, the possibilities of technology, and the requirements for business success.”

— Tim Brown, Executive Chair of IDEO

Stage 1: Empathize

By empathizing with the users, we can create a product that is really needed and solve the problems of our users.

The steps in this stage Research Goals, Research Objectives and Research Questions

Research Goals

Knowing the user experience how they enjoy shopping online what they need.

Research Objective

Understanding the awareness and experiences of people shopping online and knowing what they need.

Research Questions

The following questions are what i asked to people I interviewed.

From the interview process, I can get a deeper understanding of the user we are designing for with hope of solving their problem properly.

This really helps improve the mindset of a beginner based on my own experience when online shopping and while observing others assuming they have similar problems.

Competitive Analysis

The following competitors are what I use for my inspiration to make this application.

Shopee: Founded in 2015, Shopee is a Singaporean e-commerce company with good market place where users can browse, shop and sell. It’s the largest e-commerce platform in south-east Asia. Available with payment support, the platform makes online shopping easy and secure for both sellers and buyers.

Tokopedia: Founded in 2009, Tokopedia is an Indonesian technology company specializing in e-commerce with marketplace, fintech, payment, logistics, fulfilment and new retail businesses.

Lazada: Founded in 2012, Lazada is an international e-commerce company with a business model of selling inventory to customers from its own warehouses and a marketplace model that allowed third-party retailers to sell their products through Lazada’s site.

User Persona

We will create a User Persona so that we have an idea of the user we are going to solve the problem for.

Empathy map

I use Empathy Map as a documentary tool to understand the user of the product better.

Stage 2: Define

In this stage we’ll explain the the user’s problem and how to solve it from our point of view.

Affinity Diagram

Defining Problem

1: User needs an app with a simple check out system that is not time taking.

2: Different users have different way of learning and understanding.

3: Users have their own favorite kind of designs and would be hard to get used to other app once they get used to one app.

4: Customers worry about the products they by is actually different from what they expected in such ways like the size being bigger/smaller then it looks, the material of the product is different from what they expected, etc.

5: Delivery tends to be late at times and users cannot track the package or contact the one responsible for delivering.

Designing Solution

1: Making an app with it’s own payment support system as an addition to other general payment methods.

2: Keeping the app simple with extra features that includes details.

3: Provide all extra features that is included in each different apps along with their general features without changing the UI design while.

4: Creating detailed categories and and product statistics for the product description and the seller must fill in all of the details before selling.

5: Provide package tracking feature that also allows the user to contact to the one delivering the package.

Stage 3: Ideate

In this stage we generate Ideas and think out side the box based on what we find in the previous stages.

User Flow

Userflow is the phase where we create steps that a user will go through to get what he needs.


I made a wireframe to visualize how the app would look like later on.


I use guidelines so I can make the a consistent visual elements for the application.

Stage4: Prototype

At this stage I create a simulated version of the final product that will be used in before being released to the public. A prototype is made for testing testing the final product before it is released.

This is the prototype I made using Figma:

Shop n Chill Prototype Link

Stage 5: Test

During the test phase, users will try your prototype and give you feedback about your design, before the product is created by engineers and released to the public. This feedback to may be used for changes and improvements to your design as much as you need.

Usability Testing

This is a method used to judge the UX (user experience) of a product on websites or applications.

I tested the application using on 5 participants, the following are some the cons I got from their feedback.

I made some corrections on the mistakes I made above, here are the results.


That concludes all for my case study, I learned a thing or two new things after completing this project and I welcome any criticism and suggestions from any one who has anything to say.

Thanks for reading

-Abdullah Umar Hermawan



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