DILLON KEISTER
Queer in the Midwest
Client
Writer & Podcast Host
Location
Columbus, OH, USA
Year
2020
Project Length
2 weeks
A social community podcast app.
A standalone podcast app for mobile, designed through a simulated GV-style sprint for one program's fanbase to listen in and find community with each other through gamified social interactions.
Tools: Figma, Google Suite, Adobe Photoshop, Zoom
Prologue: The GV Design Sprint
Designer Jake Knapp created the five-day design sprint while working at Google, perfected it supporting start-ups with Google Ventures, wrote a book about it, and now travels all over the world facilitating this intensive one-week design thinking process. This very short-form design technique helps get you real-world feedback fast so you aren’t wasting time, money, or resources on ideas that won’t go anywhere. It works for all kinds of development, to both narrow down huge broad ideas in the beginning of creating a new product or to test out tiny detail changes for an existing product. For the scope of this project, I completed this process just once and on my team of one, I gave myself about ten days instead of five to check in with my client.
The Challenge
My client Celia Blundo is in the midst of many life changes, including being a newly out lesbian who just moved back to Ohio after five years working in film in Los Angeles. She is laying the foundation for a new podcast, working title “Queer in the Midwest,” and she wants an accompanying mobile app with a focus on building a sense of comradery among the podcast’s listeners and letting them feel like they are seen, recognized, and a part of a larger Midwestern LGBTQ+ community.
Roles
Lead UX Designer (research, interaction design, visual design). With feedback from my client, my mentors at Thinkful, and real members of our target audience of LGBTQ+ Midwesterners, I orchestrated the entire project, from generative research through usability testing.
Scope
Design a mobile podcast app through the GV sprint process that includes an audio play state and an innovative social feature to connect listeners to the podcast's fanbase. Our constraints included a very short timeline and no research or design budget.
Deliverables
Podcast listener surveys
Competitive analysis
Personas & proto-personas
Empathy maps
User flows & user stories
Storyboards
Wireframes
Paper prototype
Branding & style guide
High-fidelity prototypes
Stakeholder presentation
Research & Discovery
Interviewing my client, she saw her target audience as people not unlike herself: creative LGBTQ+ millennials with Midwestern experience seeking community and a way to unwind. Much of existing queer media focuses on the violence and pain LGBTQ+ people experience as members of oppressed populations, and Celia wants to celebrate their joys and loves instead.
​
I conducted an online survey with Google Forms to more strongly define our target audience with data. Sourced from social media, 31 regular podcast listeners self-reported their listening habits and preferences. More specific questions were asked of our target audience of LGBTQ+ Midwesterners to better pin down our persona driving the design forward.
Because the podcast is in a developmental stage, I collected data both relevant to my app design and to her show design, including information about LGBTQ+ participants' online dating habits, a show idea Celia had been toying with. Four out of five had used a dating app, and nearly half were single. A possible opening!
Personas & User Stories
From the podcast listening habits and demographics gathered from the survey data, I created our persona Mary to inspire the design moving forward. Corresponding to our research, Mary is a single bisexual millennial woman and frequent podcast listener seeking some uplifting escape from the drudgery of 2020. We considered the podcast would also be useful to humanizing LGBTQ+ people to cisgender heterosexual allies, but decided that story was secondary to the scope of the project.
As a newly out bisexual woman, Mary wants to listen to a light-hearted community-oriented podcast that can help her relate to her newfound LGBTQ+ community.
Sketching Solutions
As an avid podcast listener herself, the idea for a podcast social community app came to Celia because she found that if she wanted to talk to other fans, there was no unified space for her favorite shows. Instead, communities and conversations are spread across different social media sites, like Reddit and Twitter. I completed a competitive analysis of other podcast app designs and a How Might We exercise to ideate solutions, and began sketching.
​
Shown here are some early drawings of different comment sections, forums, and other layouts, including a "crazy 8s" exercise and ideas for a dating profile with direct messaging.
The Pivot
A to B was fun, conceptual, and exciting, but I had lost sight of the business requirements along the way. The research I conducted and the external research I found gave me a great idea for a streamlined transit app, but neglected the initial needs of my client. The detail needed for an MVP for A to B kept growing and growing. Our time constraints didn’t allow for such experimentation and growth, so I needed to pivot. I put A to B in my pocket and went back to user flows and started over.
Choosing A Main Idea
Through these sketching exercises, I came up with an idea for an emoticon interaction bar for the podcast play state. While listening an episode, users can click an emoticon reaction that will animate a pop-up onto a visual play field. These reactions are saved to the episode's timestamps, so as you listen, you can see the reactions of other listens popping up, too.
​
As precedent for enacting this idea, Instagram has a somewhat similar feature, where viewers on a Live event can contribute to a collaborative animated fountain of hearts. The independent music site SoundCloud has an established community feature where users can add a comment to a song's timestamp and see other comment pop-ups as they listen.
Wireframing
My early wireframes demonstrate the play state and a user's ability to contribute to its visual playground. An episode's description page gives a count for each emoticon's collective use to indicate an emotional theme, in addition to a traditional comments section.
​
I also created a cardboard prototype, which was just really fun to make (video).
Branding
Because the structure of the GV design sprint does not allow much time or space for visual design, I made this first round of visual design decisions mostly on instinct. I wanted a color palette that would allow for a natural “dark mode,” and played off of traditionally gendered colors pink and blue. Celia's intended brand characteristics include light-hearted, sweet, warm, friendly, accessible, progressive, inclusive, and offbeat.
​
I chose friendly sans serif typefaces to pair with the roundness of the emoticons and the fun feeling of the podcast. Future iterations could use further accessibility checks with contrast and sizing. Icons were based off of remixing the podcast app design of This American Life, by NPR.
Testing the Prototype
I tested a clickable prototype with four members of our target audience through Figma over Zoom. Participants were given three tasks using the prototype to test iconography, navigation flow, and a reaction to the interactive elements in it, the emoticon bar and the comments section.
​
Some of the pain points users encountered had to do with the limitations of the prototyping platform. Seeing the play state, users noticed the emoticon bar right away and were excited to interact with it. However, after their first emoticon reaction, they got confused when the prototype would not allow them to use other icons or clearly show other listeners' reactions onscreen.
For one task, I asked users to look for a particularly sad episode to see how they would sort the information. Half of the users managed to categorize the intended episode by the emoticon counters on the episode pages, but the other half depended on other cues such as the episode description or the thumbnail picture, even after they had already interacted with the play state.
Next Steps
Usability testing and interviewing my participants validated interest in a social interaction like this for a podcast application. I am excited by the design opportunities afforded by trying to figure out the best way to implement my emoticon reaction bar and use that response data to let users rate and sort episodes by mood or theme in a new way.
​
Testing would be much improved if I were to partner with a developer for future iterations so that participants can interact with a more fully-functional version of the animated interaction bar.
​
I built up an extensive backlog on this project and would be thrilled to move forward with designing and testing more experimental features to further gamify the podcast listening experience.
​
Here is a one-minute video demonstration of the prototype in action.
Final Thoughts
We were able to validate both an interest in the podcast as an idea and interest in this gamified style of community engagement. When you’re listening, you have visual proof that others are listening, too, and you get to create something together in real-time.
One of the biggest downsides to the app as designed is that it only serves one podcast. It would be awesome to open up the platform to a network of different podcasts, whether that is a select set of related LGBTQ+ podcasts or another all-encompassing streaming service. I’d love to dedicate more time to this project in the future to help my client solidify her branding and further develop both the emoticon reaction bar and experiment with more of the social engagement ideas.
Try the Prototype Yourself
