Website + Engagement Kit

A case study redesigning website for PRIDEnet - the volunteer and community engagement sector of the PRIDE study.

Overview

Client

PRIDEnet is a national network of individuals and organizations actively engaging their community in every stage of how LGBTQ+ health research is created, analyzed, and shared.  PRIDEnet builds on decades of work by activists, health advocates, and researchers to improve the health and well-being of LGBTQ+ communities.

Role

PRODUCT DESIGNER

Timeline

3.5 months - Initial proposal
2 months - Execution Later

The client is a global pharmaceutical company that is committed to developing new treatments in neuroscience like schizophrenia and major depressive disorder (MDD), bipolar disorder, and other neurological and neuropsychiatric conditions, including Alzheimer disease, epilepsy, attention deficit hyperactive disorder, posttraumatic stress disorder, borderline personality disorder, and autism.

business Goal

PRIDEnet wanted to create a revamped, efficent website that is engaging and informative for users.
PRIDEnet catalyzes LGBTQIA+ health research. They connect community members with ways to participate in research and create opportunities for community input to inform all stages of the research process.

MY SCOPE

As a part of a 4 member team of Product Designers, my area of contribution was:

The Problem

"The existing website has insufficient information, lacks functionality and there is a lot of confusion about the difference between The PRIDE Study & PRIDEnet."

                                                                                                           - Team PRIDEnet

The previous website was minimal, without information resulting in low usability, engagement & lack of all necessary functions. So, we decided to develop an appealing and functional website that would be more user-friendly, informative and increase user trust.

The client is a global pharmaceutical company that is committed to developing new treatments in neuroscience like schizophrenia and major depressive disorder (MDD), bipolar disorder, and other neurological and neuropsychiatric conditions, including Alzheimer disease, epilepsy, attention deficit hyperactive disorder, posttraumatic stress disorder, borderline personality disorder, and autism.

Design Challenge

How can we engage with the LGBTQ+ community for them to participate in healthcare research ?

MY SCOPE

As a part of a 4 member team of Product Designers, my area of contribution was:

The Solution

We re-designed the entire website to include all the information for users to understand what PRIDEnet aspires to do. We introduced a different design system to differentiate from The PRIDE study and included details about transparency and the impact they create on LGBTQ+ healthcare.

We also designed a pop up kit for volunteers to engage with participants and aspiring community members. It would also contain merchandise to motivate volunteers and thank them for their contribution, thereby ensuring improved productivity.

Process - research

Discovery

PRIDEnet is a project of Stanford University school of medicine in partership with the University of California. It is the engaement sector of the PRIDEstudy. We started off by understanding the difference between PRIDEnet and the PRIDE study.

Stakeholder workshop

We hosted a workshop with the stakeholders at PRIDEnet to understand how they defined engagement. We realized that there was a lot of differences within the team about the requirements and how they wanted PRIDEnet showcased.

Interviews

We interviewed more than 14 people - volunteers, community partners and various members to understand their issues n pain points. This helped us understand the actual problem and how the solution lay beyond just redesigning the website. We began working on content and factual details about participation in the study.


The first step in my research was to do primary research to understand the values and mission of PRIDEnet, understanding the nuances and sensitivity needed for research within the LGBTQ+ community.


We started off by hosting a series of meetings and workshops with the PRIDEnet team to understand the difference between PRIDEnet and the PRIDE study. Since the timeline was pretty short, we were trying to understand what the PRIDEnet's team prioritized on needing first.

During this phase, we understood that the main problem was that everyone was not on the same page about the requirements. The way each team member defined engagement was different.

Understanding
Pain Points

Lack of sufficient information

No information about the mission, vision, research and impact. Blog and events hosted by them did not have visibility and hence lacked participation. Any information from new interested volunteers had to be provided manually by team members. Volunteers did not have a platform to lead interested participants to, for them to gather more understanding and get involved.

Difference between The PRIDE study and PRIDEnet.

Most people got confused between  the two websites. They were unaware of the engagement aspect. Engagement process for recruitment of volunteers and participants were needed.

As an NGO, they lacked resources

Swag that was available to help engage with the community during events had to be ordered and tracked manually by the team.The team also had no way to track the engagement effort of ambassadors that were paid by them. They needed a way to support active members.

After having interviews with ambassadors, community partners and volunteers, we mapped out the complete journey that a user goes through from the beginning ( Find the website) to navigating through it, finding inforrmation on how to get involved and eventually becoming a volunteer with PRIDEnet and engaging more people to participate.

Mapping the Journey

Synthesizing Insights

Research is not sufficiently representative of the LGBT community. If we provide people with the information and tools they need to tell their community about current research, then more people will join research and it will better serve the overall community.

How May we help?

We understood that by just re-designing the website, we couldn't ensure better engagement. We had to re-define the entire user experience for the community. And for that we had to all the touchpoints into account. The main decising factor would be bringing users to the website.

Ideation

Opportunities

We identified 3 ways to revamp the entire engagement process

IDENTITY & VISIBILITY - Improving website content-  the purpose, impact that the brand is trying to make, strong association of PRIDEnet with its partners (Stanford)

ENGAGEMENT - Offer incentives, swag etc for volunteers to feel appreciated and help them engage with the community better.

AUTOMATED SYSTEM - Creating a portal for all members on the website to track events, swag shipments and more

1

Identity

We worked on defining commonly searched information that was required. We focused on content design, explaining the brand and what it stands for. We had a little workshop with card sorting exercises to organize this.

  • The first thing was to have information about what PRIDEnet stood for
  • The second was to establish a separate brand identitiy from the PRIDE study
  • Third was to show their mission and the impact they strived to achieve
  • We had to tell the user how they could get involved
  • PRIDEnet had a lot of community building activities that needed to be given visibility

Information Architecture

The next step was to develop the website by providing structure, consistency, and an easy-to-navigate interface. We divided the navigation into 4 categories - Informative Homepage, About us, Research and Get involved. This would help people find the exact information they were looking for.

Low fidelity wireframes

Based on the IA, we fleshed out low fidelity mockups. We had a lot of back and forth session with th PRIDEnet team, gathering information and content and categorizing them.

Hi-fidelity Wireframes

We had a few versions of the final mockups with variations in color, user flow etc to test with our uses.

Highlighted features in the website

Improved content - going context about the brand and what they stand for
Showcasing blogs and related articles

Explaining what they do and why

Integrating their social events so people will be drawn to participate, offering a sense of community building

Explaining what they do and why and showing how they are different from all the other studies

2

We have the website, but how do we draw people's attention towards it? How do we help the community find the website?

Engagement

80% of people knew abou PRIDEnet through word of mouth or swag material at events.
We capitalized on this and created flyers and little postcards as swag that contained QR codes leading to the website

Flyers and cards

Incentives

Most people knew about PRIDEnet through word of mouth or swag material at events handed out to them. Volunteers said it was very tedious for them to keep explaining everything from scratch and more than 90% did not have the attention span to listen completely.

So we came up with some activities that could be used for engagement, gamifying the process by making the interaction more fun!

We designed a Pop-up kit that contains informative Flyers & origami objects with QR codes leading people to the website. The conversation starter cards are to help volunteers engage with the community during events and go hand in hand with swag items. These are meant to help increase engagement and get more volunteers by creating a long lasting impression.

3

Member Dashboard

We introduced a member only section that would reduce the workload for the team. Here, senior volunteers and ambassadors could keep track of all the events, swag shipments and updated with the latest blogs and articles. The entire process would be automated and the PRIDEnet team would not have to manually send out emails.    

Rewriting the journey..

We did a little user journey from start to end to help us connect all the dots and close any gaps or address any concerns that users might feel on the way.

1 - An existing volunteer give out flyers at a yoga studio to create awarees about PRIDEnet  

3- An interested user goes to the website to check out more detailed information

5- The levels of involvement are clearly defined and volunteers know how they can get started

7- This motivates them more. They have an account online
to track all events, and swag tracking activities

2 - The flyer consist of information about PRIDEnet and a QR code that leads to the website 

4- They like the impact and decide to sign up to be volunteer and contribute

6- This volunteer actively engages and grows to become an ambassador who receives the pop up kit

8- They continue to engage and bring more volunteers onboard

Testing and Validation

User Testing

Since the project was completed in 2021, during the pandemic, we had to resort to qualitative, moderated remote user testing with participants, volunteers, ambassadors, and the team. We observed the movements of users, tracking what they were looking for and identifying their flow.

Sample Testing Questions:

• What are your first impressions of the homepage?

• How do you feel about X, Y, Z?

• Are you able to find the information your are looking for?

• Is there anything you need but cannot find?

7 / 8 participants said the new webpage was more engaging and gave them sufficient information they needed to learn about PRIDEnet.

We also did some interviews to test the flyers, pop up kit and other incentives. We tested with  members of the LGBTQ+ community and existing volunteers at PRIDEnet.

We did  A/B testing with ten participants to understand how the users reacted to the color palettes, the flow and navigation.

9 / 10 participants said they were glad we did not propose the usual stereotyped rainbow colors.

We tested with a focus group of the PRIDEnet team- ambassadors and community partners, asking them about daily tasks and what tasks were timeconsuming.

7 / 9 participants said they spent a average of 2 hours daily replying to emails about events and tracking shipments.    

Demographic
LGBTQ+ community members passionate about the wellbeing of their community.

A/B TESTING
We conducted a series of qualitative interviews discussing what our user group thinks about health research and LGBTQ+ health issues. In addition, we conducted immersive testing of the website to determine what information users are looking for, their goals in relationship to PRIDEnet, and how they would navigate the site.

Design System

Our design system aims to help distinguish PRIDEnet from The PRIDE study.
We used colors representing the community without joining the mass of corporate, stereotyped rainbow branding. We incorporated all elements of various touchpoint like Instagram, blogs and PRIDEnet cafe to invoke familiarity and recognition of the brand.

HomepageNext Project

TAKEAWAYS

NEXT PROJECT

Let’s talk

Design & Business,

and Create impact.