Nonprofit Website Redesign
My Role
Duration
My Contributions
Information Architecture
UX/UI Design
Usability Testing
Responsive Website Design
The Team
Daphne, Product Designer
Helen, Product Designer
Anoushka, Product Designer
Faizon, Software Developer
Danielle, Project Manager
Sam, Industry Mentor
Overview
Gateway Regional Council (GRC) is a nonprofit organization (501(c)3) that supports leaders and nonprofits by providing the necessary financial or physical resources to help them achieve their goals. They primarily assist underrepresented and vulnerable communities, specifically the African American and LGBTQ communities.
Through Develop for Good, my team redesigned GRC's website as an informational hub for the public to learn about the organization, featuring calls-to-action for volunteers and providing resources for individuals in need.
background
Building an online presence
Gateway Regional Council had a client base established through word-of-mouth and existing relationships. However, they wanted to enhance their online presence to attract donors and offer resources for those in need. Developed by staff members, their existing website was still a work-in-progress and required additional content. They were uncertain about which content would generate interest and how their current content was perceived by the public.
research
Understanding the client and users
Throughout the project, we met with GRC twice a week to discuss project updates. In these meetings, we regularly discussed their needs as an organization and the needs of their target audience.
In addition, I conducted 5 user interviews to learn more about the target audience. I asked participants about their experience with nonprofits and engaged them in a usability test of the existing GRC website. View the full research debrief here.
Key findings:
- Participants will volunteer and donate to organizations that generate positive impact on the communities they serve.
- Participants want specific details on GRC’s focus areas and programs.
- Participants interact with organizations through social media and are spurred by current events to take action.
I synthesized the findings into a slide deck, showcasing examples that illustrated how they translate to design decisions. Backed by the research, the GRC team was receptive and enthusiastic about the upcoming stages of the project.
“Users are looking for GRC’s impact. We can show concrete metrics that prove GRC’s impact, similar to Project Home’s impact section on its home page.”
Seeking opportunities in the journey
To further empathize with the user and visualize the stages in which users engage with the future website, I created a customer journey map out of sticky notes. I evaluated what the user may be thinking and feeling based on my research and brainstormed ideas to address areas of confusion.
Ideas from journey mapping:
- Testimonial section provides emotional impact and add to GRC’s credibility. Users want to hear directly from those in need.
- Focus areas page addresses users’ concerns about GRC’s involvement and scope of work in these broad focus areas.
- Contact page details the overall process of getting assistance from GRC to prime users’ expectations.
Information Architecture
Structuring the website
I created a site map to visualize how the website can be structured for the customer journey and to incorporate the ideas mentioned above. After team feedback and client approval, our developers used this site map to begin constructing the overall structure of the site while waiting on the final designs.
To present this to the GRC team, we consolidated the journey map and site map into a "sticky site map" - a detailed site map with sticky notes explaining key insights and ideas. We wanted a visual that summarized our work without being too granular; it was a great way to show our findings. View the "sticky" site map here.
Wireframing
Dot-voting initial layouts
To ideate as much as possible, each designer created low- to mid-fidelity wireframes of 4 key pages. Afterwards, we dot-voted as a team (inspired by the book Sprint by Jake Knapp) to reach a consensus on which aspects of the wireframes to move forward with.
Here are excerpts of my wireframes with feedback and comments left from teammates.
Bringing designs to high-fidelity
After divvying up the screens between the designers, I took over the design of the landing page (including main navigation and footer), news page, focus areas page, and the donation page flow. Here's the high-fidelity mockups of these pages.
Keep it consistent with a UI kit
I designed a UI kit containing essential design elements to maintain consistency in high-fidelity mockups across designers. This kit served as a reference for everyone involved, ensuring uniformity. The kit was also helpful to developers as they began implementing on Wix. View the full UI Kit here.
Responsive design
Thinking through mobile layouts
Based on insights from user interviews, we knew that responsiveness was crucial to the website. After completing the design of each desktop screen, we considered how the design would adapt for mobile and evaluated the pros and cons of different options.
I brainstormed two options for the Our Mission section of the landing page on mobile. The focus areas could be implemented in a horizontal scroll layout or a condensed vertical scroll layout. We chose the latter option for the following reasons:
Challenges for accessibility; may be disorienting
Uncertain if this can be implemented on Wix
The styling of the cards is more consistent with that of the cards in the desktop view
Easier to see all of the focus areas at a glance and choose between them
Definitely feasible on Wix
Users are more familiar with vertical scrolling than horizontal scrolling
Challenges for accessibility; may be disorienting
Uncertain if this can be implemented on Wix
The styling of the cards is more consistent with that of the cards in the desktop view
Easier to see all of the focus areas at a glance and choose between them
Definitely feasible on Wix
Users are more familiar with vertical scrolling than horizontal scrolling
Prototype & Testing
Testing under time constraint
In the week leading up to the project deadline, I led the usability testing effort to get feedback on our designs even though we were crunched for time. I created a usability testing plan outlining the test objectives and procedures. After this plan was vetted by GRC, we created a prototype to test with users.
Despite only having two participants that were available on short notice, we were still able to get plenty of helpful insights.
Key findings:
- GRC’s full name (Gateway Regional Council) isn’t listed anywhere on the new website - new users would struggle to know what “GRC” stands for.
- Under the Partner Resources page, participants were uncertain that the posts would link out to external sites.
- Users struggled finding the Events tab through the navigation bar, so they tried to look for upcoming events in the News tab instead.
Since we didn’t have enough time to implement any design changes in response to the test findings, we created a report for GRC documenting the findings and suggesting potential next steps. View the usability testing conclusions here.
Design iteration
Iterating on user feedback
Even though we didn’t get to iterate on the design as a team, I wanted to take a shot at iterating on my own after the project officially ended. Here’s what I did:
- Added GRC’s full name beneath the logomark on the navigation bar, so it is visible across all pages of the site
- Introduced Programs and Events onto the top-level navigation for visibility
- Redesigned layout of the articles on the resources page based on design patterns of news aggregation sites, such as including the news source and the date of the article.
Final prototype
Here's the final prototype of the updated website including my independent revisions after the official end of the project.
Conclusion
Key takeaways
I’ve gained both technical and communication skills from working in a cross-functional team and interacting with a client. I learned a lot!
- When presenting information to your client, consider what presentation method(s) would be the most effective. When possible, bring examples of design patterns or layouts from other websites. This communicates way more than just explaining something in words.
- Good design isn’t accomplished on the first try. We iterated on our webpages multiple times, each iteration getting better with feedback from other team members and GRC staff. We regularly shared constructive feedback.
- Running a small usability test is better than having no feedback at all. Since we rushed usability testing at the end of the project, we were concerned that we wouldn’t have enough participants to collect meaningful data. Despite having only two testers, we collected a wealth of information to further improve the site.
In June 2022, we successfully completed the redesign and handed it over to the GRC staff - check it out here! It was a rewarding experience to contribute to GRC's mission of supporting underserved and underrepresented communities. They now manage the website independently, and subsequent updates have not been undertaken by our team.
