Responsive Website Design
Project Duration
4 Weeks
Tools Used
Adobe XD, Google sheets,
Google docs, Miro, WhatsApp
Role
UX Designer, Visual design, Prototyping & Testing
Project Type
UX Case Study
'Foster group' is a dedicated Humanitarian aid platform that includes all the services for the betterment of vulnerable lives
Problem Statement
With the world full of busy working people, we need a dedicated organization website that brings out the suffering of people to people's notice. It also should help and allow them to know and get involved in programs that will improve the lifestyle of the affected group.
"A small deed from our side can have a huge impact on someone's life and that gap has to be bridged by this website."
Problem Solution
A digital solution that brings the stories of suffering people from the neighborhood on one platform. A website that shares the word of every single victim and lets the world share and helps them in their grieves.
Design Process
As an UX Designer for this project, I had to critically understand users’ feelings or thoughts in order to design products that are truly useful, enjoyable, and accessible.
User Interface
Surveys
Competitive Analysis
​
Personas
Empathy Map
Journey Map
User Flow
Card Slotting
Information Architecture
Wireframes
Visual Design
Usability Test
Implementing feedback
As a first stage in the design thinking process, I conducted some user research to understand the user's needs by trying to avoid assumptions.
Qualitative Research
I interviewed a bunch of people to understand how they're willing to contribute to a particular group of people who are in need and asked them the following questions to get a clear image of the User's need.
- When was the recent time you did a donation?
- How do you think the resources from others can be of help to the victims?
- Have you shared your opinions on these social topics before?
- What kind of work do you wish to perform for the needy?
- What kind of work do you do?
- How often have taken part in social activities?
- How well are you aware of the things about self-help groups?
- Do you wish to have quick access in case of a donation?
Key insights derived from the interviews
- Most of the time people are not aware of the outside world's news.
- They are unsure of how to donate things to the victims.
- Not comfortable with any stranger guiding them through donation process and wish to do it on their own
Quantitative Research
An online survey was conducted to understand the issues faced by the users while helping for Humanitarian aid groups, and the results are represented as pie charts.
Where do you live?
Is there any public aid organization nearby your place?
How often have you done any donation to any particular victim group?
Would you be interested in participating in a humanitarian aid group?
Are you comfortable with doing online donation?
​Would you be interested in knowing the stories behind these victim groups to offer help?
Key insights derived from the surveys
- Users were interested in helping the victim group and wanted to know much about news related to it.
- They were not aware of the victim's stories and wanted to get involved.
- Though there is a need for help, people are not reaching out to organizations because they are unaware of them.
Brainstorming
Based on the user interviews and online survey, I started brainstorming the important features that I can apply to the design.
Monthly
About us
Our Timeline
Our story
Case 1
Occassionally
Donate
Get involved
Do more
What is happening?
Where we work
Countries
Define Phase
Persona
With the help of the user persona, I was able to point out the goals and frustration of the user and provide exact solutions to them.
- Unable to find a proper website for organizations
- Getting involved remotely in events.
- Unclear goals and motivations are mentioned on the website.
" True happiness is seeing the pure hearts get what they wish for"
Frustrations
Goals
Jean McGuire is a hardworking manager who is interested in getting involved in NGOs. She is someone who spends her special occasion by participating in events hosted by self-help groups. Although she leads a busy life of her own, she always helps the needy.
- To support NGOs as much as possible
- To take part in events hosted by them.
- Work as a volunteer.
Personality
Motivations
- To support NGOs as much as possible
- To take part in events hosted by them.
- Work as a volunteer.
Age: 43
Education: MBA
Occupation: Manager
Status: Married
Location: Bangalore
Intitutive
Observant
Extrovert
Introvert
Thinking
Acting
Leadership
Patience
Social
Empathy Map
I did this process to define the target audience with more clarity, as well as to illustrate their needs and actions. Empathy mapping helped me gain perspective on their thoughts and feelings. The data on the empathy map are based on insights from user interviews.
- "I heard about a story in local news long back during my childhood. That incident hit me hard and made me realize that someday I must be of help to this group of people.
Says
- If I can easily lend them what they want I will be satisfied.
Thinks
- Checks stories
- Looks out for ways to help.
Does
- Uncertainty about how to help.
- Will be delighted to help the victim group.
Feels
Journey Map
Mapping Jean Mcguire’s user journey revealed how helpful it would be to get involved in Humanitarian aid works.
ACTION
Look out for
programs
Search for
Organizations
Check the ‘About us’
page
Checking how to
get involved
Enrolling in
programs
TASK LIST
FEELING
ADJECTIVE
IMPROVEMENT
OPPORTUNITIES
Feeling content and
satisfied on
enrolling in programs
Tasks
A. Type of programs
and their benefits to the
victim group
B. Look out for partners
Tasks
A. Read about the
latest news
B. Search based
on the location
Tasks
A. Read about
their history
B. Find what interests
about them
Tasks
A. Checking the
right schedule
B. Enrolling in a
suitable session
Tasks
A. Read about
the programs
B. Check the perks
Listing out
various programs
Clueless and confused
by lots of
organizations available
Curious to know about
their history and vision
Nervous on how to get
involved in
available programs
Feeling curious
and interested
Proper and simple
methods
to get enrolled
Easy names
to remember
Mentioning their
timeline and purpose
Clearly detail out
about the available
programs
Ideate Phase
User flow
I created a user flow using Miro to illustrate how the user will navigate through the website.
Card sorting
Card sorting was done to categorize all the features under different sections which will further help in organizing the information architecture of the website.
Home
Our story
About us
Our Timeline
Category 1
Our Work
Case 1
Case 2
Get Involved
Education
Climate
Organize
Information Architecture
The card sorting results were further refined to fit the goals of the website. Some features were re-categorized to make it easier to complete a task.
Home
Our Story
News & Updates
Active Donation
Donate
Give Once
Give Monthly
For Emergency
Money
Select Date
Donating Options
Food / Dress / Things
Payment
Quantity
Or
Add a donation address
Prototype Phase
Paper Wireframes
Option 02
.jpg)
_edited.jpg)
After getting an overview of the website elements, I tried out a few layouts in the paper wireframes using the 'crazy eight' method.
Option 01
Low - Fidelity Wireframes
Although Low-fi wireframes provided a lot of ways to improve the layout of the website from a personal point of view.
" It didn't actually help me understand how users perceived the website"
Since it was a responsive website design, I tried out the layouts on various screens.
High - Fidelity Wireframes
High-fi wireframes allowed users to get a basic idea of how the website might visually look and work practically.
Test Phase
Usability testing
After I completed the visual design of the website, I tested the prototype with a few users to see how user-friendly the website is. The tests included both moderated and unmoderated depending on the location of the users. I then implemented the noted observations on the prototype.
To get involved in an event
Book a donation
Read stories about various victim group
​The participants were able to navigate through the website quite easily. Following inputs from the users were taken into consideration and slight changes were done and updated.
Suggestions to make the experience better
- Donations of other things like food, dress, etc. were suggested to be added.
- The overall color palette of the entire website is to be made a little light.
Implementing feedback
After a few rounds of user testing, I iterated the hi-fi prototype based on the feedback given by the users.
Other ways of donation other than money were added
Addition of payment screen for the desktop were added.
Usability test after applying user feedback & suggestion
Thank You
I'll be glad to hear your suggestion or feedbacks :)