HABITAT FOR HUMANITY
HABITAT FOR HUMANITY
HABITAT FOR HUMANITY
HABITAT FOR HUMANITY
Website Redesign
Website Redesign
Website Redesign
Website Redesign
Redesign and strategic design of the website for Habitat for Humanity.
Redesign and strategic design of the website for Habitat for Humanity.
Redesign and strategic design of the website for Habitat for Humanity.
UX Research
UX / UI Design
Service Design
Visual Communication
Figma
Rhinoceros 7
Adobe Suite
Keyshot
2024
2024
2024
Website Redesign and Strategic Design
Website Redesign and Strategic Design
Website Redesign and Strategic Design
Overview
Overview
Facing global crisis, like climate change, global wars, mass displacement and financial difficulties, housing is increasingly needed for affected people all over the world. Habitat for Humanity is an organisation that provides affordable homes all over the world.
The organisation's current website seems cluttered with inconsistent CTAs and Information Architecture. The redesign puts the volunteer and member in a direct exchange with the organisation.
Facing global crisis, like climate change, global wars, mass displacement and financial difficulties, housing is increasingly needed for affected people all over the world. Habitat for Humanity is an organisation that provides affordable homes all over the world.
The organisation's current website seems cluttered with inconsistent CTAs and Information Architecture. The redesign puts the volunteer and member in a direct exchange with the organisation.
Tools
Tools
Figma
Adobe Illustrator
Adobe Photoshop
Adobe InDesign
Rhinoceros 7
Keyshot 8
Figma
Adobe Illustrator
Adobe Photoshop
Adobe InDesign
Rhinoceros 7
Keyshot 8
↘ Hero page of the organisation
The Goal
The Goal
Looking at the users, we can identify pain points with confusing donation pages, intransparent volunteering pages or difficult interaction with the organisation itself.
The Goal of the project was a responsive website with a community page and easily accessible project search functions.
Looking at the users, we can identify pain points with confusing donation pages, intransparent volunteering pages or difficult interaction with the organisation itself.
The Goal of the project was a responsive website with a community page and easily accessible project search functions.
RESEARCH
RESEARCH
Summary
Summary
I conducted user interviews, which I then turned into empathy maps. I discovered that many target users wish to share projects and keep track of the project stage. This resulted in a focus on the community aspect of the project.
I conducted user interviews, which I then turned into empathy maps. I discovered that many target users wish to share projects and keep track of the project stage. This resulted in a focus on the community aspect of the project.
↘ Persona created from online user research
↘ Persona created from online user research
User Journey
User Journey
Using Personas, I created user journeys to define different scenarios and daily schedules of possible end users.
Various Personas, with different age groups and motivations helped to understand, what members of an organisation look for.
Using Personas, I created user journeys to define different scenarios and daily schedules of possible end users.
Various Personas, with different age groups and motivations helped to understand, what members of an organisation look for.
↘ User Journey modeled after research insights
↘ User Journey modeled after research insights
INFORMATION ARCHITECTURE
INFORMATION ARCHITECTURE
Structure and Site Map
Structure and Site Map
A pain point for users was the lack of functionality on websites for humanitarian organisations and the lack of interaction with the organisation itself.
I wanted to implement the user as a part of the organisation itself by allowing to share and comment, creating content and accessing information transparently.
A pain point for users was the lack of functionality on websites for humanitarian organisations and the lack of interaction with the organisation itself.
I wanted to implement the user as a part of the organisation itself by allowing to share and comment, creating content and accessing information transparently.
↘ Sitemap of the website with different levels
↘ Sitemap of the website with different levels
PRODUCT DESIGN
PRODUCT DESIGN
Wireframing
Wireframing
The page needed elements like a hero image, navigation buttons and a top navigation bar, highlighted projects, a community side bar and search functions. Some more elements, like a value presentation and a "What we do" section were optional, but made it into the final design to fill out the page and make it more accessible.
The page needed elements like a hero image, navigation buttons and a top navigation bar, highlighted projects, a community side bar and search functions. Some more elements, like a value presentation and a "What we do" section were optional, but made it into the final design to fill out the page and make it more accessible.
↘ Iterations throughout the wireframing process
↘ Iterations throughout the wireframing process
Low Fidelity Prototype
Low Fidelity Prototype
Moving from paper to digital wireframes made it easy to understand how the redesign could help adress user pain points and improve the user experience.
Prioritising useful button locations and visual element placement on the homepage was a key part of my strategy.
My main focus was the layout of the Top Navigation Bar and Side Bars for extended functions.
Moving from paper to digital wireframes made it easy to understand how the redesign could help adress user pain points and improve the user experience.
Prioritising useful button locations and visual element placement on the homepage was a key part of my strategy.
My main focus was the layout of the Top Navigation Bar and Side Bars for extended functions.
↘ Low-Fidelity Prototype of the website
↘ Low-Fidelity Prototype of the website
High Fidelity Prototype
High Fidelity Prototype
The Hi-Fi Prototype includes several changes synthesised from a usability study:
Visual Clutter
The final design was optimized by Gestalt Principles to increase readiblity and focus.
Readibility
The contrast of elements and background passed WCAG AAA standards. All buttons include icons for easier access.
Information Architecture
Following the visual decluttering, some information needed to presented clearer and more accessible.
The Hi-Fi Prototype includes several changes synthesised from a usability study:
Visual Clutter
The final design was optimized by Gestalt Principles to increase readiblity and focus.
Readibility
The contrast of elements and background passed WCAG AAA standards. All buttons include icons for easier access.
Information Architecture
Following the visual decluttering, some information needed to presented clearer and more accessible.
↘ Changes in the visual layout of the website
↘ Changes in the visual layout of the website
↘ High Fidelity Prototype of the website
↘ High Fidelity Prototype of the website
↘ Hero page of the organisation