Website Redesign Case study

Website Redesign

OutLoud North Bay's website redesign was a mission-driven project, aimed at creating a space that truly reflected the organization’s inclusive spirit. This case study explores how our team reimagined the site to better serve the needs of the community, making it intuitive, engaging, and supportive. From user-centered research to prototyping and testing, every step was crafted to ensure the new website would feel welcoming, inspiring, and easy to navigate for every visitor.

Team size: 4
My responsibilities:

User research, content strategy, wireframing, prototyping, and testing. UI Design

Scope

Project length: 5 weeks
Broad redesign, including content overhaul, visual updates, and navigation updates. Minor adjustments were made to after feedback from user testing.

Tools used

Design and Prototyping: Figma
User Research: Surveys, interviews
Project Management: Trello, Slack

Empathize: Getting to know the user

We centered our design around Emily, a representation of OutLoud’s typical visitor—a community member looking for resources, support, and ways to get involved. Through user research, we listened to people like Emily, gathering insights on what worked, what didn’t, and how they felt about using the current website. This empathy-driven approach was essential to understanding user needs and challenges.

Surveys and User interviews results reveal a community eager for accessible mental health support and safe spaces. A significant 78.9% believe counseling could enhance their quality of life, while half value educational workshops and environments where they feel secure and understood.
For the 2SLGBTQ+ community, representation matters. With 36.8% identifying as 2SLGBTQ+, many prioritize inclusive language (71.4%) and opportunities for social connection (68.6%). They seek not just resources but a place where they feel seen and respected.

Feedback on the OUTLoud North Bay website shows strengths and growth areas. While 36.1% rated usability as neutral, there's a clear need to improve donation access and event information visibility. Nearly half (47.4%) of users reported not engaging with services, highlighting gaps in outreach. Overall, while the website is navigable, there’s an opportunity to better meet the community’s unique needs.

Define: Pinpoint the Design Challenge

Our key insight was simple: users needed a site that was intuitive and supportive. The existing site layout and content structure made it hard to navigate, so we focused on clarity and ease. The goal was to improve the experience by creating a space that feels safe, welcoming, and easy to explore.

Problem Statement

"As a 2SLGBTQ+ individual, I want to easily find mental health support and safe social spaces to improve my emotional well-being and connect with a supportive community.
However, OUTLoud’s website lacks a clear layout and prominent display of these resources, making it difficult to engage with the services I need.

Next, we tackled the content. We imagined Emily looking for specific information on the website—maybe she wanted to learn more about OutLoud’s mission or find details about how to donate. The current site had too much clutter, and sometimes the important information was buried under irrelevant or outdated content.

So, we took a deep dive into everything on the website, conducting a thorough inventory. We asked ourselves: “Does this content help Emily achieve her goals?” If the answer was no, it was time to either cut it or simplify it. We refined the content so that every piece speaks directly to Emily’s needs.

Prototype: Building the Vision

We brainstormed ways to make the website feel engaging and streamlined. From simplified navigation to visible calls to action, we worked on prioritizing features that would improve the user journey. Our main objective was to highlight OutLoud’s mission and simplify the donation and participation processes.

Once the structure was in place, we moved on to designing how the website would look and function. Using wireframes, we focused on the key areas of interaction for Emily. We refined the navigation bar, making sure Emily could easily find what she needed.

But we didn’t stop there. We knew that to get the best results for Emily, we needed data. That’s why we conducted A/B tests, presenting different versions of key pages to users like Emily. One version might have a larger, more prominent donation button, while another emphasized informational content.
Through testing, we were able to see which design elements resonated most with Emily and her peers. We used this data to fine-tune the website, ensuring it was not only visually appealing but also optimized for Emily’s needs, making it easier for her to engage and support OutLoud’s mission.

A/B Test Results

11 User tests

“Is very straight forward and easy to access. It catches the readers attention and it’s engaging.”

Control A
Average time to donate was 22.75 seconds
Variation B
Average time to donate was 5.75 seconds

3.95 X
Faster

Test: Fine-Tuning with Real Users

Through A/B testing and usability tests, we gathered direct feedback, refining features based on user insights. Users noted that the redesigned navigation and content structure made it much easier to find information, and a prominent donation button increased donation engagement. Key improvements included:

Moving the search bar to the top for quick access
Adding a background color to the hero text for readability These changes made navigating the site a faster, smoother experience, boosting user satisfaction.

Conclusion and Takeaways

The redesign of the OutLoud North Bay website was not just about improving a digital platform; it was about creating a welcoming space for community members like Emily to find support and connection. This project reinforced the importance of empathy in design, as understanding user needs through interviews and surveys allowed us to craft solutions that truly resonate with the community.

Collaboration played a crucial role in our success, as working closely with our team and OutLoud stakeholders led to innovative ideas and ensured the final product aligned with the organization’s mission. The iterative nature of the design process highlighted the value of flexibility and adaptability; insights from A/B testing and usability testing enabled us to make data-driven decisions that enhanced user engagement.

Ultimately, this project served as a reminder of our commitment to creating spaces that empower individuals and foster community connection. The redesigned OutLoud North Bay website is a testament to user-centered design, ensuring that every visitor can navigate the site easily, find the information they need, and feel inspired to get involved. We are excited to see how this new platform enhances user experiences and supports OutLoud's mission within the community.

Next Case Study