www.bbbsba.org
Figma
Google Suite
Jira
Adobe CC
3 Weeks
User Research
Prototyping
UI Design
Big Brothers Big Sisters is one of the oldest youth mentoring organizations in the United States and makes real, positive changes in the lives of youths around the world.
On the surface, the current site for the Bay Area chapter is successful and has a vibrant style guide. Taking a deeper look, however, we found multiple accessibility issues and unclear calls to action with little follow-up from the organization. With quarantine in place, how was the org supporting its mentorships?
Working in a team of 4, we set out to research the users of the site and met with Rick, the VP of Data and Systems at BBBS of the Bay Area, to discuss how we can balance the user and companyâs needs for the redesign.
The current site is responsive, yet has troubles with the menu on mobile devices.
We started by researching the current site and the sites of other Big Brothers Big Sisters chapters.
Because Big Brothers Big Sisters is an international organization, we discovered that they went through a complete rebranding 2 years ago, in 2018. The new style guides were already integrated into almost all of the chapters within the United States, yet how these style guides were used varied drastically from chapter to chapter.
The Bay Areaâs site used the Steelfish font in ways that became unreadable due to the size and format of the font and we found accessibility issues whenever the neon green and white were used together.
The answer is in the banner that 100% of our users didnât read and closed. Â If you want the long version, click the button below.
TL;DR They had a tiny banner with important information that nobody read.
This opens a new tab in your browser. My rant was too long for a popup window, sorry. đŹ
None of our users were able to find support for mentors on the current site.
We tested 3 users (adults who would fit more with the Bigs) on the current site and asked them to find how the company was offering support for their mentorships during quarantine.
We found that none of them were able to easily find any form of support on the site. Through our stakeholder, we found that there is a âBigs Onlyâ site that only onboarded Bigs are given access to, so, technically, there is no public show of support.
We interviewed 3 past Bigs and our stakeholder, Rick, to find out what their motivations, pain points, and expectations were for the organization. The biggest pain points our past Bigs faced were all related to support from the organization, while our stakeholder was more concerned with sign ups and donations.
âWe concluded that the organization had a retention issue due to Match Specialists being the primary (sometimes only) form of support from the organization.
âI must have fallen through the cracks, because the Match Specialist was supposed to check on us and never did.â
âI sort of just felt forgottenâ
âI think theyâre supposed to interview the pairs every 6 months. They did it once but never did it again.
After one time I never talked to them or dealt with them again.â
Based on our interviews, we created our user persona, Henry, who wanted to give back to his community by signing up to become a mentor, but, unfortunately, felt unsupported by the organization.
I wrote the story and the very talented Russell Diaz illustrated the storyboard for Henry.
Henry signs up to become a Big and is able to meet with his Little before quarantine.
Unfortunately, he doesnât know what the company policy is or how to support his Little or keep up their relationship if he canât meet in person.
He is stressed, but then he goes to the BBBS of the Bay Area site where he finds a full resources page giving him ideas and tips on how to support his Little through the pandemic.
Story by me, illustrations by Russell Diaz.
Our stakeholder needs donations, more male bigs in certain counties, and more parents to sign up their kids.
Current Bigs and Littles need to be provided ongoing support and communication.
Because our stakeholder stated that most users ended up on their page through Facebook or social media ads, we wanted to ensure that users ended up on the landing page that best fit their needs. Our user flows followed 4 paths of the users we expected to visit the site and sent them to landing pages rather than straight to the home page.
We decided to use pieces from everyoneâs paper prototypes and created a template that would be used on the 3 main landing pages of the site: donate, enroll a child, and volunteer.
Through this design, we reduce clicks to donate and sign up, while also reducing the research and time spent on the site by putting the requirements and expectations right next to the calls to action.
Menu:
- The menu is now black, for better color contrast with the green and because black is cool.
- We used the stacked logo rather than the single line so it would translate better to mobile.
- The font is now 20px rather than 15px so users donât have to squint.
COVID banner:
- The banner needed to be available on all pages, so we made it static underneath the menu.
- We reduced the clutter and made the message clear: resources for virtual mentoring.
Calls to action:
- We made the calls to action (Donate, Enroll a Child, and Be a Big) larger and the primary actions on the home page.
Support:
- We added recent news and updates regarding mentorships during COVID underneath the main calls to action so casual observers would know that the organization is staying active during these times and are going out of their way to ensure their mentorships remain successful.
Templated pages:
- Each page follows the same basic design, with information and calls to action directly under the hero images.
-Added the forms directly on each page to make signing up easier.
Improving conversion:
Rather than have users stop at donating, we give further calls to action in every form to stay on the site longer and learn more about the organization.
Criteria and processes prioritized:
We wanted to make sure that our users knew what to expect from the sign up process in a clear and concise manner, so added the sign up process and their requirements directly under the hero.
Improving conversion:
From our stakeholder we learned that different cities have different needs. For example, Oakland is in need of more Littles and male Bigs, so if a female signs up to volunteer in that area, she would receive a rejection email and no further contact from the organization.
Rather than leave the site and wait a few days, we thought that a system could be implemented to check requirements and zip codes when a user signs up and give immediate feedback on whether or not they are needed in their area. If they are not, they are prompted to stay on the site and donate their money rather than their time to the organization.
Supporting the mentorships virtually:
The current Bigs resources page is not indexed on the site. It has vital information from how to mentor certain age groups to upcoming events. We thought that this information would be better served to the public as it shows that there is more to mentoring than taking a kid out once a week for ice cream. This resources page will serve not just as a place where Bigs can go to find ideas, but will also show exactly how the organization supports their mentorships.
You can click here to see our Figma prototype for web. Note: you will need a computer screen to view.This is our Figma prototype for mobile. Go ahead and click through our pages in this window.
BBBS took some of our design feedback. After we presented our final project, the banner was removed from all pages. That does still mean, however that there is still no outward show of support, but it's a step. They added a new banner at the bottom of the home page to sign up to become a big immediately. They also added a new popup to each page that appears after a few seconds that prompts users to sign up with their email.
