Role
Sole UX & UI Designer
When
Jun - Aug 2021
Tools used
Figma
Give. website was a project I designed as part of my Google UX Design course. The brief was to design a responsive location-based recommendation website from start (research, ideation and testing) to finish (high-fidelity prototype and mockups). During the Covid time, I was inspired to take this project to help people find voluteer oppurtunities easily and with confidence.
The Problem
People are are looking for a voluntary activity but they have no clue how to find one. The information is all over the place and there is also a trust factor.
The Solution
-
Provide potential volunteers with an easy means of finding and enroll for flexible volunteering opportunities.
-
Users essentially need information about the organization’s location, activities, credibility, and lots of information like pictures, videos, reviews etc.
-
Users prefer and need to know the organization around them and the one which fits their schedule.
Reasearch
A quick market research
As per website: nonprofitssource.com. approximately 63 million Americans — 25% of the adult population — volunteer their time, talents, and energy to making a difference. People aged 35-44 and 45-54 are most likely to volunteer (28.9% and 28% respectively) while 20-24 year olds have the lowest rates (18.4%). 77% believe everyone can make a difference by supporting causes. More..
Competitive Analysis
Before I started the interview, I wanted to see what the other websites are offering and learn the market situation. I also checked the feedbacks from real people to learn about their experience when they applied for the opportunities through these websites.
Reviews, Testimonials & Feedback
I think going through the comments section and reading the feedbacks are more reliable. Most of the time we get to see the genuine reactions and emotoins of the users.
Define
From the pain points collected, I started working on defining the problems so that I can communicate this with the stake holders and also to get a clarity on what we need to solve.
Persona
I created this persona from the information I collected from the Empathize stage.
JTBD
Okay team, so here's what we need to do!
-
Design a simple volunteer application flow from start to finish.
-
Provide filter option.
-
Include details of the opportunities with Pic, videos, and testimonials from prev volunteers.
Ideation
Now that I know what I need to work on, next I started working on “How” to resolve these.
Site Map
I brainstormed, compiled and organized the necessary website content and functionality. I decided to include the most vital information in the new version to make it clean and easy to navigate.
User Flow
I created the user task flow for the event registration process, which is one of the most important site functions. Task flow assumes a visit by a guest who’s not a member of the Society yet.
Sketches
LoFi Wireframe
I collected the best items I liked from the sketches and created paper wireframes. Next, I transferred it to my laptop using Figma. This was quite easy.
UI Design
Design System
Need to write something here.
Hi Fi Mockup
Need to write something here.
Prototype
I learned a lot about Components and Variants in Figma and included them in this interactive prototype. Please check it out below.
Learnings and Possible next steps
I realize that designing user experience from scratch is a complicated task. Although I learn a lot about digital product designing and UX designing, I am aware that this case study is not perfect and needs a lot of improvement. One of them is, I should’ve tried and tested the low-fidelity wireframe to the real user and get feedback. With influential critics and comments, I could’ve developed more user-centric high-fidelity mockups.
It is widely accepted that approximately 80% of errors can be identified from testing just five users (Nielsen, 2000). Next time, I'll set a minimum target of five participants in the hope of producing more reliable results.
Thank you!
Other works
