Accelerating The Purpose Driven Economy — UI/UX Case Study

Makera, a changemaker’s playground

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

During the pandemic, I volunteered my time and skills to help out a friend who was starting her own venture in the social sector space, and to bring this project to life, I worked with a group of young people from various backgrounds with a diverse set of skills towards one common goal — to accelerate the purpose-driven economy!

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

We were a team of 9 people that worked on this project and our common space for meetings was Zoom & Jitsi and our main communication channel was Slack.

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.

My role:

I was solely responsible for:

• 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)

Problem Statement

There are about 472 million young people in India and more than a million organizations that work towards social change. Yet, there’s no one place where a young changemaker can go to see all the organizations that he/she can work with or a place where organizations can go, to look for young, driven people to join them and work towards a single cause.

Goals

• To create an online platform where volunteers and organizations could come together.
• 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

Before we proceeded forward, we first sat together to understand the gap that exists in the market through surveys and interviews. We had 112 participants in this survey.

From our surveys and interviews, we understood that:

• Out of 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:

“It’s very hard and time consuming to find volunteers every quarter.”
“It’s hard to track and manage applications during a recruitment cycle. It’d be great to have a platform to manage everything in one place.”
“It’ll be really helpful to have a platform that solely focuses on NGOs and organizations in the social sector.”
“I wish there was a place to go to find a pool of interested young volunteers at all times”

Figuring out how to bridge the gap

After understanding what both the changemakers and the organizations need, we came to the conclusion that there needs to exist an online platform where the changemakers can go to learn all about the organizations around them and find volunteering opportunities that best fit their interests. And on the other side, where organizations can go to find skilled youth who can work with them and fill the gaps in their organizations.

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

I’m not going to get too in-depth into the thinking and iterations behind the logo and identity design but here’s a quick summary:

“Makera” stands for the 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.

User Types

Before we moved on to talk about how the platform is going to look like we first took some time to clearly understand both our user types.

Let’s talk about them one at a time:

I chose to go with a combination of both user personas and user archetypes to get a more clear understanding of 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

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

After mapping out different user flows clearly, I drew out some rough wireframes to put things in order and tried out various iterations to see what’s the best way to familiarize the user with the dashboard and let them easily do the task at hand. I then went on to create low fidelity wireframes of the sketches that I thought worked really well.

Visual Design

Website

When I was planning the content strategy, the one thing I was sure about was to not use illustrations but instead use rich imagery that would provoke an emotion — especially for the hero section.

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.

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

The volunteer dashboard has 3 main sections. Home, My applications and Shortlisted with a sticky bottom navigation.

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 through 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

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

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

The profile screen has basic information about the volunteer where the volunteer can choose 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

The sign-up flow starts with this screen where the user has to choose 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.

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

The visual design that I showcased above is the final product of 2 rounds of user testing and their feedback on what they want in a platform like this and understanding how they interacted with the prototype that was given to them.

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. One of the biggest things that we as a team paid attention to was understanding the needs of the user and we constantly strived to make sure that it’s a safe and non-judgmental space for the volunteers not just on the platform but throughout the journey of the user with Makera at all touchpoints.
2. I, as a designer at all stages of my design process, kept the developers updated as to how the design looks 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?

The choice of colors I went with gave the platform a serious and professional vibe and I believe the whole aesthetic could have been more fun.

Conclusion

There’s a huge gap in the market that exists between students who want to make a difference and organizations that are already on a mission to create huge waves of social change. I’m super glad that I used my skills and time to work on this platform that will enable thousands of young changemakers in our country very soon!

And lastly, the process of putting together this case study was 100x 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!