top of page

Helping Coats

A fictional UI/UX case study, In which I was the lead UI/UX researcher and designer. The goal of the case study was to design a tool for schools to ensure every student has coats and shoes. This case study took from the beginning of January 2022 to the end of January of 2022.

Screen Shot 2022-02-05 at 12.43.57 PM.png
Children in colorful raincoats running l

About the Business

Helping Coat is a non-profit organization, who's goal is to help families in need get what they need. They have a website that contains resources for families and ways people can help. The organization wanted to be able to alert a school if a child is in need of a coat, shoes, and other necessity. They went a redesign of their website to make it more responsive and mobile phone app for people on the go.

About the Users

To understand the users I had to do some competitive research on other organizations, and find more information about families in need.  Most of the site looked at  during the competitive research found that the flow was confusing  and was more focus on how the user can help the organization cause.  It was hard to find where a person can get help through the organization.

The information about family in need is important in understanding the users, because they are the end-users, and the people around them like teachers, school admins, or social worker are also important. because it gave important insight on how many families are in need, which according to the US Census between 2019 and 2020 poverty rate had increase.

Along with researching the effect of not meeting the needs of children and how it effect school performance. According to Children's Bureau children who are going through poverty, or low-income, have an increase risk have more problem in speech, learning, and/or emotional development. Along with having a hard time focusing on their school work.

Base in the research I made two persona: a single parent, and an educator, both want to be able to report to the school district if is facing financial difficulties at home.

Starting the Design Process

I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on being able to report a student in need.

After ideating and drafting some paper wireframes, I created the initial designs for the Helping Coat app. These designs focused on being able to report a student in need. 

After making the wireframe I made a low-fidelity prototype in which I used for a usability study. In the study I discover user would like to see a drop-down options for part of the form, and double check spelling and grammer, otherwise the flow and layout was good.

Refining the Design 

Based on the usability study their was no major changes in term of flow or layout of the screens. The only thing add was an indication of a drop-down menu would be. Then came adding the colors and typography.  Lastly making the mock up into a high-fidelity prototype, by adding interactions and animation, or transitions between screens. Along the way some of the accessibility consideration would be clear labels for interactive elements that can be read by screen readers, and initial focus of the home screen on personalized recommendations help define the primary task or action for the user.

Responsive Design

After designing for mobile app, I move on to designing a responsive website in three sizes: a phone, tablet, and desktop. In each design I optimized the designs to fit specific user needs of each device and screen size.  The design was based on the mobile app and the sitemap to help keep give structure and organization to the website, while keeping the user in mind when using the website. 

Going Forward

The impact this made case study was users shared that they would used this app, as it was simple and easy to use. One quoted “ This makes it sooo much easier to get help than just asking the school being bounced around”.  I also learned a lot more about families in need. Along with a better understanding on designing stand alone phone app.

The next step for this case study would be conduct research on how successful the app is in reaching the goal to help report students in need. Along with adding more educational resoures for users to learn how they can help families in need.

Thank you for your time and reviewing my work on Helpful Coats app! If you’d like to see more or would like to get in touch,  you can go to my contact form

bottom of page