Bop

UX/UI - Web & Branding

What we did

Scope the project

Design sprint

Design sprint

UX/UI Process

UX/UI Process

Frontend Backend

Frontend & Backend

Android iOs

Android & iOS Development

About

Client

Bop

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.

Bop
Carvi

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.

Wireframe 01 Wireframe 02 Wireframe 03 Wireframe 04 Wireframe 05

THIS IS JUST A SAMPLE OF OUR MAIN USER STORY WIREFRAMES

UI Elements

Colors & Typography

The right colors and type creates perfect aesthetic balance.

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.

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.

SF Compact Display

Headlines

Ubuntu

Medium

Century Gothic

Body

Ubuntu

Regular

Product design

User interface

Bop's interface uses cards, boxes and big square elements to emphasize their calls-to-action.

App

Bop

Take Action

Searching through potential volunteering activities has never been easier.

Bop's store screen

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.

Carvi

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!

What’s your next project?
Let’s build it together.

Whether you want to talk about the next big thing or simply say hello, we’d love to hear from you.

Get a quote