Project: Volunteer Project
Timeline: June 2022 - August 2022
Role: User research, UI design, Wireframing, Prototyping, User Testing
Tools: Figma, Miro, Maze, WordPress
Platform: Website
WHCC Website redesign
Overview
Wasatch Hollow Community Council (WHCC) is a 501(c)(3) nonprofit community organization. They regularly meet to discuss issues concerning the safety, character, historical and natural resources within their neighborhood. The council facilitates communication between its members and the government, public and private agencies, and individuals affecting the community.
Problem
WHCC had a cluttered and outdated website that negatively impacted user engagement, donations, and member participation due to poor information hierarchy. Additionally, users had difficulty navigating the website’s pages.
Goal
To redesign an intuitive website,that reflects the nonprofit's mission, and highlights its impact on the user by implementing a clear information hierarchy and improving navigation to provide a seamless user experience.
Impact
Donation increased by 30%
The participation rate increased by 45%.
4/5 visual appeal rating.
Solution.
Event Features: Featuring upcoming events prominently on the homepage by providing detailed information on date, time and location, providing add to calendar option as it sets as a remainder, to increase event participation rates as users find it easier to discover events.
Prominent donation button: To improve the donation rate, placed a clear and compelling call to action (CTA) button on the header and utilized impactful visuals to make it prominent.
Streamline navigation: Revamping the navigation menu by grouping related content together, using concise and descriptive labels.
Intuitive Breadcrumbs: By incorporating breadcrumbs, users will be provided with a visual trail that helps them understand their location within the website's structure.
Streamlined Information Hierarchy and visual redesign: Implemented a well-organized information hierarchy that categorizes content logically and modernize the website's design with a clean and visually appealing layout that minimizes clutter and presents content in an aesthetically pleasing manner.
How I arrived at this solution
Competitive analysis
I conducted a competitive analysis and I began by looking at the websites of several other community councils including Cordova Council, St Anthony park community council, and Longfellow community council.
Snapshots of the websites:
Discoveries
Mission
All the websites have their mission and goals stated. This was an important method to effectively communicate the mission to the user and help them better understand what each community does.
They have a clear visual hierarchy that shows the action that the organization wants the user to take on their site. For example, this could be either to make a donation, to volunteer, or to contact the council.
Clear Visual Hierarchy
Donate button
Donate option is always in the header and highlighted in some way.
All the other websites utilized hero images t communicate the focus of organizations visually including quotes, awards, certifications, etc.
Hero image
Current site analysis
I looked at the current WHCC website to determine their existing areas of focus and what could be improved to address both business and user needs.
So, it’s not surprising that I identified several issues
Poor CTA for the “Donate” button
A lack of information and resources about the community
A lack of information hierarchies
Outdated and congested design
Understanding the client and users
I spoke with stakeholders of WHCC to get information on who the users are, and what their business goals are. I also conducted interviews with the users/general members of the WHCC. My aim for the interviews was to learn more about how the users interact with the website.
Research questions:
1. Why do they visit the WHCC website?
2. What kind of information or features do users want to see on the WHCC website?
3. What do you think of the current website?
Why did the users struggle with the website?
Not able to locate where they are on the website.
Unable to understand the intent of WHCC.
Not sure about the upcoming events.
Why did the board members struggle?
No intuitive and informative website.
No participation within the community.
No donation was received even though the donate button was present on the current website.
Personas
I created two personas of a general member and a board member of the community to reflect the findings from my interviews. They were a great way to reflect on and present the key insights in a tangible way.
Ideate
Based on the insights, HMW is used to frame different questions and then this is used to brainstorm ideas.
HOW MIGHT WE
provide a clear, modern, and concise interface.
provide information about WHCC and locate the current page.
make the donation button more prominent.
make the events/meetings familiar and increase participation.
engage the users on the website.
so that the client will be able to edit, update and have access to their content without the assistance of the designer.
Brainstorming
Information Architecture
My approach to design was to create a sitemap to illustrate the pages I would be redesigning. The sitemap served as a great way to consolidate the proposed navigation.
Design
With all the information, crazy 8’s were used to sketch out some rough ideas and then incorporate the best features into the wireframe. After this, a low-fi wireframe was created and sent to the stakeholders for opinions and any changes.
Low-fidelity wireframes
Concept testing
I utilized Maze for concept testing to determine which features were appropriate.
I have received a total of 9 responses regarding the selection of appropriate images, colors, homepage design, and footer.
78% choose the first footer
56% choose the third homepage
78% said the image would be relevant for the homepage
67% choose the green color for the site
Style guide
The interface was redesigned, with some key changes in fonts and colors.
Color
The stakeholder expressed a desire to use green color for their website, given their proximity to mountains and parks. They preferred to avoid coastal colors. The website already had a green color scheme, but I made a few changes to the green color based on the web contrast checker.
Typography
I used Lora for the heading to give a powerful and welcoming look and used Source Sans Pro for the body as it is designed for a multi-device world and is web-safe font.
Current website
Old website can be seen here: https://new34.wasatchhollowcc.org
Redesign
The hi-fi wireframes were designed to be more clean, interesting.
Homepage
Get involved
Resources
The page will contain all the meeting resources and the oral history project.
Other pages
The hi-fi wireframes were sent to the stakeholders for feedback. The internet services are being donated by Xmission. So there was a requirement from Xmission that their logo has to be there in the footer as well. This has been implemented in the design and can be seen in the prototype.
Prototype
Test
A usability test was conducted using maze “5-second test“ with the same users to understand the first impressions followed by moderated usability testing using a prototype in Figma.
I made the following observations during the test:
It was observed that 7 out of 9 participants identified the correct intent of the website.
It was observed that 8 out of 9 participants recognized the events and meetings.
It was observed that 9 out of 9 participants identified the donate button.
It was observed that 9 out of 9 participants completed the task without any difficulty.
Iteration
During the moderated usability test, I observed that the users were backtracking on the Wasatch Hollow History Project page to view the interviews.
Solution:
I added the previous and next buttons within each page to move to the next page and reduce the number of clicks.
I have implemented the website in WordPress.
The website can be viewed here: https://wasatchhollowcc.org.
Key Learnings
Learned the importance of communication and not being afraid to ask questions.
Learned to be empathetic not only to users but also to stakeholders and understand their needs.
Learned a new tool “Maze“.
See other projects: