Project Overview | Redesign of Real Talk’s existing mobile iOS app. This case study focuses on the app’s content consumer user experience. Primary goals are to (1) increase engagement, (2) user retention and (3) lay the foundation for community building.

Role | UX Designer and Researcher. Collaborated with one other designer, software engineer and Real Talk’s co-founder. My focus within the project was the home feed, detail story view, search page and overall design system.

Client | Real Talk App

Duration | 5-weeks (April - May 2021)

Real Talk is more than a social media platform

Real Talk’s founders first launched their iOS mobile app in 2017 with the goal of improving teen mental, emotional and behavioral health through storytelling and technology. Real Talk crowdsources authentic anonymous teen stories on topics like identity, relationships and mental health and pairs them with high-quality online resources.

Growing and adapting to user needs

Real Talk has not released a major product update since 2018, but since then their flagship product has reached 25,000+ global users and counting. Real Talk is preparing to implement new features in 2021, with design priorities informed by collected user pain points and the organization’s long-term vision.

Stakeholder design sprint goals:

• Increase engagement with user stories and Real Talk’s trusted, teen-friendly resources

• Improve user retention

• Lay the foundation for features supporting community building

Understanding Client Goals

Gaining insight into the Real Talk product road map 

• To kick-off our design sprint we met with Cristina Leos, co-founder and CEO of the Real Talk app.

• Since the app’s launch in 2017, Real Talk has been combining storytelling, resources and community to support the mental, emotional and behavioral health of it’s 25,000+ global users.

• In order to maximize their impact and continue to grow, Real Talk is preparing for a new feature launch which will expand their existing product.

Defining our Scope

Considering our client’s goals to determine initial scope

• Presentation of and interaction with story content and resources - my design focus

• Overall navigation and information architecture

• Creation of a user profile page

• Presentation and flow of submitting a user story - my design focus, detailed in future case study

What is here and how is it organized?

Taking inventory of Real Talk’s Information Architecture (IA)

• We decided to diagram Real Talk’s existing organization structure in order to understand all the content we would need to consider in our redesign. 

Understanding Users

Consolidating user data to clarify personas

• Real Talk’s existing user research included three personas developed during a Fall 2020 sprint, along with a list of pain points collected from user feedback, interviews and previous usability testing.

• Users can have two distinct experiences within the app, as content consumers and as content creators. While all users are content consumers, 15% of users are also content creators (meaning they anonymously submit stories to Real Talk).

Discovering Best Practices

Identifying platform conventions through comparative research

• In order to achieve Real Talk’s goal of increasing engagement and retention, it was vital to create an intuitive experience for the Content Consumer.

• To do this we turned to comparative research to uncover platform conventions of successful user generated content apps, as well as other apps teens are familiar with.

High-Impact Discovery Documentation

Preparing for rapid ideation with Figma pages

• I created separate pages to house client goals, previous Real Talk UI, IA as well as completed and ongoing research. This structure allowed us to quickly access key information for insight and inspiration while sketching and drafting wireframes.

Defining the Problem

Our initial discovery work allowed us to clearly define the friction in Real Talk’s Content Consumer experience

• Real Talk’s user engagement and retention is reduced due to a non-intuitive interface which does not follow platform standards for navigation, microinteractions, content layout and calls to action.

• Accessibility issues with color contrast make it difficult for some users to engage with content at all.

Proposing a Solution

Create an intuitive experience by prioritizing standards and accessibility

• Increase user engagement by crafting an intuitive interface which follows platform standards for navigation, microinteractions, content layout and calls to action.

• Create an inclusive color system inspired by existing brand colors that passes WCAG standards for contrast. Increase user retention by laying the foundation for community building with a user profile page and the ability to share content.

Learning from Other Designers

Elevating design work through formal and informal design critique

• As a two person design team we had daily co-working sessions bookended with stand-ups to share our design thinking and receive peer feedback.

• Two formal critique sessions uplifted valuable insights from experienced designers who were able to look at our project from a fresh perspective.

Collaborating with Client and Engineering

Creating robust, technically feasible designs through frequent and early check ins

• We consistently pulse-checked our designs through weekly client meetings, gathering feedback that helped us center Real Talk’s product and user goals.

• Presenting our lo-fi wireframes to Real Talk’s software engineer early allowed us to understand important technical constraints.

Testing Designs with Users

Conducting remote usability testing with Real Talk target users

• Once our mid-fi prototype was finalized, we conducted remote usability testing with three of Real Talk’s target users, youth aged 14, 15 and 19 years old.

• Our testing objectives were to uplift areas of friction and success with our newly designed navigation, story submission flow, home feed and detailed story view, as well as profile page. 

Increasing research validity with clear a structured rubrics  

• To support consistent data collection, I created a rubric to score the amount of friction a user experienced when engaging with a specific task.

Amplying Youth Voices

Real Talk’s Home Feed is the heart of its storytelling model

• The home feed is where cards featuring headlines from user submitted stories are posted by Real Talk’s moderators.

• The home feed’s ultimate goal is to prompt users to tap into each story’s detailed view, which showcases the entire text plus a teen-friendly digital resource.

Problem: Cramped, Inconsistent Card Layout

Unclear visual hierarchy and missing best practices reduces engagement with stories 

• Lack of padding and character limits causes headline text to frequently hide the “read more” call to action.

• Card design doesn’t follow Nieslen’s 10 Heuristics standards for “Aesthetic and Minimalist Design” and “Consistency and Standards”.

• Lack of visual hierarchy makes it harder for individual story content to catch a user’s attention while scrolling.

Solution: Balanced, Consistent Card Layout

Leveraging visual hierarchy and best practices to craft designs that let youth voices shine

• Create a design system story card with a clear visual hierarchy that catches user’s attention and engages them to tap into story details. 

Follow home feed platform standards such as full bleed content layout and maximizing vertical space. 

Developing Visual Hierarchy

Ranking importance of information and actions from organizational and user perspective

• My first step to designing an element’s visual hierarchy was to establish which user actions were most important.

• To develop the priority list below, I considered both the characteristics of my persona (the Content Consumer) and Real Talk’s organizational goals. 

While crafting a visual hierarchy that matched these priorities I relied heavily on platform standards, visual design principles (contrast, balance, white space, emphasis) as well as Nielsen’s “Aesthetic and Minimalist Design” heuristic.

I created story card components with flexible height and increased padding to maximize vertical screen space and allow the user to focus on one post at a time while scrolling.

With the story card structure complete, it was time to finalize a new color system in order to increase the fidelity of my designs.

Meaningful Use of Color

Vibrant colors are important to Real Talk’s brand identity

• Real Talk’s original brand color palette was designed to be fun, warm and engaging for all users.

• Home feed story color is based on category and provides visual interest, since Real Talk’s anonymous stories lack other common identifiers like images and usernames.

Problem: Low-Contrast

Significant accessibility issues with color contrast limits user engagement 

• I used Figma’s Contrast plugin to assess the app’s current accessibility.

• The colors used for the “Bullying” and “Relationships” story categories fail AA WCAG accessibility for normal text (less than 24 px).

• The colors used for the search bar, “Puberty” story category, as well as tab bar fail AA WCAG accessibility for all text sizes and graphics.

Solution: High-contrast, expanded brand palette

Prioritizing meaning, accessibility and brand identity in color choices

• Story colors provide users both visual variety while scrolling as well as indicate content category.

• However, the original story colors needed to change not only because of contrast, but also because Real Talk’s story content was more nuanced than three categories alone. 

• In fact, Real Talk’s product team identified that user stories were better represented by eight distinct categories.

Using Color to Support Visual Hierarchy 

Creating a nuanced, accessible color palette for each story category 

• I designed a four color palette for each story category that supported visual hierarchy by maximizing contrast for high priority actions and info, while reducing contrast for lower priority actions and information. 

• Using Material Design’s Color Tool on the Accessibility setting, Coolors color shades and the Figma contrast app all allowed me to quickly generate consistent, high-contrast color palettes for each story category.

Final Results of Design System Redesign

A colorful, engaging home feed which supports both organizational and persona goals. 

• Visually prioritizing content categories and headlines supports the Content Consumer’s need to quickly find stories about topics that interest them. The prioritized call to action also provides the Content Consumer easy access to other teen’s experiences and trusted resources. 

• The new color system and visual hierarchy also supports Real Talk’s goal of increasing engagement with detailed view stories and curated resources

Designing for Engagement

Real Talk’s model of community means teens knowing they’re not alone through shared stories and anonymous peer support

• As an anonymous platform without public profiles, users can currently communicate their support of a story by selecting from a list of five emoji reactions, each with a specific meaning.

• With this sprint, Real Talks wants to both increase engagement with stories and lay the foundation for features that support community building.

• From user research, we also know that our persona The Content Consumer wants to be able to share interesting content with friends and family, as well as easily refind valuable content.

Problem: Unfamiliar and Missing Microinteractions

Lack of familiar microinteractions makes users less likely to interact with stories, reducing overall engagement

• The app overall is missing standard microintearctions such as save a share, which is frustrating to the Content Consumer. 

• The single existing microinteraction is an emoji react, which is only present on the detailed story view via an outdated and clunky interaction.

Solution: Expanded, Intuitive Microinteractions

Encourage engagement and connection with interactions that mirror familiar apps

• Add the ability to save content to a private user profile.

• Since Real Talk is not currently expanding their product to include public profiles, create the ability to easily share content with users outside of the app. This feature will address the Content Consumer’s desire to share content with friends as family, as well as introduce possible future users to the app.  

• Leverage platform standards (such as placement and interaction pattern) to make interacting with content as intuitive as possible and remove any friction that may be limiting user engagement.

Optimizing Design Hand-off

Detailed developer hand-off page with user flows, specs and states

• Since the content consumer experience has so many different interactions and some fairly complex UI, I knew that it would be near impossible for Real Talk’s engineer to understand my design fully from the prototype and wireframes alone. 

• To make the design as clear as possible, I created a thorough document with detailed user flows, specs (colors, spacing, padding, alignment, interactions) as well as states of important elements.

Respecting our client’s and future designers’ time with organized Figma file documentation that facilitates quick onboarding 

• Our final hand-off Figma file presents not only documentation of the work that we did in this sprint, but also contains insights from previous research and design sprints. 

• By keeping user experience research, organization goals, and historical UI all in one place, a new designer could easily orient to important context that could inform their work.