My Design Process For Made App

Getting a tailor that will bring your ideas to life nowadays is a struggle. Getting a tailor that would help take the stress of the whole process of making a dress or shirt or what have you. Most people either don’t have the time to go through the stress or are too lazy or want comfort till the end of the process. This was led to the design of Made.

This project was done for Figma design Bootcamp 2019 conducted by Figma Africa with the aim of practicing the basic concept of design I learnt during the course of training.

Overview

Made is a fashion app that allows tailors connect with customers. Made intends to solve the problem of having to look for tailors, going through market stress and the trouble of having to pick the right fabric.

As a customer, the app allows you discover tailors based on your interest, book appointment with any of the tailor on the platform, and also takes the stress of go around just to make a dress or whatsoever.

As a tailor, the app allows your business scale, schedule meeting at your own convenience and also keeps track of your works and growth.

User Persona

As part of my research, the user persona show the user frustrations and needs which helped in gaining a better understanding of the problem I was trying to solve. My target audience include professionals and students.

From my observation, I discovered that some people are just lazy or too busy to go through the hassles of going to market, picking the right fabric and also looking for tailors to make their clothes for them.

User Persona -

Storyboard

From the user persona above, I was able to create a story.

In this scenario, Anjola is burdened with the stress of getting her clothes made for a wedding in three weeks, she has been disappointed countless times by her previous tailor and doesn’t want to go through that same experience. A friend told her about made and she decided to try it since it will take so many stress away, stress like going to the market, going to the tailor’s shop as every conservation can be done on the platform.

Below is a stick drawing of the story in detail.

Storyboard

Sketches

Once I understood my goal and had a clearer picture of the problem I was trying to solve, I started with sketching out different screens that would help both the customers and tailors achieve their goal.

Final sketches after several iterations

Wireframe

Based on my sketches, I was able to create low-fidelity and hi-fidelity wireframes.

Low-Fidelity Wireframe

On-Boarding Process - To get an idea of what the app is about

Customer’s Process: The customer’s flow i.e the screens a user sees when registered as a customer

Tailor’s Process: Tailor’s flow i.e the screens a user sees when registered as a tailor

High-Fidelity Wireframe

On-Boarding Process: To get an idea of what the app is about

Customer’s Process: The customer’s flow i.e the screens a user sees when registered as a customer

Tailor’s Process: Tailor’s flow i.e the screens a user sees when registered as a tailor

Style Guides

Style guide: color palette, logo, font style and icons used

Animated Prototype

Animation of the customer’s process

Animation of the tailor’s process

Tools Used

Sketch tool - Red Pen, Black pen and Paper

Design tool - Figma

Prototyping tool - Figma

illustrations - unDraw

Challenges

My major challenge was choosing color. Also, tweaking my designs so as to make the process easy for the users (both the tailors and customers).

Special thanks to Komeh Sidius for the support and guidance while working on this project 😘 😘. Thank you.

Thanks for reading! 😊

This is my very first article and I hope to write more, so please comment your views / suggestions if any / highlight any mistakes so that I can improve.