Big Brothers Big Sisters
User Research, UX/UI Redesign for Volunteer Sign-up
The Project
Big Brothers Big Sisters of Colorado is a non-profit organization that involves youth mentorship. We had focused on the redesign of the sign-up process for volunteers.
This includes the “Homepage,” the “Mentorship Programs,” and the “Application.” There was little time for development, so after the project was submitted, I took over as sole UI designer. A lot of my time was spent creating iterations of the high-fidelity version—while still implementing all the previous research of the project.
Timeline: 6 weeks
Methods: Surveys, Interviews, Card Sort, Affinity Map, User Pathway, Wireframes, Prototyping
Tools: Adobe XD, Miro, Trello, Figma
Problem Statement
Users find it difficult to navigate the BBBS website; as a result they often don’t find what they’re looking for—and BBBS loses potential volunteers.
Client Interview
Key insights from our contact interview, our team discovered what BBBS needs most out of their website. Such as: the process of becoming a mentor, to appeal more to men, improving their story and mission, to be more intuitive and impress anyone who comes to the website.
Business Objective
- Optimize the impact on children and the community
- Appeal to more volunteer, especially men
- Differentiate Big Brothers Big Sisters from other organizations
User Journey
This gave me a clear picture of the steps that the user would need to take to get to their final goal, and how to deliver this goal in the most effective manner possible.
User Persona
James Holloway
Male, 33
Denver
JOB:
High school Guidance Counselor
HOUSEHOLD:
Single
CONSIDERATIONS:
Sometimes you must fully apply in order to gain a full understanding of the program
FOCUS:
Build impactful and lasting relationships
PAIN POINTS:
Lack of transparency and info given during the sign up process
Wireframes
Since simplicity and ease of use are one of the biggest aims of BBBS, the number of screens were kept to a minimum in order to focus on the main features (hero video, programs, application). Usability testing was performed on mid-fi wireframes. A discovery was made - users were confused as to how to become a "Big" mentor, and it wasn't very clear on how to onboard!
Design Changes
After usability testing on the mid-fi pages, it was time to proceed with the high fidelity version of the final design. These are the main design changes: More white space, accessible color theme, accessible text, different layout, onboarding for mentors.
Original Website (homepage)
Final Redesign (homepage)
Mentorship Page
The Mentorship Programs page serves to educate potential volunteers on what program best suites their current lifestyle, whether it’s a part-time or full-time commitment.
I focused on breaking down the content into straight-forward chunks, while still having the option to find out more.
Original Mentorship Page
Redesign features: Time commitment included. Steps and sign-up directly below Mentorship Programs. ->
Redesign Mentorship Page
Responsive Design
I addressed the issue of endless scrolling by dividing up the content into digestible parts. Now, there are 6 screens for users to dive into seamlessly.
The screens include a rough estimate for how much time the application process will take, and the option to go back in case information was missed.
Reflections
Looking ahead, there were additional opportunities that could help with the goal of attracting or retaining new volunteers, including:
- a virtual meeting system for stakeholders, parents/guardians, mentors or Littles to connect
- a way to sync mentor hangouts with personal calendars
- a social media platform for mentors to share ideas and hardships of mentorships