Throughout the redesign, we primarily catered to the needs of the Alliance members ( local service providers that supported the mental and sexual health of the GBTQ2S+ people in Ontario). They needed a user-friendly information tool, that they could use every day to get the latest information for their community.

Our secondary focus was on the needs of the public (any GBTQ2S+ folks, researchers, and others who needed more information and support). They needed a trustworthy, and judgement-free platform that answers immediate questions about HIV and AIDS, and also provides a point of connection to other communities and resources.

An information hub that serves as a tool for the service providers and a helpful guide for the community members.

My role

Research | Wireframing | Visual Language| User Interactions | Quality Assurance ( QA) lead.

My team

Kirk Klein ( Creative director)
Liza Rubstain ( Project Manager)
Darya Andriyenko ( UX/UI Designer)

Tools Used

Sketch | Photoshop | Illustrator

Type and timeline

Website redesign
July 2021- December 2021

Understanding the target audience

Qualitative Research | Personas

We began our process of the hub redesign by interviewing both the stakeholders (6 people who run the GMSH) along with conducting 2 user group interviews with 6-8 alliance members in each group.
Here are some key findings:

Alliance members have a very difficult time navigating the current GMSH hub, due to its difficult information architecture. They wished for a bookmarkable website/ information tool that housed the latest resources, news, publications, and webinars on the topic of GBTQ2S+ sexual health.
The stakeholders mentioned the importance of GMSH having a public-facing side that can provide immediate information and resources to the members of their community. The new hub needs to be positioned as a trustworthy, sex-positive and inclusive leader in Ontario.

Stakeholder Interviews

“The current site barely serves a purpose for our team, let alone the alliance members. There’s an unclear purpose, unclear calls to action, and it doesn’t have a particular function.”

- GMSH stakeholder

Key findings:

Resources for both the Alliance and the community.The new hub needs to better support the alliance as well as the rest of the public (researchers, community members, etc). It needs to serve as a repository of research, publications, events, training material, development opportunities, visual assets and more.
‍
Clear Positioning
Communicate the values and goals of the GMSH with more clarity in intention.
‍
Ease of website maintenance and management.
Seeing as there is a large staff turnover rate, the back end of the website should be easy to manage and maintain by anyone new to the GMSH team.

Alliance Member Interviews

“We want GMSH.ca to be the place for queer men to come and find what they need. If we can’t find it, then they can’t find it.”

Alliance member

Key findings:
‍

A better user experience
With a very large and complex navigation system and an unorganized list of resources, it is very easy to get lost in the current GMSH hub. The site is filled with dead ends, and missing links, along with extra features that don’t seem to benefit the users.
‍
More inclusivity
The current hub does not show its inclusive side with a lack of acknowledgement and visual representation of Trans men, and BIPOC individuals. It does not visually represent the people that it serves.
‍
Accurate and timely information
The alliance members wished that the GMSH hub would be their first go-to for getting clear and frequent updates on important topics regarding its community. It needs to be a bookmarkable information tool with the latest information on emerging, treatment options, resources, and publications for HIV and Aids.
Webinar archive
Great information gets shared in the webinar chat logs, during the monthly alliance webinars. However, this chat conversation doesn’t show up in the published webinar recording. As a result, the members urged us to incorporate a dedicated archive space where it is easy to keep track not only of the webinar itself but also some key highlights of the conversations and resources that got shared in the chat.
Staff Directory
The alliance members talked about the difficulty of getting in touch with other alliance members and facilitating new partnerships throughout the province. They explained that an updated list of all active members with their current emails positions and other contact info would be ideal.

Defining Problems and Objectives

After gaining an understanding of the user group and the stakeholder needs, we’ve distilled them into three main problems that the new GMSH hub must address in the re-design.

Improve User Experience

The current website lacks an intuitive and user-friendly structure.

Better Positioning the GMSH

The current GMSH site lacks inclusive and clear messaging and prevents them from clearly positioning themselves in front of their community.

Improve Hub Maintenance

Currently, it is difficult to maintain and update the website for our clients.

Establishing a new website structure

Website Architecture | Wireframing

After aligning on key objectives, I began the process of developing new website architecture and wireframes. I would work closely with the stakeholders, developers, and creative leads to make sure that all the goals were met and the website would be realistic to build within the proposed time and budget.

The new GMSH hub would now have two sides, catering to the public and the Alliance members. The public side would provide helpful and easy-to-understand information, and have a point of contact for more resources. The Alliance side is log-in protected and only for the Alliance members. It would provide all available resources, information, community contacts that the GMSH had to offer.

Structure for the Alliance

The hub for the alliance had to include access to both public and private information. It had to be an intuitive and bookmarkable experience.
‍
Key Features:

Alliance Member Dashboard
The Dashboard would act as a bookmarkable page for the alliance to get the latest news publications, resources, community events, alliance directory and campaigns. This page acts as a separate point of navigation for the members allowing them to access more resources than what is available to the public.
‍
Read/Unread StateFor the members to know which articles they’ve read and have not read, we’ve included a read/unread state that highlights articles that they have not interacted with (clicked on). These analytics would also be a helpful tool for the GMSH clients to know which resources/ topics are being interacted with more than others.
‍
Resources By TopicResources by topic is a page that pulls together all relevant resources that are tagged in the back end with that topic name. It allows the GMSH to create useful repositories of research, publications, events, training material, development opportunities, and visual assets for the alliance to use.
‍
Alliance Directory
This is a list of alliance members who work for various alliance organizations in Ontario and their contact information for future collaborations. This is very useful especially for new alliance members, seeing as they often don't know who to reach out to for specific inquiries.

A wireframe breakdown of the Alliance Member Dashboard and its relationship to all the other Alliance member pages on the website.

Structure for the Public

The public-facing site has to communicate and position the GMSH as leaders of HIV and Aids resources for queer men in Ontario. It also needs to provide easy access for GMSH news, publications and resources and various campaigns that the GMSH has put out previously.

wireframes of the public side of the GMSH. The wireframes include "who we are", "our team", "work with us", "news", "Publications & Resources", "Campaigns", and "contact us" pages.

The sign-up process was an important element to figure out, seeing as the GMSH would only want the Alliance members to have access to the Alliance information. There are about 40 members in total and the turnover rate is very high.

We proposed a flow that encouraged the members without an account to submit a request form, that would eventually get approved by one of the GMSH representatives. After this, the members would get an email back that asks them to complete their account and profile set up.

Although this process puts more work on the GMSH to check and approve each new request. The GMSH is eager to do the sign-up process this way, to maintain a safe environment for its members.

Information Architecture Summary

Creating a New Visual Impact

Style Guide

To reposition the GMSH as inclusive, modern, and informative leaders of their community, we had to completely revise the current website's visual language. It was important that the new website would include a unique and modern visual treatment, with inclusive photography, and would highlight the new architecture and wireframes.

We did lots of style tile ideations to create a new, bold and exciting look, that is sex-positive, fun, knowledgeable, and represents the community.

Before the Redesign

New Style Tile Explorations

style tile explorations that i did prior to proposing the final look.

The new GMSH Hub

The Solution

The newly redesigned GMSH hub is a user-friendly website that provides information on sexual health HIV and AIDs to service providers working in the Alliance and the different folks within the GBTQ2S+ community in Ontario. The redesign accomplished the objectives of being user-friendly, communicating GMSH’s positioning more effectively, and being much easier to maintain in the back end.

‍

Lessons Learned

This project was one of my biggest website designs yet, from which I’ve learned lots.
This was the first time I’ve conducted focus group interviews and learned a lot about steering the conversation while having all voices heard.

I’ve also had to improve my abilities to present new wireframes and research to stakeholders. It was a balancing game of not overwhelming them too much with the details, but also involving them in every step of the process.

Lastly, I’ve had the chance to develop a strong bond with the developers on the project. Learning tons about the capabilities of what was possible to build within the time frame, also getting the best advice on the topic of accessibility.

‍

Solution at a glance

Information Architecture Summary

Before the Redesign

New Style Tile Explorations