REDESIGN - Habitat for Humanity
Embedded Files
The Problem
Habitat for Humanity has seen a decline in both donations and volunteer engagement over the past 12 months. While some of this could be attributed to CV19, we believe this may also be directly related to their website and it’s need for evolution to match today’s climate.
The Solution
By rethinking the donation process and strategically placing it, as well as creating a volunteer match system, Habitat will see larger donations and a higher level of volunteer engagement.
My Role + Tools
UX Researcher + UI Designer. (Worked with 3 other designers through research. UI individual.)
Trello, Miro, Google Drive, Figma
Project Date: 2022
Good Deeds deserve Good Design
Habitat for Humanity is one of the most well known non-profits in the country, offering many opportunities to both give and receive help - So why does the national site fail to meet current design industry standards?
| Project Goals
Brand Identity
Brand Identity
There is an instant branding confusion on the homepage. Is this Home Depot or Habitat for Humanity? It's not clear if the use of both brands is a partnership or if one has entered the wrong site. I planned to clarify this.
Increase Engagement
Increase Engagement
Focused placed on redesigning features (donate buttons and user flow, primary global navigation) and particular pages dedicated to donations and volunteers.
Update Visual Design
Update Visual Design
The current site is dated and lacks a consistent theme - one to inspire and motivate potential donations and/or volunteers. UI refresh will be implemented following testing and color theory research.
RESEARCH
// Evaluation of current site
// Evaluation of current site
I generally like to get the lay of the land when pursuing a new project so I used the 10 usability heuristics as my guide while completing an expert review for the website. Additionally, I made note of what I assumed a typical user's purpose might be for visiting the site. Looking at both mobile and desktop views the following stood out:
Global Navigation (Hierarchy issues, redundancy, overwhelming amount of information)
Brand confusion (Homepage featured large imagery related to The Home Depot)
Help is not readily available on each page
Overall lack of standardization of UI features and functions (lack of breadcrumbs, links not working, etc)
// User Interviews + Usability Testing
// User Interviews + Usability Testing
The world looks a bit different these days so took to zoom to conduct 5 interviews in order to understand users demographics, frustrations, and motivations.
Similarily, as with expert reviews, I approach interviews and usability testing with a plan but leave room to discover what people want and who they are. So these interviews coupled with usability testing of the current site were used to understand if my initial assumptions from expert review were validated or completely off base.
+ Moderated testing stands as one of my favorite research methods as more often than not users reveal nuggets of information that I wouldn't never think of myself.
1:1 Interviews
Usability Testing
// Key Findings
Key findings from the current website usability testing revealed:
Users felt overwhelmed and confused by current global navigation
Additional confusion and uncertainty around the donation and volunteer opportunities
Confusion between language used: Donate vs Support
💡And surprising insight from multiple users stating that they had a difficult time defining the mission of the organization and belived this is something that should be highlighted
// Competitive Analysis
Additionally, at the beginning of a project I like to look at where the competition stands. While the actual deliverable was more robust - the following image showcases how I compare features and functions with the competition. What are others doing well? Are they lacking in any way? What ideas can be generated?
1. All other sites feature a frozen global navigation. This eliminates the need for redundant information throughout pages when it's readily available as one scrolls.
2. The competition highlighted their impact in various ways on their homepage. This is a great way to quickly communicate what an organization does.
3. The Red Cross has a volunteer match feature - a unique and potentially useful solution to alleviate the overwhelming feelings users experience going through this process on the Habitat website.
// Solidifying Goals
So now that I've gathered insights - what's next?
Following expert review, user interviews and testing, and competitive analysis, the original 3 project goals were confirmed as areas that would be included within the scope of the redesign. Also, it was important to take into consideration that most users had a difficult time defining the mission so this was added to the list as well.
Specific features and functions were determined per original goal:
Rebrand - focus on color theory, highlighting mission and impact
Increase engagement - streamline donate process and create volunteer match
Update UI - IA (reorg, frozen feature,
// Personal Insight
This is the project that made allotted me the opportunity to fall in love with research! As an avid art lover and creative, I've always had the assumption that this would ... but the impact of research and allowing it to lead my design decisions is so far my favorite aspect of working in the UX field.
IDEATE & DEFINITION
// Persona creation
Though other personas were discovered, due to time constraints, the following was ultimately chosen as it most aligns with goals and scope of this particular project. The persona format is simple but Quinton's frustration's in particular, address features and functions that need to be addressed in the redesign process.
// Information Architecture
Referencing the initial usability testing where users expressed frustration navigating the site led to addressing the primary global menu. This pain point should be alleviated by addressing organization of categories as well as finding a solution to confusion over nomenclature used between support and donate. Card sorting led to the redesign site map featured below.
// User Flow
Following these methods and ensuring that there is an understanding of users pain points - focus was then placed on the user flow. The following showcases a "happy" or expected path with the addition of the volunteer match modal.
PROTOTYPE
// Low Fidelity Wireframes
Each member of the group individually designed the following pages: home, volunteer, and donate. Using a voting system, pages and/or particular elements were voted to be included. These were then combined to create final wireframes for usability testing prior to applying UI. (The following wireframes only showcase my designs.)
// Team Challenge ('struggle' may be a better word)
Challenge : Full transparency moment> This is where my team of wonder women struggled and was quite the learning experience during this project. Color selection can be endless when not focused on the set goals and scope of one's work. Struggling to remove personal bias initially, proved to be a time waster. Luckily, we quickly allowed research and data to lead us instead of personal preference. This coupled with knowing that successfully working with others and focusing on others (users and organization alike) is essentially 90% of our work so we put the pride aside and went on!
// High Fidelity Wireframes
V01. The following is the first version UI attempted as a team. It was quickly decided as a group that some elements, overall color, button designs, and more did not effectively represent the brand.
V02. We ultimately decided on this UI for our redesign proposal. Limited time frame did not allow further exploration - in my opinion, still doesn't quite hit the mark. Though an improvement from the original site, I know the UI can be taken further.
V01
V01
V02
V02
// Usability Testing
++ Mission and impact on homepage received well
++ Donate and hamburger menu were too close (mobile)
++ Users continue to experience confusion with languge. This time donate vs give
++ lnconsistent button styles create confusion; some not understood to be clickable feature
“No research is ever quite complete. It is the glory of a good bit of work that it opens the way for something still better, and this repeatedly leads to its own eclipse.”
-Mervin Gordon
// Projects often have time and scope constraints. While I understand this and have a proven track record of respecting and maintaining such constraints, I also believe the UX process isn't ever truly complete .... so .... following the completion of this project, during maternity leave, I had the time to continue the exploration of our work. Through additional usability testing and competitor analysis, the final version of my design came to fruition.
FINAL OUTCOME
// Apply color + style
// Prototype
As mentioned above, I individually revisted the final UI with a focus placed on choosing elements that reflect approachability, friendliness, with more minimal features and negative space to lessen the overwhelming feel. Those seeking or offering help should feel at ease and be able to complete tasks effortlessly.
WHAT DID I LEARN?
Let the research lead you! When working in a group with multiple opinions it's so great to have facts and research to support your design decisions. Having these insights will also guide the problems that need to be resolved.
Color is a slippery slope. Even now while revisiting the UI of this project, the possibilities are endless so it is really important to set deadlines, brand and mood expectations. Use these coupled with color theory to guide you, by using a particular color - what are you trying to convey to the audience?
Test, test, and test some more. I've learned and am a firm believer in testing often and fast It has been best in my experience not to get so attached and/or spend so much of your time on a design without testing. The insights from users and other designers alike ("fresh eyes") has been crucial.
Color coordination of buttons is imperative. Seamless and effective UI needs to be consistent for users - it's simple. Too many button options and sizes are confusing and the last round of testing proved that we hadn't quite mastered the UI in this aspect. As I revisit, button's color and shape have been changed to reflect problems discovered in the last round of testing.
Research doesn't end. If more time was allotted on this project, I would reach out to stakeholders again for interviews and feedback. I would also A/B test the volunteer match system and donate buttons during the wireframe/low-fidelity stages.
Page updated
Google Sites
Report abuse