Thank You for Visiting!
For the best experience, please check out my portfolio projects on a laptop or desktop. See you there! 😊
Child Welfare Website
Name
Savali
Domain
Non- Profit Organization
Timeline
4 months
Role
UX Researcher & UI Designer
Tools
1
Project
Overview
What is SAVALI?
Savali is an organization that has been helping children with mental disabilities and cerebral palsy for 30 years. It provides them with a safe place to live and offers activities to make their lives happier and more engaging.
Despite its impactful mission, the website faced usability and aesthetic challenges, hindering user engagement.
Website
Analysis
Savali's website faces usability and aesthetic issues, including unclear navigation, outdated visuals, and inefficient donation processes, which hinder user engagement and limit the website’s effectiveness in supporting its mission.
Usability
Navigation | Donations | Design
Challenges
1. Confusing navigation and outdated information.
Inefficient donation process without online transactions.
Inconsistent visual design and overwhelming content.
Results
Enhanced navigation structure with jargon-free menus by 40%.
Increased donation ease 25% through online payment integration.
Harmonized visual elements for a minimalist, impactful user friendly design by 50%.
2
Desk
Research
Heuristic Evaluation
Using Jakob Nielsen’s principles
Visibility of System Status
Aesthetic and Minimalist Design
Help Users Recognize and Recover from Errors
Updates not prominently displayed; outdated testimonials.
Ineffective donation redirections.
Overwhelming colors and large, inconsistent images.
Competitive
Analysis
Studied similar NGO websites for understanding the features and the target audiences. Also the best practices in navigation, donation setup, and design consistency.
Online Donation Process
Volunteer Opportunities
Accessibility of Resources
Geographical Reach
Awareness & Outreach
Features
The abundance of confusing navigation and unfamiliar jargon options made users feel like a stranger in a foreign land.
3
User
Research
Survey | Interviews | User Analytics
Conducted via Google Forms, targeting demographics, NGO website preferences, and donation methods.
Key Findings
100% found the information crowded.
80% wanted multiple donation options.
Users emphasized intuitive navigation.
User Frustrations
The images are overwhelming, they overshadow the information.
A straightforward donation option on every page might be helpful
“
“
User
Personas
These personas ensure a user-centered design by representing diverse demographics, behaviors, and needs. They provide insight into user goals, frustrations, and digital proficiency, guiding informed design decisions. This approach enhances usability, accessibility, and engagement, ensuring the final design meets user expectations effectively.
4
Brainstorm
& Ideate
Existing User Interface
Problem Statements
How might we create a clearer and more intuitive menu structure so that users can navigate the site effortlessly?
How might we streamline the online transaction process so that donors can complete their contributions quickly and without frustration?
How might we introduce a more vibrant and engaging color palette so that users find the interface visually appealing and energizing?
Users struggle with finding information due to cluttered design and unclear menus.
Donors face difficulties in completing online transactions due to a lack of proper functionality
Overwhelming dull colors and large, inconsistent images.
HMW Statements
5
Design
System
Typography
UI Kits
Colour Scheme
Wireframe Design
Testing
Style Guide
Typography
:)
Aa
Headline
Sub headline
Montserrat
Regular
Bold
Medium
Semi Bold
:)
Aa
Content
Call to action
Roboto
Regular
Bold
Medium
Semi Bold
Color Scheme
#141414
#05BF29
#BDF9C8
#FFFFFF
UI Kit
Primary
Default
Default
Disabled
Hover
Hover
Secondary
Tertiary
ENROLL
ENROLL
DONATE
DONATE
Empty
Focused
Disabled
Error
Filled
Search
|
Volunteer Form
ABC
Name*
Name*
mrunal.123@gmail.com
This email Id does not exist
Email Id*
|
Name*
Mrunal
Name*
6
Design &
Prototype
Low Fidelity Wireframes
Easy Navigation
Online Donation
Volunteer Form
Live Matrix
Jargon Free
Responsive Design
Quick Contact
High Fidelity Wireframes
I appreciate your time and support in seeing this project through to completion :)
“
“
I’m pleased to see a clear, intuitive design, a seamless donation process, and a visually cohesive experience that enhances usability.
- An active user -
01
Explore Other Projects
Open to work
