Colors
Using three colors brings a playfulness to the palette, but the serious nature of the blue hues bring balance and warmth. The soft colors also help the app to be always inviting.
Bop
UX/UI - Web & Branding
What we did
Scope the project
Design sprint
UX/UI Process
Frontend & Backend
Android & iOS Development
About
Client
Bop is revolutionizing the way Civil Society Organizations and volunteers interact. By linking good people with great causes through technology bop is multiplying volunteering efforts and positively impacting society.
The goal
The challenge
Civil Society Organizations have always struggled to find the appropriate volunteers. Companies have always wanted to push employees to be more outstanding citizens. This three-way marketplace could be the solution. The execution would be no easy feat.
How we help them
The solution
Bop offers a smart, fully functional three-way marketplace that helps schools and companies onboard their students and employees for them to easily find Civil Organizations and their volunteering events in their area.
Insights
Which insights could we gather?
Some of the many insights we got were the ones that helped us build a better user experience.
- This is what we found:
-
1
People want to volunteer but don't know where or how.
-
2
Volunteers want to feel safe when volunteering.
-
3
ONGs can do much more but have a hard time reaching volunteers.
Structure
Wireframes
We performed iterative prototype and wireframe usability testing leading to tweaks and improvements based on user feedback.
Once our initial hypothesis was proven we began defining the Visual Design which is presented below.
THIS IS JUST A SAMPLE OF OUR MAIN USER STORY WIREFRAMES
UI Elements
Colors & Typography
The right colors and type creates perfect aesthetic balance.
Main
#8293DC
Secondary
#211645
Tertiary
#FF8D6A
Typography
We chose one font with two different thicknesses as to reduce distractions and drive the user's attention to the right UI elements.
Headlines
Ubuntu
Medium
Body
Ubuntu
Regular
Product design
User interface
Bop's interface uses cards, boxes and big square elements to emphasize their calls-to-action.
App
Take Action
Searching through potential volunteering activities has never been easier.
Gamification
Make the world a better place while you compete with your classmates or peers on the leader board.
Become a bopper!
Tried and proven UI elements were rethought of to agilize the onboarding process. It's a breeze to sign up and create a profile.
Register and participating
Registering to any event is quite simple. Every volunteer gets a personalized QR to identify him or herself ensuring everyone's safety during the activity.
Dashboard
Superior analytics
With the robust admin dashboard, Bop owners can sift through tons of information and always offer the best for both Civil Organizations and Companies.
Find it all at a glance
With one single view, check out all of the activities going on in the following weeks.
Landing page
Join Bop and empower your community for a positive change.
What are you waiting for? Just one click away!
