Accelerating The Purpose Driven Economy — UI/UX Case Study

Makera, a changemaker’s playground

Image for post
Image for post

TLDR;

This is a case study about an online platform called Makera, where students can find volunteering opportunities and organizations can recruit volunteers and post opportunities.

Overview

Written below, is a detailed case study that takes you through the entire journey of how we came together to understand the gap that exists in the market between young students who want to work towards creating a change and social organizations that work towards making the world a better place and how through our collective effort we created a solution to bridge this gap by creating a platform where young changemakers can go to find all the available organizations and opportunities for them to volunteer and where organizations can go to find skilled talent to join them on their journey of social change.

Team + Responsibilities

Communication was key for this project to succeed as we were all working from different cities & states and with the ongoing pandemic, a physical meeting was not even possible.

But through regular Zoom meetings and updating each other on Slack constantly we made sure that the entire team was aware of each other’s work status and responsibilities.

Image for post
Image for post
Image for post
Image for post

My role:

  • Designing a logo and an identity system.
  • Designing brand collaterals.
  • Designing a responsive website.
  • Designing the user flows and dashboard interfaces for both volunteers and organizations. (Web + Mobile)
Image for post
Image for post

Problem Statement

Goals

  • Volunteers should be able to look for opportunities that contribute to the causes they believe in and they should be able to filter through to find the best opportunity that fits their needs. (i.e timeline, duration etc.,)
  • Organizations should be able to post their opportunities to welcome volunteers and they should be able to filter through and recruit volunteers based on their needs. (i.e skillset, experience etc.,)

Research

Understanding the gap that exists

From our surveys and interviews, we understood that:

  • Out of the all the participants, 77% of the people have volunteered previously.
  • 42% of them heard about these opportunities through word of mouth.
  • And from the remaining, 45.6% of them were recommended these organizations/opportunities by their school or university.
  • Out of the ones who didn’t volunteer, 68% of the people said it’s because they don’t know where to volunteer or because of the lack of awareness.

Key quotes directly from the participants:

“I’m not very informed about the social organizations around me.”
“I’m interested. I really want to volunteer but I don’t know where or how.”
“I don’t know if I can find opportunities that line up with my free time.”
“I wish I there was a place to go to find more and more opportunities.”
“I want to volunteer to get some real experience but don’t know where to start.”

And on the other side of this, we spoke to a few organizations to understand what they need to fill these gaps. As these interviews only included a handful of people I’ll directly get to what they said.

Key quotes directly from the organizations:

“I’m not very informed about the social organizations around me.”
“I’m interested. I really want to volunteer but I don’t know where or how.”
“I don’t know if I can find opportunities that line up with my free time.”
“I wish there was a place to go to find more and more opportunities.”
“I want to volunteer to get some real experience but don’t know where to start.”

Figuring out how to bridge the gap

And that’s exactly where Makera fits in!

At this point, we did a competitor analysis to see what other players in this space are up to, what they’re doing well, what still lacks in the market and what we can learn from them.

Identity Design

“Makera” stands for change-making era.
So, the idea behind this is to depict the ripple effect caused by enabling more and more young people to work towards various issues and create waves of social change.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

User Types

Let’s talk about them one at a time:

Image for post
Image for post

I chose to go with a combination of both user personas and user archetypes to get a more clear understanding on both the behavioral patterns and the unique characteristics of both the user types.

Some of the main frustrations of the user types are:

1) Changemaker:
• Don’t know where to find reliable volunteering opportunities.
• No idea about the legitimacy of the organization.
• Not able to find projects for a specific timeline.

2) Organization:
• Don’t know how to find volunteers every 3 months.
• No system in place to recruit and enable volunteers.
• Don’t know how reliable word of mouth/referrals are.

User Journey Mapping

Image for post
Image for post

I laid down the flow of both the volunteers and organizations to get a better idea about which features to prioritize and which features to slowly introduce in the flow.

Wireframing

Image for post
Image for post

Visual Design

Website

And for the main CTA, I chose to go with a search bar instead of a straight forward sign up button because I wanted the user to get an idea of how the opportunities look like and how he/she can find the perfect opportunity that best fits their interests.

Image for post
Image for post

The whole flow is designed in a way that the user gets whatever he/she needs without having to search or go through another step to find it.

I designed 2 CTA sections on the home screen, the first one being organization specific and the second one is an overall CTA to both sign up and sign in.

Dashboard — Volunteers

Image for post
Image for post
  1. Home screen: The home screen has featured opportunities with a search bar and the featured opportunities are personalized based on what causes the user selects to work towards during the sign up. The biggest thing I wanted to achieve through this screen is to reduce the decision paralysis that users face while going though all the hundreds of opportunities.
  2. My Applications: The my applications screen shows all the opportunities that the user applied for and they’re shown as the same listing card that the user clicked on to apply to give them the freedom to go back anytime and look for more details about the opportunity that he/she applied for. Each listing card also has additional information on the status of the application and the date of applying for reference.
  3. Shortlisted: The shortlisted screen all the opportunities that the user saved to take a look at later. This screen helps plan and organize all the opportunities that the user is interested in.
  4. Menu: The menu gives the user a quick way to access profile settings, account settings, notifications and to log out.
  5. Settings: The settings screen is divided into 2 parts — notifications and account settings and the user has the freedom to customize his/her notifications based on their needs.

Dashboard — Organizations

Image for post
Image for post
  1. My Listings: The my listings page is the landing page for the organizations’ dashboard with a button to create a listing right at the top. All the listing cards also have a status badge to let the user know whether a particular listing is currently active or not.
  2. Applications: The applications page displays the list of all the applicants in cards. The user has the freedom to select the listing that they want to see the applicants for and each card also provides the user to shortlist the candidates.
  3. Shortlisted: The shortlisted page shows all the filtered candidates for a specific project. This helps ease the process of filtering through many candidates and each shortlisted candidate card also has additional information like the status of the application and whether the checklist is completed or not.
  4. Menu: The menu gives the user a quick way to access profile settings, account settings, notifications and to log out.
  5. Settings: The settings screen is divided into 2 parts — notifications and account settings and the user has the freedom to customize his/her notifications based on their needs.

Listings

Image for post
Image for post
Image for post
Image for post

Once opened, the listing page starts with a cover followed by all the details about the project with an apply button that stays stuck to the bottom of the screen throughout.

I used a gradient on top of the cover to bring emphasis to the name of the listing and the color varies based on the SDG of the project.

Profile

Image for post
Image for post

The profile screen has basic information about the volunteer where the volunteer can chose to show or hide his/her gender and also there’s no picture in the volunteer’s profile so that no bias or discrimination can take place based on their appearance or gender.

Signup flow

Image for post
Image for post

The sign up flow starts with this screen where the user has to chose whether he/she is a volunteer or an organization.

For students, the sign up flow is an elaborate questionnaire divided into 3 sections — personal, professional and a little bit more.

At all times the user has a clear idea of how many steps there are in the process, how far he/she has come in the sign up process and how much is left and the user can even use this to navigate back and forth.

Image for post
Image for post

The sign up flow of the organizations is quite concise and basic during the initial sign up process and any interested organization can apply for an elaborate vetting process once the basic sign up is done.

Results

As of now the product is still under development so we have used this time to test the prototype with more users — 56 to be exact and we’ve heard super positive feedback from them.

I will update this case study with more and more results as we go forward!

What went right?

  1. I, as designer at all stages of my design process kept the developers updated as to how the design look like at each stage to understand what was possible to execute and what was worth the extra time spent development wise to make the design better because all the developers are still students so I made sure I designed responsibly instead of creating fancy screens and animations.

What could have gone better?

Conclusion

And lastly, the process of putting together this case study was 100x more harder than designing the whole dashboard experience. Writing this case study has taught me a lot and I hope to document all my upcoming projects in the future in the form of case studies!

Image for post
Image for post

Written by

Product Designer • Host — Talk Design To Me Podcast • Has a cat • BLR, IN • srinivasteja.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store