Overview
Timeline
Sept 20- Nov 4, 2021
Team
Sohee Kim, Sue Hwang
Role
UX · UI Designer
Deliverable
Mobile app prototype
Target users
High school students
Design an inclusive experience in a mobile app for high school students looking for opportunities to fulfill community service hours, no matter their background or ability.
We were given 7 days to research, ideate, design and prototype more than 15 screens. We were asked to consider accessibility and inclusivity as main keywords. We interviewed a few people in their ealry 20s what features they wish to have. Based on that interview result, we built 2 personas.
Secondary research
Inclusivity
Amazon built inclusive culture based on 16 leadership principles
Equitable Design
Equitable is not same as equality, means adaptability
Accommodate
differences
Students’ identities, access, experiences, not to treat all of them the same
Ability types
Health, economic, social, cultural, religion, age, physical health, mental health
Not everyone’s
the same
Vision, Hearing, Cognitive, Motor Abilities, Language, Race, culture, and literacy
No Stereotype and Biases
Diverse Perspectives
Human-centred Design
Personas
33%
of interveiwers did
fake-documenting
Irene Simpson
Natural Leader, class president
👩🏽
Age/ Pronouns
17/ they, them
Location
Vancouver, BC
📍
Occupation
Student
📊
Family Status
Parents,
younger brothers
🏠
“ Fulfilling community service hours is done for a good purpose, but the process is too tricky and not equal to everyone. I think students should be given volunteer experience that is more fun and encompasses everyone.”
Pains
Searching for voluteer opportuneties for up to 30 minutes not knowing whether it matchs her interst, what the voluteer program does, where and when.
Get frustrated by a long and paper based approval process.
Googling providing institutions whether it’s safe for LGBTQ and possibly support it.
Goals
Fulfill community time with opportunities they are interested in and fit to abilty
Feel confident in their identity
Get reassurance in her decision by seeing what other people say about the product of interest
Motivations
(For Finding voluteer works)
See what matchs to their interest
See What’s Popular
Get the Nearest one
Check the institution’s value / Facilities
Read others students’ Testimonies
Lily Ng
Known as artist in the class
👩🏻
Age/Pronouns
15/She,her
Location
Queens, NY
📍
Occupation
Student
💼
Family Status
Parent, Grandma
🏠
“Love to share my drawing skill to add values in other people’s lives. Just hope that I could go anywhere by myself. Living in wheelchairs are needed a lot of helps and Building facilities.”
Pains
Not enough info about building facilities regard to her physical status.
Being disappointed by most of the opportunuties needed assistants
Wasting time when the volunteer opportunuty doesn’t work out for her
Goals
Help the local community with her talent
Find where is the nearest, so that it doesn’t take much effort to get there
Spend as little time as possible researching products she’s interested in
Motivations
(For Finding voluteer works)
Get the Nearest one
Check the institution’s value / Facilities
Read others students’ Testimonies
See What’s Popular
See what matchs to their interest
Various opitons to express themselves
Diverse illustrations, yet guessable information is not required
Simple language
Equitable design, not equality
Aim for safe and fair
Inclusivity
Accessibility is not just usability
Cover vision, hearing, cognitive, motor abilities, literacy accessibility settings
Designed to focus on full WCAG 2.1 Level AA compliance - Color, Visibility, and Focus
Acessibility
Fun and Enjoyable
Based on not only location but also interests and values
Enable users to track their volunteer processes in clear and easy way
High school + Volunteer
Connecteer
We designed around how to enhance the accessibility of content and the way we present it to users.
ACCESSIBILITY SETTINGS
Enable users to customize the accessible settings depending on the supports they need such as vision, hearing, cognitive, motor abilities, and language.
Sing up process
Give users options to choose the pronouns they want to be called. Instead of using profile pictures, they can choose or customize their own avatars. This is to not show guessable information like their age, country, or race.
Explore Volunteer works
Many ways to find volunteer works that match them
Connecteer recommends volunteer programs based on the user’s interests and creates a group of lists that help users find the programs that match with them easier with how much it matches with their interests. Users are able to filter all out by locations, durations, ratings and categories.
Program details screen
Information Chunking
We organizes content into smaller chunks to help users understand and memorize easily. By structuring detail information into visually distinct groups with a clear hierarchy, we can align the information we present with how students evaluate and process digital content.
FIND A GROUP
Create a community for users looking for assistance or find a member to join the volunteer programs together. The purpose is to let high school students help each other so that students with disabilities can also join the programs.
POSTS AND MESSAGES
Voice records and text-to-speech features
Provide users with voice records and text-to-speech features. People who have difficulty writing or reading can post and read the posts with text to speech features. Automatic reply is available on chat feature.
Iteration
Information
architecture
Style guide
We designed around how to enhance the accessibility of content and the way we present it to users.
VISUALIZATION
TYPOGRAPHY & Color Palette
Poppins
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hac in molestie leo viverra
Aa
Primary 1
Primary 2
Slate Blue
Crayon Yellow
#605DBF
#FEC55F
UI COMPONENTS
Takeaways
It was a great opportunity to learn about equitable design, accessibility and inclusivity. After we realized these concepts are very important, we saw our previous projects and other apps we are using now have a lot of room for improvement.
Before moving on to the development phase, we need to validate our prototype with user tests to see what to improve based on new information we might discover. Moreover, based on the judges' feedback that it would be great if there was a notification feature for users' convenience, we will refine our design and iterate this process.
