logo, two hands holding in the shape of a heart

Bridging the gap between community and organizations.

BCause is an app that allows community activists to connect with, and see posted opportunities by local organizations.  It's the easy way to get involved, and take action!


3 iPhones displaying different screens from Carvoyant

Role

UX Design
UI Design
Branding/Identity


Deliverables

Survey Analytics
Competitive Analysis
Card Sort
Personas
User Stories
User Flows
Site Map
Wireframes
Usability Test
Mid Fidelity Prototype

Time &Tools

Client
Bren Lanphear
Duration
3 weeks
Tools & Software
Figma

Maze
View Figma Prototype

Problem

The problem is jadedness, paralysis, and confusion. People want to make a difference in their community but often fall short. They see and hear massive world issues daily, and it no longer seems urgent. They don't know how to make a difference as an individual, and sometimes they just don't know how to get involved.

Solution

Post resources and involvement opportunities straight from organizations, NGOs, and charities all in one place. Let users scroll through and share posts with friends to find something that motivates them to participate. Let them add volunteer events to a calendar to make time for participation and more effectively contribute to their community.

4 phone screens displaying different Carvoyant screens

Design Process

Diagram of the design  thinking process.

Empathize

Survey

Who participates in the community, and who doesn't? How do they get involved, and why? After screening for users, there were 31 survey participants.

How often do you get involved in a cause you care about?
A diagram of an empathy map

This quantifies the gap between wanting to take action, and actually doing something. There needs to be a way to turn ‘rarely’ into always.

What keeps you from getting involved more?
A diagram of an empathy map

This validates the issue at hand; people don't know how to participate. They also don't know how to make time for involvement. Maybe a calendar to help schedule volunteer opportunities. 

1. Where do you hear about opportunities to volunteer?
2. Where do you hear about rallies?
3. How do you find organizations to donate to?

A diagram of an empathy map

Community involvement needs to be community driven. There has to be a way to share opportunities in the app directly with friends/family and over social media. 

If there was an app that listed involvement opportunities, would you participate more?
A diagram of an empathy map

Competitive Matrix

While there is no product offering the same service I am trying to design, there are many websites and apps that try to get people involved in other ways. These platforms were recommended by participants in the survey.

competitive matrix


Charity miles and Spot Fund center their involvement around donations and raising money for different causes. Though a bit out of scope for now, this could be a feature in future iterations. Same with gamification by making involved rewarding for users. 

There has to be a variety of different opportunities and causes so users are more likely to find something they want participate in.  

Closed Card Sort

There are so many causes, so a closed card sort is used to classify everything under specific 'themes'.

A visual with different HMW statements.

Define

Target Audience

The target audience is younger activists (age 16-30) and organizations (grass roots, NGOS, nonprofits, charities). They want to connect to make a difference. These three personas are based on users and the data collected.

Male cartoon avatar

Amani
Just started a grassroots nonprofit that collects plastic on the beach. They always need help collecting plastic and sometimes need help putting together beach cleanups.
Goals
Volunteers
Donations
Organization goes viral

Frustrations
No community outreach
Male cartoon avatar

Leni
A high school senior who is becoming more socially and politically aware. They want to get involved in issues they care about, particularly climate change.
Goals
Fight climate change
Involve friends
Use social media as a tool

Frustrations
Doesn't know organizations
Doesn't know how to get involved
Male cartoon avatar

Ari
A local college student who scours social media and organization websites for opportunities to get involved. This takes a lot of time and they are busy with class.
Goals
Direct link to organizations
All information in one spot
Time management help

Frustrations
Information is scattered
No direct path for communication

User Stories

Translating the persona’s pain points into user stories can define user flows and features.

As a user i want to so i can
  1. As someone who wants to get involved, I want to browse local opportunities based on my interests to find a cause that motivates me to participate.
  2. As an activist, I want to share opportunities with my friends and family so they can get involved with me.
  3. As someone who wants to get involved but doesn't have time, I want to add things to a calendar so I can manage and arrange my schedule better.
  4. As a grassroot organization, we want to post our volunteer activity to get more participants.
  5. As an NGO we want a way to chat with prospective volunteers to get them involved.

Ideate

Site Map

After defining the labels and features of the website, it is time to organize the information into a site map. 
Screen with Carvana 360 car feature

User Flows

User flows focus on user needs and pain points, following certain user stories.


As an NGO we want a way to chat with prospective volunteers to get them involved.

Sketches of features for Carvoyant


‍ As a grassroot organization, we want to post our volunteer activity to get more participants.

user flow 2


As someone who wants to get involved, I want to browse local opportunities based on my interests to find a cause that motivates me to participate.

user flow 3


As someone who wants to get involved but doesn't have time, I want to add things to a calendar so I can manage and arrange my schedule better.

user flow 4


As an activist, I want to share opportunities with my friends and family so they can get involved with me.

user flow 5

Wireframe Sketch

Sketches help to visualize content in quick iterations.

Solution sketch for Carvoyant

Prototype

Onboarding screen wireframeHome screen wireframeData collection wireframeData collection wireframeCar view wireframeCar view wireframeCar view wireframeListening to audio wireframeDiagnostic found wireframecreate post wireframe calendar wireframeChoose interests wireframe

Test

4 screens with BCause

Usability Testing

The first round of usability tests were virtually on Maze with 33 participants. The test criteria was:

1. Delete and create a post for organizations.
2. Share a post on social media.
3. Add a post to the calendar, and then check the calendar for reference.
3. Explore and filter other opportunities.

Only 11% of participants could delete a post on the organization flow. Since these were not observed tests, I assume users were unaware they could scroll the prototype, but this prompted the CTA to move above the fold and stick it to the image, so it is always visible.


wireframe with circle indicating design changes
Before wireframe

A few participants remarked on the  'like' and 'calendar' features being redundant, as they both save opportunities of interest.  The 'like' feature was removed because the calendar is more useful and aims to solve a user pain pint of time. That left room to move the inbox to the navigation bar.
 
wireframe with marks indicating design changes
Before wireframe

Another comment referred to the toggles, asking how users know their action was complete. To reduce cognitive load and increase visual feedback, users can switch on/off messages and reminders as a whole. If on, the options will appear and users can check how they would like to receive messages.
Before wireframe
After prototype

The second round of usability tests were in person over zoom with 6 participants. At this point, changes to fidelity and branding were added. The same tasks were tested as before. Four participants had trouble finding where to check the calendar or add a post, both of which are located in the navigation bar. Labels were added to the icons to reduce cognitive load.

Navigation bar before testingfinal navigation bar

UI Design

mobile phones with BCause screens

Mood Board

The mood board depicts the eclectic ways people can get involved.

Mood Board with images of cars and neon lights

Logo & Identity

The name BCause is a take off Bcorp or benefit corporation, this is a benefit cause. The logo represents the community and organizations coming together with a passion to do good.

Mood Board with images of cars and neon lights

Style Tile

Red and orange, colors of excitement and action, are a bit hostile and blue is too calm and peaceful, so purple is the best of both. The brighter purple invokes the energy to get things done. The iconography and graphics need to be friendly and inclusive as to not marginalize or excluded any one from participating.
Style tile, fonts, images and color pallet

Final Thoughts

Conclusion

There is a disconnect between community activists and organizations.  BCause provides a link directly to the people. It is an app of community, for the community.

mobile with direct message screen

Now organizations and activists have a platform for direct communication. They can message questions and get volunteers.

Users can explore and filter a variety of causes based on their interests. They can look for specific events or opportunities, all in one place.

mobile with explore screen
mobile with calendar screen

All users can schedule and manage their time and involvement using the calendar feature.

Users can share a post to social media or with friends, continuing community driven involvement.

mobile with post screen
View Figma Prototype

Plans For Development

If I had more time I would:

  • Add micro interactions and animations to CTAs.
  • Add error messages to text fields and delete buttons.

For future interactions I would consider:

  • Hashtags to help categorize and search opportunities.
  • Add a donation feature.
  • Add points for users to gain through participation, sharing, donating.

6 screens with BCause

My Other Work