The Help Aid
Ux/ Ui Design /Branding / Product Design / April 2022
This project was for my Google’s Online Course at Coursera. The objective of the course was to learn UX design by creating a responsive website. I completed this project in two months, and learned how to use Adobe XD (wireframing, research, analyse and prototyping).
Tools used: Adobe XD, Canva, Miro, pen and paper.
Introduction
The project goal was to learn about responsive websites from scratch. My idea was to create an informative website to consumers.
What is The Help Aid?
The website is for people who want to donate or work in charity. Help Aid is a website that helps people to work with charity by donating money or finding ways how to volunteer. Typical user is 25-50 years old. The goal is to make it easier to make donations or volunteer work.
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.
User research: summary
I conducted unmoderated research and created personas to understand the users I’m designing for and their needs. A primary user group identified through research was working adults who want to have find best solutions how to donate or work with charity.
This user group confirmed assumptions about The Help Aid customers, but research also revealed that time and money was the most interesting factor. Other user problems included frustration or challenges that information is not found easily.
I also did audition to check competitors in Finland. There are not really competitors who work in the same way. Biggest companies working in charity are Red Cross and WWF.
Sketching
I love sketching and drawing with a pen. Sketching wireframes I learned while making my first mobile app (The Good Coffee). I tested paper wireframes and then started to create digital ones.
Affinity mapping
In my ideation process, I used sticky notes repeatedly to organize my findings and ideas. I used sticky notes in Miro for mapping potential user flows and Customer journey maps. Key pain points were: navigation, interaction and experience.
Digital wireframing with usability studies
I included for additional screen sizes in my mockups based on my earlier wireframes. I created alongside with website a smartphone version too.
Low-fidelity prototype a website / a smartphone.
Before usability studies and after usability studies. I changed the website’s cart view for a smaller size. Usability studies informed me that the cart view can be smaller and found in right corner.
Digital wireframing
I included for additional screen sizes in my mockups based on my earlier wireframes. I created alongside with website a smartphone version too.
From low-fidelity to high-fidelity prototype.
Before usability studies and after usability studies. I changed the app’s homepage view for more simpler look. With this it is more accesible and users don’t make wrong choices when buttons are bigger.
The Responsive website design
I included for additional screen sizes in my mockups based on my earlier wireframes. I created alongside with website a smartphone version too.
