Empowering local drag artists.

Werk! is an event management app designed specifically for drag artists to promote upcoming shows in order to increase online visibility, in-person attendance, and income from tipping.

Project Overview

Project Type: Academic - Solo

Duration: 12 weeks (Jan - April 2022)

Role: UX Researcher, UX/UI Designer

Tools: Figma, InVision, Photoshop, Illustrator

Platform: Android

During my UX Design Bootcamp at BrainStation, we were tasked with completing a capstone project over the span of 12 weeks. This project was an end-to-end UX design process that involved designing a digital solution for an identified human-centred problem.

View Prototype

Starting Point & Motivation

Why Drag? As a teen and a young adult, my local drag scene was a safe space where I was able to discover sides of myself that felt celebrated. I found this community at a crucial age that shaped how I now view and interact with the world around me. I felt the need to get a deeper learning about the realities local drag artists face and search for opportunities to help a community that had already helped me in so many other ways.

The Design Process

My process for this design challenge was to leverage a non-linear design-thinking methodology. Through this human-centred approach, the goal was to design a desirable solution that addressed users’ real human needs.

Empathize

Problem Space Discovery

It’s been quite difficult to miss the explosion of drag culture as it broke through mainstream media in the last couple of years. We've seen the careers of many drag artists reach international heights through brand deals, television, and multi-million dollar event appearances.

However, despite drag culture making it into the cultural mainstream, local drag artists have stated that drag has not evolved in terms of financing in the last 20 years and that it is not uncommon for drag artists to juggle multiple day jobs to sustain their drag career.

Secondary Research

During my initial quantitative research phase, I found some enlightening facts about the obstacles that local drag artists must still face to this day.

Bars will pay drag artists between $50 to $250. However, outfits, wigs, and makeup often cost more than a gig's compensation.

Since 2010, the Drag Race TV series has seen a 145% viewership increase. However, local drag financing has not evolved in 20 years.

In order to cover living costs, drag artists often juggle multiple day jobs.

Design Challenge

How might we help drag performers who still perform locally increase their compensation to be in tandem with the rise in social interest in order to make their drag careers more sustainable?

Primary Research

User Interviews & Affinity Map

To better understand the problem space and the affected individuals, I reached out to several drag artists who still perform locally on social media to conduct user interviews. After conducting three 1:1 interviews with drag artists from different cities, using an Affinity Map, I organized the insights gained from my interviews into motivations, behaviors, and pain points.

Key Insights

After synthesizing my interview notes and using an Affinity Map, I identified the following themes and insights.

Income & Tipping: Doing drag is expensive, and living off drag as a career is rarely possible. Tipping is the main way of increasing their income but it is becoming less and less common.

In-person attendance is vital: Getting people into the venues allows drag artists to work and make more money through tips.

Self-promoting: Drag artists rely heavily on social media to promote their upcoming shows and encourage people to come to the venue, but it is oversaturated in drag content which makes it difficult to get any sort of visibility.

Define

Persona

With all the information I gathered from my secondary research and interviews, I synthesized it to develop a persona that would allow me to portray my target user. Having my persona at the core of my design decisions ensured that I always had the user in mind.

Experience Map

After developing my persona, Arabella, I created an Experience Map to get a better understanding of their journey. By defining the stages of their experience as a performing drag artist, I would be able to pinpoint the ideal moments of opportunity where I could intervene with a digital solution.

Where to Intervene?

Since lack of visibility when promoting upcoming shows on social media is the initial pain point in my persona's journey, this was the perfect opportunity to intervene to find a solution that can also alleviate further pain points.

Why here?

Although our persona's main goal is to increase their income through tipping, I realized through mapping their experience that tipping is completely reliant on in-person attendance.

Ideate

Developing a Solution

After identifying key moments where I could intervene, I moved into the “ideation” phase of problem-solving where I began to explore User Stories and Epics to see how users like Arabella might use digital solutions to help them solve the problems they face as local drag artists.

User Stories

I began by authoring 20+ user stories that capture the functional needs of the targeted user. From the user stories, I organized them into 2 distinct epics:

1

Promoting an upcoming live show

2

Digital Tipping

I began by authoring 20+ user stories that capture the functional needs of the targeted user. From the user stories, I organized them into 2 distinct epics:

1. Promoting an upcoming live show
2. Digital Tipping

Solution & Core Epics

Creating digital platform that allows drag artists to create an event to promote their upcoming shows based on their location gives users like my persona the opportunity to greatly target drag fans that are also in their area, giving them the visibility they lose from the boundless content found on social media apps.

This also creates an opportunity to integrate a digital tipping feature that will answer our persona's main goal of increasing their income from in-person attendees.

Task Flow

After I selected the epic of "Promoting an upcoming live show", I created a task flow diagram that would show how Drag Artists can complete their main task of Creating an Event.

Prototype

Concept Sketching

Using pen and paper, I began my preliminary sketching based on my task flow and a UI inspiration board I created, which includes the features and functionalities of creating an event for an upcoming show. I also pulled inspiration from apps with shared functions like Eventbrite, Stubhub, and even Twitch for their tipping and donation features. After various iterations, I refined the best ideas into solution sketches.

Wireframes & Prototype

I was now in a good place to start translating my sketches into mid-fidelity wireframes. Working with greyscale wireframes was a great way to see my digital solution come to life from a functional standpoint, it also allowed me to quickly test and iterate functionality before moving into high-fidelity wireframes.

View Mid-Fi Prototype

Test

Usability Testing

With the initial prototype built, I then conducted 2 rounds of usability testing with 10 different individuals to get feedback in real-time while they completed the 7 tasks necessary to go through the flow of creating an event.

After each round of testing, the feedback and insights from the testers were prioritized using a Design Prioritization Matrix. This allowed me to assess the effort it would take to fix and the value it would bring to the user.

Design Prioritization Matrix

Improving the Designs

By referring to the Prioritization Matrix and evaluating the time constraints I was working with, I tackled the suggested improvements I knew would be the most impactful by weighing the value brought to the user and the effort required to implement them. Luckily, I could implement additional improvements down the line when time wasn’t as much of a constraint.

Change 1:
Create New Event Screen

Problem: Users felt this screen’s header looked empty and were unsure of where they currently were in the app.

Solution: Added a title to clearly let users know what step they are at in their journey to creating a new event.

Change 2:
Tip Jar Feature

Problem: Users were confused about the difference between the “+” icon and the custom icon for Tip Suggestions.

Solution: Removed “custom tip” indicator as this is a default option for event goer only, and has no value to the current user.

Change 3:
Events Screen

Problem: Users were confused about the NetWerk section, the shape of the frames mislead users into thinking those were also an event as opposed to profiles of other performers that work with the user.

Solution: Changed the shape of the frames to show they are different features.

Refine

Brand Development

With testing done and having an improved greyscale prototype, I was ready to bring the design into High-Fidelity by developing and applying a brand and visual identity. When defining the brand identity, I knew it had to reflect the community this product was intended for. Developing a list of words I believe embody my brand came from what I gained from my interviews and research.

To further define my brand’s identity, I’ve also listed comparative adjectives to clarify what my brand aims to be compared to what it does not.

Brand Name Exploration

When exploring brand names, I knew I wanted to incorporate slang that is commonly used in the drag community, but that also reflected the chosen adjectives from the brand identity. After coming up with some potential brand names, I decided on the simple and effective “WERK” as it is synonymous with drag culture. The word by itself has extended to broader use, though its essential meaning is the same: a declaration of support or approval or ambition.

Moodboard

Keeping my brand identity in mind, I crafted my moodboardinto something warm, energetic, and uplifting.

View Moodboard

Brand Colors

It was quite difficult to represent an incredibly diverse community with one color or set of colors, but I decided to extract the hot pink color from my moodboard as this is what is often associated with drag, this also prevents me from veering too far from what is already familiar.

Wordmark Conception

Typographic Inspiration

When exploring typography for my wordmark, I found that a bold sans-serif font was the best font style to match a community of artists that is nothing short of bold and audacious.

Exploratory Sketches

After looking up some inspiration, I quickly sketched some ideas. Some more subtle, some less, but by keeping the identity always in mind and asking for peer feedback, I was able to make an informed decision in the end.

Logo Typeface

As drag isn't always the polished or pristine artform that might be seen in mainstream media, I’ve opted for the Rammetto One / Regular display font as it added a bit more personality through the subtle asymmetry and unevenness of the characters.

Finalized Wordmark

For my finalized wordmark, I added a 3D effect to the chosen typeface to give the final wordmark/logo more depth which I believe better represents the overall lively tone of the brand.

Using the brand colors, I explored a couple of options for app icons, I played with gradients but decided to go for a “less is more” approach as the brand colors are already quite bright and flashy, I went with the solid pink background since the gradient options felt slightly too overwhelming when paired with the already bold display font of the logo.

Color Injection

When I began injecting the brand colors, I quickly noticed how easy it was to go overboard with the vivid colors, so I tried to always keep in mind the 60/30/10 color ratio rule, with the majority of the screen space being filled with a neutral color to support the more vivid brand colors.

Hi-Fi Prototype

After countless hours, multiple iterations, testing, color injection trials, and brand development, I could finally bring my prototype from Mid-Fidelity to Hi-Fidelity and finalize the WERK app.

View Hi-Fi Prototype

Current Events

From the home screen, they can create a new event, see what other events are happening in their area, or even see their NetWerk of artists that also work at their venue.

Creating Event

When users have an upcoming show, they create a new event and input date, time and location to let event goers know when and where to see them.

A Personal Touch

They can describe their event and upload some media to add a personal touch and stand out among the other local performers.

Tip Jar

By enabling a tip jar feature, drag artists no longer need to rely on physical money from tips. Event-goers can now tip through the WERK app if they don’t carry physical money on them.

Post-Ready

After effortlessly inputting all the information, users can see a preview of their event post. Once everything looks good, they’re ready to post!

Success!

Their event is successfully posted and they can see their upcoming event among the other events also happening in their area. No more buried event posts on social media platforms filled with boundless content. They get visibility by appearing only to event goers already in their city.

Looking Ahead

Marketing Website

In order to market WERK! to local drag artists all over and to communicate its value, I created a marketing website for desktop & mobile.

Much like creating the app, I searched for UI inspiration as a starting point and explored some design ideas through sketching. Having previously built a UI library for the app made the design process much more efficient.

Future Thinking

When thinking of ways to expand WERK!, I asked myself “within the drag community, who does this exclude?” Drag has such a diverse spectrum of artists and I believe there’s room for expansion beyond just being a platform for drag artists that perform for live audiences. Adding content creation features and the ability to stream and monetize content could open the door for artists that don’t or can’t perform in person, reinforcing the value of empowering drag artists.

BIGGEST TAKEAWAY

Fail with Confidence

Throughout the entire design process, I’ve had to let things go that didn't work. Going forward with a design decision only to realize it wasn't the right one was terrifying at first, imposter syndrome (or as RuPaul calls it, “your inner saboteur”) was very real in those early weeks. With time, I’ve not only learned that going backwards is just part of the process, but that it opens the door to come up with better solutions that will better benefit the end-user. Having the confidence to scrap an idea and knowing that I’m capable of coming up with something better was freeing and also removed a lot of self-imposed anxiety. I just had to remind myself that there’s always a way to make it work werk!

Other Projects

UX / UI Design | 24h Hackathon

Shopify

Leveraging Shopify's ecosystem to make entrepreneurship more accessible than ever before.

UX Design / Research | Case Study

Patients First

Facilitating communication for non-native-born patients seeking healthcare services through audio recordings and transcripts, ensuring confidence that all their medical needs are being met.

Project Overview EmpathizeDefineIdeatePrototypeTestRefineLooking Ahead