Summary

The LGBT Community website suffered from insufficient content and poor navigation, resulting in low online engagement and ineffective communication between community members and resources, necessitating a redesign

This project entailed a comprehensive overhaul of the main umbrella website and local subsidiaries’ sites. We aimed to create a responsive platform where visitors can effortlessly explore and engage with each other and access LGBT Community resources.

The revamped website retains the essence of the previous platform but enriches it with additional information and interactions.

✨We integrated new features, including a dedicated leadership page, events calendar, and donation portal, leading to increased engagement and participation within the LGBT Community Network, much to our client's satisfaction!

Completed Website Redesign

Starting Point

We commenced our redesign by conducting a heuristic evaluation of the site to identify pain points and opportunities for improvement. We maintained constant communication with our client to understand their specific requests and requirements for the final product.

We condensed our findings into key points that our redesign must address.

Challenges concerning the client’s requests:

-> How can we unite the organization’s vision with the website’s design?

-> How can we enhance the accessibility of the site (umbrella & subsidiaries) and facilitate smoother onboarding for both volunteers and users?

Screenshots of the original website

Fig.1. Original Home/Umbrella Site for the LGBTCN.

Fundamental problems we identified during our evaluation:

• Challenging navigation experience

• Confusing website functionality and user journey

• Difficulty and ambiguity in understanding website content and purpose

Determining Requirements

As part of our process, we completed a CMS comparison chart, audited the existing content inventory, and mapped out user flows to understand what was required to meet both client and user needs.

CMS Chart

The existing website management system had its limitations and was not suitable for simultaneously managing multiple sites. It was also crucial for the client to be able to learn how to manage the website independently with ease so finding the most suitable platform was essential. We guided our client through a CMS (Web Content Management) comparison chart, providing detailed overviews of various CMS options to help them determine which would best suit their needs.

Fig. 2. Narrowed down version of our CMS Comparison Chart

Given WordPress's capabilities to run a multisite network, seamlessly integrate with third-party tools (such as SEO tools), and offer a wide directory of plugins, the team and client decided to transition from Joomla to WordPress.

Inventory Audit

To identify content gaps within the website, our team conducted a Content Inventory Audit to assess redundant and outdated information that needed updating or removal. This audit informed and helped streamline design decisions by highlighting necessary content changes to make.

Fig. 3. Preview of our Content Inventory

User Flow

Following the audit, we mapped out user flows to illustrate changes in the website's navigation, while also showcasing how pages are prioritized based on user and client needs. This allowed us to effectively visualize and ensure consistency in functionality for the main website and individual subsidiary sites.

Fig.11 Site Map

User Research

It was essential for us to interview and survey volunteers to understand their pain-points and user journeys with the current site to determine how a redesign could best address these issues. The team conducted user interviews and surveyed volunteers and first-time users, aiming to gather insights into their experiences with both the network and the website.

Fig. 4. Synthesized user interview board

Fig. 5. Preview of Survey Results

We interviewed five LGBT Community network volunteers and collected feedback from over thirty LGBTQ+ individuals through a survey to gather feedback about the website and identify areas for improvement

Synthesizing insights from our user research, we found 3 main takeaways:

1. Users noted the website wasn’t engaging and felt more like a newsletter

2. Website information needs to be consistently updated, users pointed out how a lot of content was outdated

3. Resources were disorganized and confusing, with users wanting more of an emphasis on local resources

Persona

Based on our research and interviews, the team created proto-personas to further define our target users and how we could best address their needs.

Fig. 7. Example of Personas

Completing the first Redesign

Guided by our research, the team created several sketches for each subsection on the umbrella site, each aimed at reorganizing the layout and content.

Fig. 7. Sketches for the Volunteer Page

Following our sketches, we began developing both low-fidelity and high-fidelity prototypes for several pages, such as the home page, volunteering form, and resources page. Our design emphasized a user-friendly navigation flow and functionality to fulfill the organization's goal of updating visitors with event information & community insights.

Fig.8 Low-fidelity prototyped home page

After receiving feedback from the client, we began prototyping, implementing, and refining each web page. This prototype’s goal was to make it easier for the client to consistently update website information, coupled with improving user access to community resources, all the while ensuring that users remain engaged with the website experience.

Fig.10 First Completed Prototype Redesign: Home Page & Get Invovled

Testing and Iterations

Concluding the development of our first implemented version, The team and I wanted to continue building on the current design of the website by conducting thorough testing. This testing aimed to validate whether or not the redesign met the LGBT Community's objectives and the user needs identified through interviews.

Additionally, we needed to distinguish differences between the umbrella site and the local subsidiaries in order to effectively design for each.

Understanding the differences between the umbrella and subsidiaries

Usability Testing

The team and I carried out usability testing on the updated platform with first-time users who identified as LGBTQ+. First-time users were chosen rather than experienced volunteers due to their lack of knowledge of the previous site.

Our goal was to determine whether or not the redesigned site would truly be more effective and user-friendly for anyone, regardless of their experience with the LGBT Community Network.

Fig.12 Usability testing documentation

Based on our findings and user feedback, we needed to focus on

Emphasizing the organization's goal and intentions

Reorganizing the flow of information on the website to encourage users to learn about events, volunteer, and donate

Improving accessibility and consistency of the text and navigation of the website
• -> Users should be able to quickly navigate between the organization's information, services, and resources

Updated Prototypes

Following our findings from our usability testing and client feedback, we began redeveloping our initial designs. This iteration was aimed at adding more intention to the umbrella site’s purpose in contrast to the local chapter sites. It also prioritized and highlighted client-requested areas such as donations and resources.

👉 Our objective was to ensure a clearer understanding and better engagement with our redesign through evident call to actions and restructuring the flow of information on each web page.

This involved crafting new sketches which were refined into high-fidelity mockups, that would serve as the groundwork for implementation & deployment.

Fig.13 Updated Prototype