“Designerr” E-Commerce Case Study

Hugo Kayana
6 min readMay 18, 2022

The Problem:

The prices are always expensive and not everyone has the money to buy designer clothes. And a lot of clothing stores aren’t always on the same state, We always have to waste some gas to get to the clothing store. Even then, We can’t always find what we’re looking for.

Yeah… it sucks that we have to pay a lot just to wear something for our body, But y’know… designing clothes can take a lot of time and effort, and also don’t forget the materials they’d have to buy in order to make those clothes as perfect as it can be.

But anyway, How can we solve this problem? Everybody keeps finding expensive clothing and can’t be able to find what they wanted… Well, what if…? We make an online clothing shop so people won’t get tired of finding the clothes they wanted and so people would get them at a cheaper price? Let’s try it out, shall we?

Process:

The process I’m going to use to design this app is through The Design Thinking process.

Design thinking is creative and collaborative problem solving to produce more empathetic and innovative solutions.
- By David Kelley and Tim Brown, IDEO founder.

Stage 1: Empathy

During the first stage, we try to empathize with the people we’re designing for, so We’ll know and understand their needs and problems. I made 10 Questions and then I conducted an interview with five people.

Research Questions

Competitive Analysis

And of course, We’re gonna have some competitors. Let’s take a look at them shall we? and let’s see if we can learn from their mistakes and become the better ones.

UNIQLO: An app that can easily buy clothes with their feature “Click and Collect” and can find your clothes on your favourite shop by QR Code. But lacks language accessibility. (Available in Indonesia)

MATAHARI: An app that’s known for their cheap price with lots of discounts and promotions. Matahari also has a lot of locations, it makes Matahari one of the most popular clothing app in Indonesia but the app runs slow and lacks customer service. (Available in Indonesia)

And these are great competitors and I’m sure we can beat them. So what if? We make their features work seamlessly in one? Let’s find out.

Stage 2: Define

After that, I created an Affinity Diagram from all the interviews, and then I created a User Persona so we could understand and define our user, and I created an Empathy Map to gain insight on the Users behavior.

Affinity Diagram

From the results of in-depth interviews, we mashed all the points together and then we found some findings & insights. This helps us see clearly what the user wants and doesn’t want and also what’s important for the User, it also helps us give ideas.

User Persona

Meet Rafli, He’s a network engineer. and He hopes that he won’t get lost in trying to find the best clothing.

Empathy Map

With an Empathy Map, We can define how the user behaves when picking their clothes.

Defining the Problem:

  1. People would rather buy online, not only because they’re lazy it’s also because it’s convenient and it takes less time. Everybody can be really busy nowadays.
  2. When Users get into a new environment they tend to be confused on their surroundings and they won’t know where the nearest clothing stores are.
  3. Users would love Discounts/Promos, but the terms & conditions might be a bit too much for Users to handle.
  4. Users sometimes regret when they see a deal cheaper than what they just bought, and they also regret when they miss a big discount on good clothing.

Designing the Solution:

  1. Provide a “Find The Store” feature so Users won’t get lost in trying to find the store they’re looking for.
  2. Users get notifications whenever a big discount comes up.
  3. Provide a “Compare” feature so Users can compare the same clothes from different shops to see which ones are the cheaper and better ones.
  4. Provide a special discount to encourage Users in buying more.
  5. Review feature so Users can check the quality of the clothing.
  6. Provide a short video in which they can see the clothes in the videos and provide a button so Users could click and it would go to that clothing.

Stage 3: Ideate

I start the Ideate by creating User Flow so we could see the path the user will have to take, Information Architecture to make documentation of all flows and contents, Wireframes to enhance efficiency, and Mock-up

User Flow

User flow is used to describe the user’s steps to complete the task using a product. There’s two main user flow, Login & Register User Flow and Shopping User Flow.

Information Architecture

Information architecture is a method used to make documentation of all flows, contents, and design requirements of an application or website.

Wireframes

I created wireframes on paper with design alternatives to enhance efficiency.

Stage 4: Prototype

I make this prototype by using Figma. This prototype covers the User’s journey in buying a product.

Stage 5: Test

Usability Testing

I invited some of the participants for the Usability Testing. This will help validate the design whether it’s useful, easy to use, or understandable.

According to the participants, The flow was really straightforward. and the participants didn’t find any difficulty when doing the UT task, But they did give some inputs for further development.

Closing

So that’s all of the processes of how I created “Designerr” an app for finding the most stylish designer products. And I would like to thank my amazing teacher who has taught me a lot about how to create this case study, and thanks to everybody whom I interviewed because of them, I am able to create this masterpiece. And also a big thank you to you! for reading my case study! I hope that my case study can be useful, and I wish you all a very nice day!

Any feedback and suggestions are always welcome! so please, don’t hesitate in telling me in the comments!

--

--