top of page
Logo
Logo
​Clothing for Charity, ​App | responsive website

Clothing for Charity

App | responsive website

The product

I designed an app and responsive website for a charity.

The Clothing and Footwear for Charity program help school districts ensure that every student has clothes and shoes. The charity needed an app or a web-based tool to organize the clothing items and allow students to register and choose clothes and footwear just like they shop online.

View the Clothing and Footwear for a Charity app in Figma

high-fidelity prototype

View the Clothing and Footwear for a Charity website mobile in Figma

high-fidelity prototype

View the Clothing and Footwear for a Charity desktop website in Figma

high-fidelity prototype

The goal 

Design an app that will link donations to students who need them according to criteria.

The problem 

Many students lack money to buy clothes and shoes, and there are many donations, including some that are brand-new.

My role

UX designer leading the app and responsive website design from conception to delivery.

Responsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.

Low-fidelity prototype

To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of choosing clothes or footwear and approved the order.

Low-fidelity prototype

View the Clothing and Footwear for Charity

low-fidelity prototype

Ideation

Ideas for making it simple to find clothes and footwear in simple categories, I did a quick ideation exercise.

Ideation

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research. With real photos like an online shop.

Digital wireframe

Usability study findings

Write a short introduction to the usability studies you conducted and your findings.

1

Users want to order clothes and footwear quickly.

2

They want to see a real photo of the items.

3

They want to feel like they are shopping in an online store.

4

They prefer apps or mobile websites.

Mockups before and after usability study

Make the home screen simple and quick to use.

Mockups before and after usability study

Based on the insights from the usability studies, I changed the color of the category to make it easier to read. The buttons for adding items to the cart changed as well.

Mockups before and after usability study

Information architecture

I began the responsive website design after I finished the app design. To ensure a consistent experience across devices, I used the clothes and footwear charity site map to organize the structure of each screen design.

Information architecture

High-fidelity prototype

High-fidelity prototypes present the user flow for selecting clothes and footwear.

High-fidelity prototype

Accessibility considerations

Large texts and buttons for accessibility.

Insert real pictures showing the clothes and footwear and not illustration pictures.

The colors pass the Contrast Checker.

User research summary

In the study, I also noted that there are people who contribute new things and students who are ashamed to purchase clothes because they are not aware of them. Even though their parents tell them about this organization, they refuse to accept clothes and shoes.

Problem statement

​Problem statement
​Problem statement

Digital wireframe

It is the user's intention to collect the order that they come to measure the clothes.

Digital wireframe

Mockup responsive design

A variety of screen sizes was designed, including mobile, tablet, and desktop. Each device and screen size is optimized to meet the user's requirements.

Mockup responsive design
bottom of page