CLONATE

An online cloth donation platform across Africa

High fidelity design of the app

Project Description

Project Goal: To create an online cloth donation platform across Africa as well as Western and Eastern Asia.

Deliverables: Empathy maps, prioritisation grid, user personas, user flows, user journey maps, sketches,
low-fidelity wireframes, high fidelity wireframes and user testing.

My Role: User Researcher, UX Researcher and UI Designer

Timeline: 1 month

Statement of the problem

The number of IDPs (Internally Displaced Persons)  and people living below one dollar per day reached a record high of 55 million as at the end of 2020. Most of these people can’t afford suitable clothings.
The purpose of this study is to get as much clothes as possible from donors so as to satisfy the needs of the internally displaced persons.

Solution

Clonate is an organisation that sees to catering for the needs of internally displaced persons and people living below one dollar per day.
To achieve the goal of this project, the design thinking processes were used in tackling and solving the statement of problem.

The Process

Empathy|Define|Ideate|Prototype|Test

The five design thinking processes put into use for this project are the Empathy, Define, Ideate, Prototype and Test phases, and these steps were instrumental in coming up with a solution.

Empathy

During my empathy phase, I conducted my user research using the one-on-one interview format. It was in the course of this phase that I was able to gather few insights as to what people feel about the project. Some of the insights gathered include:
1. I was able to understand the needs that different people face in the course of donating.
2. I also got to understand people's perception about donating, among others.

I was able to conveniently interview 5 people, while putting the COVID-19 guidelines in mind. Some of the questions asked from these 5 interviewees are:

  • Tell me about yourself

  • How often do you buy clothes?

  • Have you ever donated clothes?

  • What do you feel about people donating their old clothes?

  • Will you be comfortable donating your old clothes to the needy?

  • What factors do you put into consideration when donating clothes?

After the responses were gotten from the participants, I then came up with an empathy map based on the responses I got from the 5 of them. The empathy map contained 4 major reactions I noted in the course of the interview; how the participants think, feel, say and do.

Empathy Map

Empathy Map

DEFINE

Affinity Map

I was able to conveniently interview 5 people, while putting the COVID-19 guidelines in mind. Some of the questions asked from these 5 interviewees are:

  • Tell me about yourself

  • How often do you buy clothes?

  • Have you ever donated clothes?

  • What do you feel about people donating their old clothes?

  • Will you be comfortable donating your old clothes to the needy?

  • What factors do you put into consideration when donating clothes?

User Personas

Two user personas were also generated based on the response of the interview questions and pain points gotten.

The first persona is Afolabi Olusola. a product designer based in Lagos, Nigeria. Olusola does not believe in giving out personal belongings but is willing to donate money and if possible pay the Internally Displaced Persons closer to her a visit or two per month.

The second persona is Alabi Abraham, a software developer. Abraham prefers to give personally to the needy without any third party involved. He is just in a dilemma as to which cloth to donate and which not to donate.

The Personas

User PersonaUser Persona

IDEATE

Prioritization grid

Since the ideation phase is also known as the brainstorming phase, that was exactly what I did. Since I had the pain points, it was only left to come up with possible solutions to the pain points and many ideas were arrived at in this stage.

I identified the actors, i.e the people that will use the product. And my actors are the users and the admin that will be in charge of dispensing the various donations to the appropriate quarters. Below is an image of the actors identified.

User Flow

The user flow shows the navigation of the app in a flow chart format, and this was done so as to find the shortest possible route for the users while navigating through the application.

The Userflow

Userflow

Sketch

The last part of the ideation phase is the sketches I came up with after the aforementioned steps I took. The sketches were made so my low fidelity wireframes and high fidelity wireframes will be straight forward because I will have given enough thought as to how the layout of each screen should be.The tool used for my definition and ideation phase was Miro.

The Sketch

Paper sketch of the initial ideas

Prototype

The prototype phase simply shows a proposed solution to the problems gathered in the empathy phase. It is a phase where ideas are validated based on the responses gotten as well as the various solutions arrived at during the brainstorming session (ideation phase).

Low Fidelity Wireframes

Low fidelity wireframe

Style Guide

Styleguide for Clonate

High Fidelity Wireframes

High fidelity design of the appHigh fidelity design of the app

TEST

To ensure that the project was completed, I decided to share the prototype among random users in a bid to get their views about the solution I came up with. 4 of the users I interviewed at the beginning of this project were part of the selected users and they gave few ideas as to how they think the app will be better and I have made such changes.

View prototype here

Next Project

JIGGLY WEB

View Case Study