Responsive web design
Responsive web design
Students Learning
NGO Responsive Webpage
Role - UI/UX Designer
Role - UI/UX Designer
Tools - Figma, Illustrator, Protopie
Tools - Figma, Illustrator, Protopie
Duration - 04.2023 - 07.2023
Duration - 04.2023 - 07.2023
Overview
Overview
About Project
About Project
The NGO, aiming to provide free education through diverse programs, struggles to engage its varied audience effectively. The website lacks a user-centric design, hindering communication with parents, teachers, volunteers, donors, and the community. There's a need for a cohesive interface that communicates impact, facilitates donations, showcases volunteer opportunities, and fosters community engagement. The challenge is to align the website with the specific needs of each group, motivating active participation and support for the organization's mission.
The NGO, aiming to provide free education through diverse programs, struggles to engage its varied audience effectively. The website lacks a user-centric design, hindering communication with parents, teachers, volunteers, donors, and the community. There's a need for a cohesive interface that communicates impact, facilitates donations, showcases volunteer opportunities, and fosters community engagement. The challenge is to align the website with the specific needs of each group, motivating active participation and support for the organization's mission.
The Problem
The Problem
The NGO's current website lacks a user-friendly design, hampering communication and engagement with parents, teachers, volunteers, donors, and the community.
The NGO's current website lacks a user-friendly design, hampering communication and engagement with parents, teachers, volunteers, donors, and the community.
The Goal
The Goal
Create a user-centric website for effective communication of the organization's impact, donation facilitation, volunteer showcasing, and community engagement.
Create a user-centric website for effective communication of the organization's impact, donation facilitation, volunteer showcasing, and community engagement.
My Responsibilities
My Responsibilities
My Responsibilities
Visual Design - User Research - User Persona - User Journey Map -
Information Architecture - Wire framing - Prototyping - Usability Testing
Visual Design - User Research - User Persona - User Journey Map -
Information Architecture - Wire framing - Prototyping - Usability Testing
Visual Design - User Research - User Persona - User Journey Map -
Information Architecture - Wire framing - Prototyping - Usability Testing
Design Process
Research
Talk to Real Users
Surveys & Questionnaire
Define User Goals & Challenges
Identify User Issue
User Opinions, Thoughts & Reactions
Empathise
User Personas
User Testing
User Journey & Experience Map
Define
Ideate
Storyboards
Wireframes
Flowcharts
Low-Fidelity Designs
Create
Moodboards
Design System & Gudelines
High-Fidelity Designs
Prototypes
Motion and Interaction
Test
Usability Testing
Accessibility Testing
Review Feedback
Validate Iterations
Design Process
Research
Talk to Real Users
Surveys & Questionnaire
Define User Goals & Challenges
Identify User Issue
User Opinions, Thoughts & Reactions
Empathise
User Personas
User Testing
User Journey & Experience Map
Define
Ideate
Storyboards
Wireframes
Flowcharts
Low-Fidelity Designs
Create
Moodboards
Design System & Gudelines
High-Fidelity Designs
Prototypes
Motion and Interaction
Test
Usability Testing
Accessibility Testing
Review Feedback
Validate Iterations
Design Process
Research
Talk to Real Users
Surveys & Questionnaire
Define User Goals & Challenges
Identify User Issue
User Opinions, Thoughts & Reactions
Empathise
User Personas
User Testing
User Journey & Experience Map
Define
Ideate
Storyboards
Wireframes
Flowcharts
Low-Fidelity Designs
Create
Moodboards
Design System & Gudelines
High-Fidelity Designs
Prototypes
Motion and Interaction
Test
Usability Testing
Accessibility Testing
Review Feedback
Validate Iterations
Understanding Users
Understanding Users
User Research
User Research
Conducting thorough user research to understand the needs of parents, teachers, volunteers, donors, and the community, our goal is to inform a redesign that creates a user-centric website, aligning with diverse preferences and maximizing positive impact.
Conducting thorough user research to understand the needs of parents, teachers, volunteers, donors, and the community, our goal is to inform a redesign that creates a user-centric website, aligning with diverse preferences and maximizing positive impact.
Pain Points
Pain Points
Large
content
Content is too large, requiring users to invest significant time in deciphering its meaning.
1
Accessibility
issue
Accessibility issues, such as design contrast, hinder the user experience.
2
Poor
navigation
Poor navigation is causing frustration and making it challenging for users to find the information they seek.
3
Information challenge
Users express difficulty in obtaining proper insights about the programs and struggle to locate information on current projects.
4
Starting Design
Starting Design
Wireframes
Wireframes
Fully optimized mobile version
Fully optimized mobile version
All pages were designed along with fully optimized responsive versions.
All pages were designed along with fully optimized responsive versions.
Visual Design
Visual Design
High Fidelity Wireframes
High Fidelity Wireframes
Social Enterprise Responsive Website
View Casestudy
Garage Service Management App
View Casestudy
Supply Chain Management Dashboard
View Casestudy
Social Enterprise Responsive Website
View Casestudy
Garage Service Management App
View Casestudy
Supply Chain Management Dashboard
View Casestudy
Social Enterprise Responsive Website
View Casestudy
Garage Service Management App
View Casestudy
Supply Chain Management Dashboard
View Casestudy
Conclusion
Conclusion
What did I learn?
What did I learn?
Designing the webpage has been a challenging and satisfying journey. During the development of this project, I realized how important the research stage is. After in-depth research in the users needs and emotions, the project became more relevant and valuable for users.
It was a challenge to conduct the user research and prepare the whole flow to create a complete prototype-friendly app with smooth and clear usability and most important of all, accessibility to the user .
I’ve learnt that the choice of colors, typography and components individually and as a group-impacts the users experience,
Designing the webpage has been a challenging and satisfying journey. During the development of this project, I realized how important the research stage is. After in-depth research in the users needs and emotions, the project became more relevant and valuable for users.
It was a challenge to conduct the user research and prepare the whole flow to create a complete prototype-friendly app with smooth and clear usability and most important of all, accessibility to the user .
I’ve learnt that the choice of colors, typography and components individually and as a group-impacts the users experience,
What are the next steps?
What are the next steps?
I want to conduct more research to understand what will be required to improve the user experience much more simple in every steps.
I want to conduct more research to understand what will be required to improve the user experience much more simple in every steps.
Copyright © Nikhil Mohan 2023
Copyright © Nikhil Mohan 2023
Copyright © Nikhil Mohan 2023