Community Frst
Community Frst is a responsive web volunteer registration platform. The site matches potential volunteers to organizations within their community.
My Role:
Throughout this project, my role consisted of UX Design and UX Research.
The Goal:
A multi-platform service that connects users that have the desire to support their community in an authentic and meaningful way using the skills they posses.
The Problem:
Address the disconnect between the needs of an organization and the services provided by volunteers.
Methods:
-
Competitive Analysis
-
User Research
-
Wireframes
-
User Testing
-
Prototyping
Duration:
March 2022.
Deliverables:
-
Competitive Analysis Report
-
User Personas and User Journey Maps
-
Wireframes and Prototypes
-
User Testing Insights to inform designs.
-
Final App Design.
Research
I began my research by conducting a competitive audit of volunteer recruitment companies. During the first round, I began by solely focusing on what experiences they offer to potential volunteers as well as the recruitment process. I also read through annual reports to understand the impact their companies had on the volunteers and most importantly, the community that they served.
The second audit was similar to the first, however, I also included job and internship recruitment platforms because of their thorough process which I wanted to emanate.
Starred key elements to implement in designs.
User Research
The user research for the entire project consisted of 3 tests with a participant pool of 5 individuals between the ages of 27 - 61, between 3 countries.
I began user research through a preliminary survey, to gauge participants interests in volunteering. Then I sent out questionnaire’s to understand their desire to volunteer, how they volunteer and what their frustrations are. From the findings I was able to understand the behaviours, frustrations and motivations users have towards volunteering.
Using the data I collected from my first questionnaire I created a problem statement, as well as user stories and journey maps which helped guide the rest of my creative and thinking process.
1
Not feeling connected to the cause.
Not using the skills they possess to support the organization.
Give back to the community to feel useful and fulfilled.
User Personas
James Tan
As a full time teacher, James wants to give back effectively so that he can benefit his community.
Goals
-
Leaving a positive impact on his students.
-
Contributing in a relevant way .
-
Feel proud of his work.
Frustrations
-
Feeling disconnected from his students.
-
Students feeling like they do not matter.
Freida Johanson
As an individual who is soon to retire, Freida wants to enrich her community so that she may feel fulfilled and useful.
Goals
-
Being useful in her setting.
-
Finding a strong balance between her full time job and volunteering.
-
Giving back to her community.
-
Complicated work process.
-
Lack of structure at work.
Frustrations
User Journey Map
James Tan
​
James is a high school English teacher living in Cape Town with his partner. James enjoys teaching, it is his passion. He loves to find connections between his teachings and his students everyday lives. It frustrates him when subjects are taught in a passive manner to his students. In his spare time he enjoys teaching English and reading stories to underprivileged children.
User Journey Map
Freida Johanson
Freida has been a civil engineer for the past 40 years. She enjoys and excels at her work, and plans to retire in a few years. Freida is frustrated by long and complicated work processes to complete a task. She is frustrated by websites that are unclear. She feels most useful when she is giving back to her community in a field that is important to her.
Starting The Design
To better visualize the registration flow and what elements would be included in the design, I created a sitemap. This helped me visually map out the site’s organization and how different sections could possibly be linked.
Warming Up!
To further ideate I used the crazy eights exercise to better visualize how I would address the problem.
Paper Wireframes
I then created paper wireframes of the homepage and iterated upon the designs. Following this I marked down features that spoke to the main purpose of the design, such as a clear ‘log in/join us’ feature and a clear explanation of what the organization does such as ‘what we do/who we are.’
Digital Wireframes
I combined the paper wireframes with the starred features and created a homepage. Based on the homepage I created the rest of the registration flow. I also included some features I had noted during the audit.
Create Account
Homepage
Existing Log-In
Low Fidelity Prototype
The main flow of the low fidelity prototype was to register new users and or/sign in existing users to the platform.
View a low fidelity prototype of the Community Frst site here.
Usability Study
My first round of usability studies were unmoderated and supported changes made from digital wireframes to the hi-fidelity prototypes.
The flow was familiar and easy to understand.
The sign in language was confusing.
The 'back' arrow should be positioned with the 'next' button.
Refining The Design
Mockups
Following the usability test, I created my first round of mockups below. I kept the flow the same as users had responded positively to it. However, using the data from the usability test I changed the sign in wording.
Before first usability study.
After first usability study.
I then iterated on the designs further.
Key Mockups
Usability Study
I shared my high fidelity prototype in an unmoderated usability study. And was pleased to have received positive feedback on the visual and user flow of the site.
The colours were not distracting.
The registration flow was intuitive.
Mobile App
I created and designed the Community Frst website and app in tandem. Once the paper wireframes of the site were completed, I used graph paper to scale down the app design to the most crucial elements.
I then created digital wireframes that were consistent to the website design.
Following that, I created a high fidelity mock up.
Staying consistent to the main website page, I iterated on my designs further.
View the Community Frst high fidelity prototype app.
Name of Design
Studies have shown that, "pre-pandemic, a billion people volunteered their time and energy each year, providing unpaid help to others". During the pandemic, that number increased, which speaks to the human nature of supporting each other during difficult times. When global disasters occur, we may feel helpless and overwhelmed on where to help. However, we can always start with our neighbour, our community. Hence, Community Frst (C.Frst), which ties in seamlessly with the purpose of the platform.
Accessibility Considerations
I added labels to indicate the purpose of each control for clarity.
Hierarchical headings so users using screen readers can easily navigate the page.
I used a luminosity contrast ratio to ensure that the text was readable throughout the site.
Key Takeaways
The purpose of Community Frst was to provide people with the desire to help with an active organization within their community. To bridge the gap of what volunteers can offer with what an organization needs.
Feedback from second usability test
“I like the color scheme of the website. I think it's always good to have a color scheme that matches the color(s) that represent the organization/company."