UX CASE STUDY
BIG BROTHERS BIG SISTERS
Overview
Big Brothers Big Sisters is a mentoring program for the young that are attaining guidance and direction from adults. Their main objective is to have children realize their potential and build their futures and achieve their goals.
​
Although the app is easily found and can be downloaded on the App Store or Google Play store, it is not installed as a native app. The function of the app is to keep track of the activities with the Big (mentor) and Little (mentee) and find ways to look for new activities. The design of it is also outdated, with a color theme that doesn't resonate with their current official running website. In this case study you'll see my thought process on their old design, breaking it a bit, reorganizing it, and shuffling things around - all with a new look and feel that would match their live website for a more cohesive feel throughout the platforms.
​
Curious to see it in person? Head over to their site at www.bbbs.org to take a peak and see their overall mission.
Research
Studying the live website was significantly helpful. Things that I took note of here were the simple shape designs, which were solid straight edged rectangles either in green (#00FC87), black, or orange (#FF4501) as an alert message that's eye-catching. Small instances of circled icons are also noted. Fonts that were used in their site included Steelfish, Zilla Slab, and Predige Rounded.
Userflow
To fully understand how the app works, I needed to dissect it and break it apart. Here we can see a total of five sections of the app - Home, Match Profile, Big Venues, Big Missions, and Match Journals. However, it can be easily noted that the Home section of the app really didn't bring much value than to what the main navigation at the bottom already has. In short, it's doing the same job but just at a different location. The only added value that I found was the option to schedule a call with the Case Manager on the Home page.
Userflow - Original
This could easily be moved to another section that made more sense, freeing up a slot and making it a total of four sections for the app. A press towards the Home button to only get the same navigation as the bottom felt like a lost use of real estate and confusing, acting like an endless loop.
Userflow - Redesigned
After studying the original user flow of the live app, I was able to create my own with some slight modification - hamburger menu placement on the right, and a timeline design for the Match Journals to name a few. The app will now consist of four main pages, no longer having a Home section that was quite redundant.
HAPPY TRAILS
When a user, in this case Beth, first opens the app, the Match Profile section will load - having a brief summary of her activities with her Little.
​
Beth can look through Match Journals, listing all her entries and meet ups with her Little, or browse Venues where she can look at locations that are interesting for the both of them. The Missions section will provide the summaries and goals provided from Big Brothers Big Sisters for Beth and her Little.
Wireframe//High-Fidelity
The next stage was redesigning and fleshing out a new skin for the app. The goal again, was to bring a more cohesive feel that was parallel to the live website along with a few modifications listed below.
V.01
1
2
FINDINGS
1. Although users did find the case manager's contact eventually, a shift in color or applying a bold feel to the font style would make it easier to see instantly.
​
2. When deleting or editing a past entry, users eventually found their way to the ellipsis, but not before trying to swipe left and right within the Match Journal page.
V.02
Feedback from user testing are now implemented in the newer version. Easy readability for live links such as addresses, websites, and phone numbers are in blue, along with a swipe feature for editing or deleting journal entries. The Add Entry button now consists of a simple + icon to indicate creating a new entry instead of a paper and pen icon, which is now used as the edit button after swiping.
Header now is reduced to one only. Initial app had two - one for the page you were on, and one that simply held their logo up on top. I found this to be redundant as most users would know what app they're currently looking at, and for the sake of saving real estate, kept it simple as one.
The camera icon is now placed in a functional space that no longer obstructs the image uploaded by the user.
The hamburger icon menu is shifted to the right side as well to make room for a back button on the far left on specific pages when needed.
​
Furthermore, to assure users that the hamburger menu has its own function and does not necessarily correlate to said page, it is now enclosed with its own white shape.
Schedule Your Call option is moved here instead of the Home page, grouping it all together with the Case Manager's name, number, and email for consistency.
Match Journals is now organized in a timeline format that is broken up into dates and months all seen on the left side. This newly organized format provides much easier readability for users. Initial design had dates inside each specific card entry, but too precise to be read at a quick glance.
The Entry Details button within each card is now also taken out, as it seemed extremely repetitive and users will understand that the card system is clickable.
Swipe to left feature allows the user to have control over entries revealing edit and trash options.
The Start New Journal Entry button is changed to Add Entry with a + small icon.
​
Furthermore, the Take New Outing Snap button is also scrapped as well, simply because if users were at an event and wanted to take a photo, most likely they would do so by using their native camera app and then uploading to an entry.
A search bar and filter is implemented to look up specific moments with the user's Littles.
After pressing on Add Entry, the user is led here, where they can write about their activities with their Little and upload photos.
​
If a user is in the middle of an entry but needs to access another page or continue in another time, the back button allows this option. Once pressed, a notification pop up appears.
Rating system is still set as 1-5 but now in larger, more visible circles, as opposed to small rectangular shapes.
Back button is now added to provide a way back.
Users can still make edits or simply trash an entry by pressing on the ellipsis. These are the same options as the swiping feature seen from the previous page. On both accounts, pressing the trash option will provide a confirmation for action.
As seen previously in Match Journals, a new search bar is seen on top. Initial design had a search button to look for venues as well, but placed awkwardly with a background that served no purpose. The green map would not populate with searched venues.
Big Venues is now organized with a card system as seen before, each one with an easy visible title and details about the venue.
A map is now incorporated, showing a quick preview and location of the selected venue. Users can click on either map or address seen below to open up their phone's native map app for directions.
​
Specific texts are now in blue to signify active live links along with icons for easy readability.
Big Missions now includes graphics that are used in their live website with adjusted spacing for readability.
Hamburger menu slides from right to left, having the icon change from a square to an x as a close out.
Furthermore, Schedule Call With Case Manager is again seen here as well as Match Profile for complete easy access. With easy visual separation, an option to log out for the user is located towards the bottom.
Conclusion & Plans
This was a great case study to dissect and learn how an app functions. I was able to break it down and learn what worked and what didn't, and adding new features to making it user friendly. The next step into this would be to include a reason for the user to keep coming back - to bring more value to it. My instant thought would be to gamify it, allowing a reward feature of goods for the Bigs and Smalls. Another possible feature that I would love to incorporate would be a way for the Bigs to connect to each other or allow events and gatherings for Bigs and Smalls alike.
​
Once again, a very huge thanks to Lourdes Moreira for her talents in making the app come to life. Hats off to you and your skills as always!
Method & Madness
Adobe XD
Adobe Photoshop
Product Strategy
User-Centered Research
Data Analysis
Persona Development
Information Architecture
Figma
Sketch
Sketching
Wireframing
Visual Design
Rapid Prototyping
Identity Development
Copywriting
Graphic Design