Supporting Digital Storytelling
iOS Redesign to Reduce Friction for Content Creators
Real Talk’s founders first launched their mobile iOS app in 2017 with the goal of improving teen mental, emotional and behavioral health through storytelling and technology.
In this sprint, I redesigned Real Talk’s content creation flow to encourage more users to share their own stories on the platform.
Role | UX Designer and Researcher. I was the designer responsible for the content creation feature redesign. Collaborated with another designer, software engineer and Real Talk’s co-founder on the overall project.
Client | Real Talk
Methods Used | Comparative & Competitive Analysis, Usability Testing, Affinity Mapping, User Persona, Journey Mapping, User Flows, Heuristics and Accessibility Analysis, Site Mapping, Sketching, Wireframing, Prototyping & Iteration
Duration | 5-weeks (April - May 2021)
Challenge
Real Talk’s current content creation feature lacks transparency and flexibility. Though crowdsourced stories are the core of Real Talk’s product model, only 15% of users submit stories to the app. Of the content that is submitted, many stories are incomplete or contain accidental errors. Both Real Talk and their users desire a clearer content creation flow so that teens’ authentic stories can shine.
Outcome
The redesigned content creation feature encourages more of Real Talk’s users to become creators by addressing pain points through built-in error prevention, increased transparency and more control over how stories are presented.
Real Talk is currently rebuilding their app to include the new content creation feature and more data will soon be available to evaluate the post-launch success of the redesign.
The Solution
A content creation feature that is flexible enough to encourage creativity, yet structured enough to provide clarity and support.
Browsable Prompt Library
Make space for creativity while providing inspiration
Users now have access to over fifty different writing prompts (up from three), organized within a new landing page with clear information architecture.
Strategic visual hierarchy emphasizes quick select prompts while also supporting users who want to browse the full library for inspiration.
3-Step Flow with Progress Bar
Reduce user anxiety with visible steps and built-in error prevention
The restructured flow prevents errors by allowing users to edit their writing, resulting in higher-quality story submissions.
The new progress bar demonstrates visibility of system status and provides clarity that users loved during usability testing.
Final Call to Action and Clear Next Steps
Help users understand the content review process
A clear, concise list of next steps draws users’ attention to the content review process and reduces confusion.
The final call to action button strategically directs users to their profile, further clarifying the status of their content submission.
Our Research Process
The new feature successfully encourages more users to create content using the Real Talk platform, now let’s explore a few of the discovery highlights that informed the redesign.
Assessing the Current Platform
Taking a closer look at Real Talk’s “chatbot” content creation feature
Analyzing the existing content creation flow from a best practices perspective allowed me to identify what the feature was doing well and what could be improved.
Analysis Impact on Design
The limitations I identified went against three of Nielsen’s usability heuristics, making it clear that the redesign needed to address:
Error prevention
Visibility of system status
User control and freedom
Creating a Design Persona
Uplifting users’ characteristics, goals, needs and frustrations
To craft a design that would successfully engage Real Talk’s users, I first needed to develop a deeper understanding of their behaviors and characteristics.
I created the Content Creator persona by consolidating existing research from MVP usability testing and interviews, as well as reflecting on user story data and current teen social media trends.
Persona Impact on Design
To engage the users that the Content Consumer represents I realized the design needed to:
Make users feel safe by giving them more control over their content.
Spark creativity with browsable writing prompts and unobtrusive writing support.
Create space for reflection without chatbot interruptions.
Discovery Research Conclusion
Chatbot-style interaction has to go
Though originally intended to be an engaging way for teens to create content, interruptions from hardcoded prompts and lack of control frustrate users and decrease the quality of their stories.
Initial Designs
Incorporating the learnings from discovery research, as well as feedback from our client and engineering team on early design explorations, I redesigned the content creation flow and created a mid-fi prototype for usability testing.
High-Level Design Goals
Offer flexible writing support with browsable prompt library, sentence starters and space to free-write.
Increase visibility of system status with descriptive text and a progress bar.
Prevent errors by adding a review step before submission.
User Feedback & Improvements
To understand how users experienced the restructured content creation feature, I tested the mid-fi prototype with three teen Real Talk target-users. Synthesizing the usability data provided me with a clear direction for improvements to the initial design.
Usability Testing Insights
Wait, what happened to my story?
Though the initial steps of the flow (selecting a prompt and writing) were intuitive for users, a lot of confusion still remained about what happens after a story is submitted.
Since one of the redesign’s main goals was to clarify the story submission and review process, I knew that more adjustments were necessary to address the post-submission breakdown.
Design Improvements
Adding clarity to progress bar and submission confirmation
The usability testing design left users assuming that their story would be posted immediately, meaning that the cues I included about the moderator review process were ineffective.
To address this confusion I enhanced the progress bar with clear language and icons and designed a confirmation screen that emphasizes next steps.
Design Deliverables
Explore the final content creator experience via Figma prototype and video walk-through.
Next Steps & Reflection
Looking back on my design process with an eye on the future.
Next Steps
Given more time to work on the design, I’d like to:
Further test and build out the ability for creators to add custom tags to their content to support users discovering stories through custom search.
Test user reactions to a harmful language scanner which could accelerate the content review process
Reflection
Communicating with engineering early and often saves valuable time
Working with engineering early saved us time by ensuring we didn’t pursue designs that weren’t technically feasible. For example, I was able to adjust a design that used predictive text before usability testing once our engineer shared that the design was prohibitively complex. Talking to engineering also helped me create a hand-off document that expedited the development process with clear user flows, specs and states.