Dear Young People Website
Responsive Web design
These designs were made with combination of Figma and Adobe XD
Project Overview
The Product
Dear Young People is a youth organization that aims to empower and encourage young people to make a difference in their communities. The app is designed for volunteers to be able to register to volunteer in any of their projects. The app is used to cater anyone from any age but a typical volunteer is someone from the age of 12(via schools) to 35 years old.
Problem
Many charity organizations do not have easier ways for volunteers to register. their system does not give user any information about the projects they are registering for and they also do not allow volunteers to choose the duration of time they want to register for.
My role
lead UX designer and UX researcher
My Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Project Duration
June 2022 - July 2022
Goal
Create a website that will be accessible to every device while meeting the user goal of a volunteer to register.
User Research
Summary
The information was gathered by mainly interviews which were done in interviewing teachers and students and conducting empathy maps to understand target users. I discovered that many people want to be able to give back to their communities but most charitable organizations do not provide easy accessible platforms for volunteers to register for volunteering or donating. Some charities do not even provide information for projects that they are volunteering for.
User pain points
Information
Charity organizations websites do not provide enough information about their programs to volunteers
Navigation
Most charity organizations websites do not have a clear user flow.
Experience
Charity organizations websites do not have an engaging user experience.
Personas
Here are some of the personas.
Problem statement
Thabo is an unemployed graduate,
who needs to find a program to volunteer for,
Because other charity organizations websites do not give details of their programs.
Sitemap
Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap.
My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.
Paper wireframes
I took time to draft paper wireframes of screens of the app. This gave me idea of features that should make it to the digital wireframes and to be able to pick those features that solves the user pain points. The idea was to address user pain points of having an easy navigation around the site and having detailed program description.
The there are screen variations of of mobile since many of our users will be using mobile phones to access the site.
Digital wireframe
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
This screen prioritizes program details and information.
Users needs to be able to fill in all necessary information when registering, and the texts fields need clear labels for the user.
Digital wireframe screen size variation(s)
Low-fidelity Prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to the cart and checking out.
View a full movie trailer prototype:
here.
Usability Study
10/06/2022
Study details
Study type. Unmoderated usability study
Location. Cape Town, remote
Participants. 4 Participants
Length. 5-10 minutes
Findings
Here are some of the finding of the usability study.
Period of volunteering
Volunteers want to be able to choose the duration of their volunteering period.
Calendar feature
Users thinks the calendar feature will be useful to help choosing the date of volunteering
Mockup
In the usability study users indicated that they prefer to chose the duration of their volunteer, so I have refined the design to match usability study insights.
Before usability study
After usability study
Based on the insights from the usability study to modify the design mock ups. I added a calendar so that when volunteers choose a date of which they want to sign up for they do not have to struggle on which day of the week does the date falls on.
Mockups: Original screen size
Mockups: Screen size variations
I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because volunteers will have to register from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.
Hi-fidelity prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study .
View DYP website high-fidelity prototype
Accessibility Considerations
1
The use of labels and landmarks to help for easy navigation.
2
I used headings with different sized text for clear visual hierarchy
3
The use of buttons instead of hyperlinks to allow the user to see clear action needed and clear navigation.
Take Away
Impact:
Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.
What I learned:
Throughout the design process I have realized that usability studies are important core of design, they give users opportunity to dictate the final project. Smallest details in design can give design a meaning.