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

Click here to skip to details about the microinteraction design process

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. 

• To be able to assess how successful this existing IA was, we needed to first fully understand our users as well as platform standards.

Understanding Users

Consolidating user data to clarify personas

• 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).

• 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.

• To gain insight into the home feed and story view experience, I decided to consolidate the aspects of existing user research that related to engagement with content into a single Content Consumer persona.

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.

Assessing Accessibility

Significant accessibility issues with color contrast limits user engagement 

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

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

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.

Rapid Ideation and Iteration

Facilitating remote design collaboration through intentional organization

• 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 lo-fi wireframes.

• I organized our wireframing files with labelled headers for each flow so we could quickly co-design without getting in each other’s way. 

Accelerating our design process with frequent, strategic feedback

• 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.

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

• Presented our lo-fi wireframes to Real Talk’s software engineer early in our sprint in order to understand the technical feasibility of our designs. This allowed us to update our design based on technical constraints before conducting usability testing, increasing the relevance of our testing data and saving us valuable time.

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 objectives and a structured rubrics

• To support consistent data collection, I created a note taking spreadsheet where we put our scenarios and tasks that correlated to each of our testing objectives.  

• To help us to interpret our insights quickly, I also created a rubric to score the amount of friction a user experienced when trying to accomplish a specific task. By averaging these numbers at the end of testing, we could easily see which tasks and features were most and least intuitive for users.

Synthesizing usability testing insights through affinity mapping 

• Affinity mapping allowed us to quickly identify trends in our usability data.

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.