It Gets Better
Media Cause is a mission-driven marketing and creative agency that helps nonprofits grow and accelerate their impact.
I joined the agency as a contract UX Designer for their marquee web-dev branding project: a transformative revamp of It Gets Better. This non-profit website serves as a guiding light for queer youth, assisting them in navigating their personal exploration of gender and sexuality with care and understanding.
Overview
🧑🏾💼 My Role: Contract UX Designer
🏃🏾 Duration: 5 months
🧑🏾🤝🧑🏾 Audience: Queer and Questioning Youth ages 13-21
🧑🏾⚕️ Stakeholder Opportunity Statement: It Gets Better’s mission is to uplift, empower, and connect LGBTQ+ youth. When it started, the project was ahead of its time - using online video and “influencer engagement” before it became mainstream. Their ultimate goal is to become one of the most well known, and most used resources for LGBTQ+ youth, not only in the US but across the world.
It Gets Better finds that content is now in abundance online and so they must find ways to stay relevant, unique and impactful. From 2010 till now, the organization has seen a sharp drop in website visitors and engagement metrics.
About This Case Study
Since this is an ongoing campaign, I will keep certain details of the project undisclosed. I really enjoyed working with It Gets Better and Media Cause on this project - on a topic that is near and dear to my heart.
Because design is inherently iterative, any mockup or design assets shown are not final - and in most cases are not reflections of how this re-imagining will occur. I’m excited to see the finished product and direction it goes!
IGB’s mission is to be THE resource for queer and questioning youth, which it was years ago.
But Jacob’s Law is more relevant than ever, especially with the user base IGB wishes to engage.
“Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.”
Video content was a big driver of their engagement online. Along with celebrity and influencer support, but IGB doesn’t host videos, the videos are mostly on YouTube, and having content on external sites can drive traffic away from its own website.
All agencies and companies approach UX in their own unique ways. Company structures, the defining of roles, and development of teams on account ownership all feed off of worker capacity, and when an organization specializes in branding, SEO, and outreach, they may outsource, or contract out development. For this project, they hired a great Director of Web Development.
My role in this project was simply to bring UX tools and activities to the table - and assist with scoping and ideation. However, since all of my co-workers on this project were working with multiple clients, it was tricky to coordinate according to all capacities as an outside contractor. Working within these constraints gave me insight into the organization and allowed me to scale operations up or down according to stakeholder needs.
My Contributions
-
Card Sort for Menu Organization
-
Persona Development to Empathize
-
User Feedback from Student Workshop
-
Wireframing around MVPs
-
Comparing Features on the Internet
Who To Design For?
This topic in particular required designers to empathize with their users. A journey through one’s own sexuality and gender identity is a journey that can be very harrowing, it can evoke powerful reactions and realizations, it also often needs to be kept private. Creating a persona can help designers and stakeholders keep a user in mind. Using existing user research the small Media Cause design team worked through the needs and desires of Beck.
For this project where the designers may not have had the same experiences or are of an older age cohort. Walking through the steps to self discovery as Beck was particularly helpful. As was reported by the user research, one of the first steps we found ourselves taking was using Google to search “Am I gay? “ which prompted a whole host of quizzes and decentralized infographics. Any material we did see that seemed to wish to be informative was catered towards gay men - which is not the only way Gen-z use the word “ gay” in 2023. Which is why Beck isn’t assigned a gender or sexuality as a persona.
It is also clear from research that this demographic primarily uses mobile devices to scour the web, therefore our solution must be Mobile First.
More on Beck
-
Beck wants to feel confident in their identity.
-
Finding a community to belong to and feel accepted in
Creating meaningful relationships
Understanding themselves
Communicating their experiences to love ones
-
Feeling understood and comfortable in their identity and where they are in their journey
Having a resource to turn to in their exploration of queer identities
Wanting a variety of stories to relate to and connect with
-
When looking for LGBTQ+ the internet is too vast — the number of resources is overwhelming
Learning resources are not all in one place and articles or Wikipedia can be too dry
Exploring needs to feel safe from a privacy perspective and safe from an emotional perspective
Organization is Key
An early look at the website determined that content organization was a part of the pain points for IGB. Often new content and announcements were all categorized under “Blog”. Videos from many years prior that may not reflect current opinions or production value were still showing on the website, and the baskets of categories on navigation did not make intuitive sense to users. Because it wasn't clear what the website’s primary use was at first glance, many visitors stopped by the “About Section” and ended their journey there- according to HotJar, a tool that gives website insights analytics tools can't track—things like hesitations, U-turns, and scrolls that don't lead to clicks by recording sessions and site visits.
Every greater category was made into a card - and I had the opportunity to visit the Director of Copy + Content at the office in person to sort these cards into categories. We did the sorting twice according to logic and how things should be grouped according to word associations but a third time as our user - Beck, keeping only the things a young person would care about.
This particular task is difficult to express to the clients, as they view most of the pieces of the website as important. But the site, over the years, had become unruly and difficult to navigate. But, putting all of the Global and Event content in a hamburger menu or footer may feel like deprioritizing those initiatives for the org. Either way, simplicity is key and content organization should be where users expect them to be, and keeping that in mind in the design can help guide the process.
Here is the minimalistic version our team envisioned to be catered to Beck:
Let’s Learn from Others
I scoured the web for screenshots of organizations similar to IGB but also with functionalities similar to IGB’s mission. An MVP centered approach was taken to sort these websites. Some MVP’s were clearer than others, so I often focused on a site’s central feature - as evidenced by a clear call-to-action.
I added web, video and cloud details to my comparatives and competitives sheet to make things easier for one of Media Cause’s newest developers that was picked up for this project
Browse Content
Since IGB wanted users to spend time on their website, websites that are geared towards browsing and sifting through articles were put in this category.
This can be seen in news websites where users can tap in and out of different articles, like the Center for American Progress that hosts articles, videos, and opinion blogs
Websites like Trippin also prioritized browsing capabilities, geared towards young adults, it is a travel website that guides you to local attractions
Video Play
Websites with this MVP often guide users into video rabbit holes
Capabilities Like TikTok and Reels are beyond IGB’s scope of production
There may be a financial constraint when it comes to hosting video or audio content & the majority of the content IGB has is already hosted on YouTube, often uploaded by several users.
TED & 99 Percent are websites that center viewing video & audio content - TED’s website has a video player but the website hosts its videos on YouTube.
Search for Information
The user may be primarily coming to IGB with questions
The site’s glossary is already one of its most popular pages, so centering the site around searching could make sense as IGB is associated with education through the popularity of its glossary
This would require very intricate tagging and grouping of videos, blogs, definitions and articles in the page
Answers.com and ask.com are good examples of this type of website
Walk Through a Guided Journey
Guided pathway websites can be a unique way to do introspection on the internet.
This model is based around being very concise and communicative - encouraging the user to go down specific paths
The risk of this is that set paths can feel restrictive and our user may feel guided into a box or label before they are comfortable
The infamous “Are you gay” quizzes online were mentioned, and as most youths partake in these online for fun, the IGB website may need to be more mindful of leading young people in a direction
The Process takes you on a semi-guided journey of human-centered design, and Understood guides users through neurodivergence by utilizing a very minimalist guided aesthetic
Student Workshop
For this project we had the unique opportunity to host an hour long workshop with design students at UC Berkeley via the Fung Fellowship. These students from various academic tracks are learning how to apply design thinking to solve real life problems, and they were smack dab in the middle of our user demographic. I created a brainstorming activity designed to give students space to explore the questions and give open-ended responses centering their experiences online with self discovery.
The students were given a brief outlining It Gets Better’s mission and problem statement:
The Brief
The Activity
The students were given this brainstorming task.
They split into three groups to discuss among themselves
After 5 minutes the group spokesperson shared their thoughts and summarized their discussions for the class:
Interesting Insights
-
TikTok
Pros:
“People trust it, because it's personal”
Its catered to you/youth and can make you feel included
The algorithm knows how to cater to you
Cons:
“ It can be overwhelming”
The content scope is narrow and you don’t get to pick it
There can be a lot of labels and you may want to pick one out of a fear of missing out
-
Porn
Pros:
We can find hyper-specific things using really good filters and tags
Easy to navigate
Can normalize a lot of desires that you thought was not “normal”
Sex education all together in a place where they can learn more. “It's important to have that visibility.”
Cons:
“Is made for hetero folks”
It shows up on Google and the user may not know what information is being stored.
A student asks “How can we make porn accessible and safe and comfortable and visible but not feel taboo?”
-
Reddit
Pros:
The anonymity can be freeing
High level of specificity, and ability to read other people’s experiences (vs. articles)
Good for medical advice and people’s experiences, a student can read what it's like to be 6 months on T and can use Reddit for medical advice - like what happens as a reaction to the injection - The student didn’t reach out to a doctor, they went to Reddit.
Trusted - it’s like mini-case studies. “It threads the needle of depersonalization, but it makes you want to share.”
We love a forum it can lead to reading things quickly and skimming for highlights
You can enjoy a hyper-specific community
DM’ing strangers isn't seen as weird
Cons:
The anonymity can reduce the feeling of community.
Unregulated, unfiltered, uncensored, unmoderated, although some boards are moderated nicely and it feels safer
You can’t protect people from bad advice
Wireframe Sketches
Based on Client Needs to prioritize storytelling, trust, and engagement three approaches were taken to design layouts for a central action to associate with the website.
Privacy assurances are an important part of the experiene
There were three approaches to wireframing around site MVP’s PLAY VIDEO, ASK, or EXPERIENCE
PLAY A VIDEO
Formatted more like a video sharing and playlisting site - this layout really centers the stories, especially in video format - but would allow the user to explore via content their preferred avenue - such as reading or listening.
Pros
very modern and youths are used to this format
video’s can remain hosted on youtube but the site can skin itself to be a video player - similar to the TED website
Cons
there is an unwritten expectation of new video content rolling out often
Is associated with user-generated content and IGB does not have deep moderating capabilities to facilitate this
videos may exist on youtube and this may lead the user away from the site
ASK QUESTIONS
This view puts discovery at the center - the user can go on their own trail - unique to their own interests and curiosities
Pros
Super catered to being trusted and reliable in a user’s search for information
Can be super catered to areas areas of interest of the person on the site
Cons
Can potentially be difficult to make sure users discover more areas of the site outside of their point of interest
EXPERIENCE A GUIDE
Like the guided experiences in the sites that are walking you through a ADHD diagnosis or vocabulary around abuse in Prevint, this would be a conversational approach that feels like following an older sibling guiding you to a path
Pros
IGB’s commitment to privacy and safeness can be front and center
the potential to be very immersive and unique
Cons
the scope is narrow and the experience could feel less explorative
IGB has to be very careful not to lead users into a box where they may not feel comfortable
Privacy
Privacy assurances are an important part of the experience. A lot of websites used your cookies to sell you merchandise or more content and this can be a particularly harrowing experience if your household values do not align with your identity.
The use of a safe exit button may be a good way to help a user quickly back out of a page if needed. Here are some examples:
It is also important to know that users may prefer to read over watch a video that could play audio inadvertently into a room via speakers - and this needed to be taken into consideration in the design.
Potential Mockup
What I Learned & Next Steps
My takeaway from this experience is that UX lives in different departments in different organizations. I was familiar with a product development centric UX role but not a design agency role where UX lives in the creative department.
There was a bit of UX Evangelism to this role but, what is also true in a practical sense for Media Cause is that sometimes it’s better to just have something designed out to get feedback from a client - so that you do not get too far into the design process & have buy in on each of the steps.
I think the importance of an MVP centric approach can help in situations like this. Having a central function for users to engage with and use to navigate intuitively could assist in making the site a memorable experience. There is also a reality in which increased time on a website may not be a modern KPI metric to hang success on. Maybe the modern internet is about number of clicks - number of mentions and brand recognition.
The old internet was different, when you used to go to websites like gurl.com, and there were a lot of pages and features to explore. You could end up playing mini games. You can end up creating an HTML webpage for your Neopet. You could read articles and blogs and also then just end up kind of spending time on a random website for all these different reasons, but I think that because of websites like Facebook, Instagram, TikTok, YouTube, Twitter and Reddit a lot of those functionalities that used to be all on several cool website are in parts specialized by “The Main Websites”.
The art director of this project and I were waxing poetic about old internet sites like “Stumble Upon”. Millennials are wondering how to waste time on the internet the way we used to.
It Gets Better was very useful for teens to stumble upon because another part of this journey and based on our conversation at Berkley there is a place for it still- because right now the journey is piecemeal from various sources, that assume various things and all with advertisement as their main revenue generation.
Privacy assurances and the emergency exit buttons are assuring features that nonprofits can put thought into especially for the youth to protect them and function as an older sibling or friend that can assure them that no matter how confusing things seem - It Gets Better.
