![Clothing for Charity, App | responsive website](https://static.wixstatic.com/media/ad25df_fa6bdc004aec4a1caeeb9f6bb888e555~mv2.gif)
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](https://static.wixstatic.com/media/ad25df_3666420f1f5f4a3489cef9979e5a8c73~mv2.jpg/v1/crop/x_0,y_14,w_1236,h_536/fill/w_980,h_425,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/ad25df_3666420f1f5f4a3489cef9979e5a8c73~mv2.jpg)
View the Clothing and Footwear for Charity
Ideation
Ideas for making it simple to find clothes and footwear in simple categories, I did a quick ideation exercise.
![Ideation](https://static.wixstatic.com/media/ad25df_a72ed7cdb6b9450cbab4f9cdb187b7e2~mv2.jpg/v1/crop/x_9,y_6,w_845,h_605/fill/w_845,h_605,al_c,q_85,enc_auto/ad25df_a72ed7cdb6b9450cbab4f9cdb187b7e2~mv2.jpg)
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](https://static.wixstatic.com/media/ad25df_2e949122ea574ae89239f01d523bbf57~mv2.jpg/v1/fill/w_980,h_801,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/ad25df_2e949122ea574ae89239f01d523bbf57~mv2.jpg)
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](https://static.wixstatic.com/media/ad25df_2177261b61814df1bea1da5871b094fb~mv2.jpg/v1/fill/w_813,h_622,al_c,q_85,enc_auto/mockup%20before%20after%20cloth.jpg)
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](https://static.wixstatic.com/media/ad25df_f82c1ff9a04f4bad9f9ba25ec4771c35~mv2.jpg/v1/crop/x_105,y_45,w_873,h_637/fill/w_873,h_637,al_c,q_85,enc_auto/ad25df_f82c1ff9a04f4bad9f9ba25ec4771c35~mv2.jpg)
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](https://static.wixstatic.com/media/ad25df_c51fa49186b2410c90d9610340cf468b~mv2.jpg/v1/fill/w_717,h_332,al_c,q_80,enc_auto/ad25df_c51fa49186b2410c90d9610340cf468b~mv2.jpg)
High-fidelity prototype
High-fidelity prototypes present the user flow for selecting clothes and footwear.
![High-fidelity prototype](https://static.wixstatic.com/media/ad25df_966e7c4b285f494987ea8ac7084942d2~mv2.jpg/v1/fill/w_980,h_512,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/ad25df_966e7c4b285f494987ea8ac7084942d2~mv2.jpg)
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](https://static.wixstatic.com/media/ad25df_d66d1a40c2384017affd30d734d3ba49~mv2.jpg/v1/fill/w_980,h_422,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/ad25df_d66d1a40c2384017affd30d734d3ba49~mv2.jpg)
![Problem statement](https://static.wixstatic.com/media/ad25df_06e2247398554027a18629f30d1bb642~mv2.jpg/v1/fill/w_980,h_465,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/ad25df_06e2247398554027a18629f30d1bb642~mv2.jpg)
Digital wireframe
It is the user's intention to collect the order that they come to measure the clothes.
![Digital wireframe](https://static.wixstatic.com/media/ad25df_916398551d3a441ab87a0a2c26eedad0~mv2.jpg/v1/fill/w_980,h_708,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/ad25df_916398551d3a441ab87a0a2c26eedad0~mv2.jpg)
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](https://static.wixstatic.com/media/ad25df_e5f13370f5e449a4b91c3f715522d7f0~mv2.gif)