Readio

Readio is a text-to-speech (TTS) application designed to help users turn text into audio files, which they can use to consume custom content on the go.

Readio is a text-to-speech (TTS) application designed to help users turn text into audio files, which they can use to consume information on the go.

Role
Team Lead
Scrum Master
User Research
Prototype
Tools
Figma
Figjam
Discord
Timeline
Oct - Dec 2022
(8 Weeks)
Approach
Lean UX
Design Team
Isaiah Williams
Kenric Kalpen
Nifesimi Adebanwo
Key Terms
Text-to-Speech (TTS)
Audio Content
Mobile

01

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

01

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Readio

Project Framework

For our Interaction Design II class, we adopted the Scrum framework from Agile development, which focuses on teamwork, accountability, and progressive iteration. In this process, I played the role of Scrum Master, making sure that work was progressing smoothly. We also divided the project into two 3-week design sprints, to break down workload into smaller portions.

Adapted Scrum framework for our 8-week design process.

Readio

Challenges

  • Provide multiple ways for inputting content.
  • Design an interface that is simple and navigational.
  • Create ways for users to customize their listening experience.

Readio

Method

We approached this project using Lean UX, a user-centered design process that combines elements of UX, Lean startup methodology (build-measure-learn), and Agile development (Scrum). This approach was first introduced by Jeff Gothelf in 2013 with his book Lean UX: Designing Great Products with Agile Teams.

Lean UX emphasizes outcomes over features, and at its core, focuses on testing assumptions through minimum viable products (MVPs), obtaining early feedback, and iterating. This process was performed as a class project being conducted as part of the requirements for IAD4000 (Interaction Design II) at Kennesaw State University, and supervised by Dr. Michael Lahey.

Readio

Lean UX Canvas

For the initial week of our project, we completed the Lean UX Canvas, which offers tools for the team to declare assumptions and get on the same page. “It’s designed to facilitate conversations within the team but also with stakeholders, clients, and other colleagues.” (Gothelf and Seiden, 76) This allowed our team to create a shared language and framework for the job ahead.

Readio Lean UX Canvas in Figjam.

Shared Language

In completing our Lean UX Canvas, our team brainstormed and collaborated to:

  • Create a Problem Statement to guide our process.
  • Ideate on how to measure the impact and success of our business outcomes.
  • Create Proto-Personas based on team assumptions about the user.
  • List outcomes that would attract users to our product and the benefits they would draw from them.
  • Brainstorm solutions that would solve our business problem while meeting the needs of our Proto-Personas.
  • Create hypothesis statements to map outcomes, Proto-Personas, and features, and then arrange and prioritize them based on risk and perceived value using a matrix.
  • Determine the riskiest assumptions and define the most important things to learn first.
  • Formulate design experiments (MVPs) to test each hypothesis in order of importance.

Initial Proto-Personas

In Lean UX, Proto-Personas are model users representing our team’s assumptions as to who will use our product and why. Proto-Personas are malleable in the sense that they may change based on insight the team obtains during user research.

Primary Proto-Persona

Name: Sam Castillo
Age: 45

General info:

  • Enjoys spending time with hobbies.
  • Enjoys exercising.
  • Works as lawyer.
  • Likes traveling.

Needs/Obstacles:

  • Needs a break from routine.
  • Needs more relaxation time.
  • Needs to occupy his time while commuting.
  • Struggles with finding alternatives to consume long and boring work-related reading.
  • Needs inspiration to finish writing and publishing his first book.

Secondary Proto-Persona

Name: Khaya Jackson
Age: 22

General info:

  • Recent college graduate.
  • Outgoing personality.
  • Works as a nurse.
  • Has an active lifestyle.

Needs/Obstacles:

  • She is dyslexic.
  • Has a tight budget.
  • Needs an alternative to audiobooks to listen to while exercising.
  • Needs a tool to effectively communicate with her non-english-speaking patients.

The Sprint Backlog contains a list of initiatives for design experiments (MVPs) arranged in order of priority that the team has to build and test with users. According to Gothelf and Seiden, an MVP is “an experiment that provides you with enough evidence to answer your question (hypothesis) and help you decide whether or not to continue with the idea (153).

For our Sprint 1 backlog containing the description of MVPs, we focused on exploring the concepts of paywall to premium features, reward system, and translating functionality for content input.

Sprint Backlog

Sprint 1 Backlog.

Readio

Sprint 1

In Design Week 1, our team worked on building MVP (A), which focused on testing the users’ impressions and attitudes towards paywalls and the concept of premium features. To this end, we designed low-fidelity prototypes in Figma depicting a flow that would prompt research participants with a paywall to a feature, and give them the option to acquire a paid subscription, or unlock such feature using our reward system.

The prototype flow takes users from the Library of contents to the Player, where they encounter a pop-up paywall message when they attempt to change the speech speed. Users are given the alternative to unlock the feature by signing into the application using their account.

Project Readio MVP (A).

MVP (A) - User Research Insights

All three research participants succeeded in completing the flow, but we noticed that they were not pleased with the notion that simple features would be locked behind a subscription. We also got comments about the reward system with points, which seemed like an unnecessary complication. Users mentioned they would prefer to simply pay upfront for access to a more frequently used feature such as speech speed.

Virtual User Research interviews held through Discord.

Affinity Mapping

As a team, we were able to gather valuable data during our interviews by asking questions about information consumption, reading habits, and subscription services, which we condensed and turned into valuable insight using Affinity Maps. These were composed of notes and observations gathered during interviews which we then organized into clusters based on affinity of information. Affinity Mapping helped us synthesize data and uncover patterns from our User Research observations.

MVP (A) User Research Affinity Map.

In an attempt to exercise accountability and keep the team on the same page, we performed brief planning meetings every two days for the entirety of our project. As the Scrum Master, I prompted and recorded everything that team members were able to get done since the previous meeting, and tasks scheduled to complete before the following stand-up meeting.

Stand-Up Meetings (Daily Scrum)

Stand-Up Meeting record.

MVP (B) - User Research Insights

In Week 2 interviews, we investigated user needs with content translation, language learning interest, and feature customization. All three research participants succeeded in completing the flow, but we noticed that some of them had difficulties in finding the Translate feature and the Voice Library. We asked a few clarifying questions to better understand their issues and mental models. We also got a request for a way to save translated content as a new file.

The insights helped us understand that language learning and translation services were not central to users' needs, but rather sought sporadically. This information compelled our team to pivot and make the translation and speech voice more auxiliary features of our product.

Project Readio MVP (B).

At the end of Sprint 1, our team participated in a longer and more in-depth meeting to determine retrospectively what went right and wrong during the first three weeks of our project. We also listed suggestions on what should be improved moving forward into Sprint 2. This exercise helped our team reflect on our performance, voice any concerns, and set

Sprint Retrospective

Sprint 1 Retrospective Meeting record.

Readio

At the beginning of Sprint 2, our team revisited our Lean UX Canvas, this time better informed with the insights from user research interviews and both the validated/nullified assumptions and tested hypothesis from MVPs (A) and (B). We used this opportunity to re-evaluate and alter aspects of our product and our Proto-Personas, which changed in scope based on research insights. We also nullified the reward system idea and voice command app control.

The new Sprint 2 Backlog contained the MVP experiments to be built and tested in Design Weeks 1 and 2, which focused on testing new button configurations and the Voice Library.

Sprint 2

Sprint 2 Backlog.

MVP (C) - User Research Insights

During Design Week 1 of Sprint 2, we focused on building and testing MVP (C) with users. In our MVP (C), we made changes to the user interface based on feedback from users and insight from usability tests performed in Sprint 1. Mainly, we changed the location of the speech speed (1.0x) and player menu (stacked dots) buttons. The Translate function was also made a secondary option and stowed inside the player menu.

The prototype flow prompts the user to create a new file by text input. Then, users are asked to open the newly created file into the player, and change the speech voice using the Voice Library.

Once again, all three research participants succeeded in completing the flow, but we noticed that some of them were unsure as to which menu (stacked dots or hamburger) would include the speech voice change option. Based on this feedback, we decided to replace the hamburger menu icon with one that represented system settings.

Project Readio MVP (C).

Readio

Refinement

In our final Design Week of Sprint 2, we started to translate the low-fidelity prototype into high-fidelity screens. To this end, I created a quick style guide with type scale and color palette, and implemented into our Design System using Styles in Figma. The team then collaborated on creating components while maintaining a cohesive look for the user interface.

We interviewed three more users and further tested MVP (C), this time as a high-fidelity prototype. We also asked for their impressions and opinions on stylistic options of visually updated elements.

Project Readio style guide in Figma.

Final Proto-Persona

At the end of Sprint 2, we performed another retrospective meeting and put together the final iteration of our Proto-Persona, which encompassed all of the insights from user research interviews and usability testing. Retrospectively, we went from two to one Proto-Persona, which reflected the primary user profile, and the wants and needs that would drive them to seek and use the Readio app.

Project Radio’s Proto-Persona, Sam Yasuda, is an active and tech-savvy college student. Due to a busy schedule, Sam finds himself neglecting one of his favorite activities: reading for pleasure. Sam seeks a tool to help him consume a variety of text-based content while on the go, or while multi-tasking.

Primary Proto-Persona

Name: Sam Yasuda
Age: 21

General info:

  • Enjoys playing video games and browsing social media.
  • Full-time college student.
  • Needs more relaxation time.
  • Consumes a variety of digital content.

Needs/Obstacles:

  • Needs a break from routine.
  • Needs tools to promote opportunities for content consumption.
  • Struggles with finding alternatives to long and boring school related reading.
  • Needs to maintain a balance between school and personal life.
  • Occasionally, he has a need for translation of written content.

Final Prototype

The Readio application for mobile devices has a simple and easy to navigate system interface. In  Library, users can easily access all uploaded files and quickly locate specific items by browsing through tabs. The Player is multipurpose, since users can listen to content through the speech synthesis capability, or simply read it if they so choose. Users can also create new files by inputting text, scanning documents using the device’s native camera, or by uploading from other product’s "export to" option.

Splash

Library

Player

New File

Translate

Settings

Readio

Takeaways

Project Readio helped me experience Lean UX for the first time. I learned valuable lessons about prioritization, teamwork, and accountability. Scrum makes the design process fast-paced and efficient—as well as exciting. It was fascinating to test and iterate low-fidelity MVPs with users, and notice all of the illuminating feedback, research data, and insights that our team was accessing each week. I had the idea for Readio on a commute while listening to a video essay on my smartphone. Having the chance to research this domain and bring Readio to life was beyond special.