YUNAN XUE
Group 37.jpg

Speechify - Intuitive Text to Speech Software

 

Speechify - Intuitive Text to Speech Software

UI/UX, STARTUP

 
 

Since October 2016, I started working with a student startup, Speechify. Our team is building a text to speech software which makes reading more accessible for people who have dyslexia. 

 
 
 
 

The team & my role

As the designer in the team, my involvement includes:
- Design user flows, wireframes and prototypes for desktop and mobile application
- Work closely with developers to consider constraints and tradeoffs
- Create visual designs for marketing purpose
- Conduct user research and usability testing sessions

 
 
 

Target users

People with reading challenge, especially with dyslexia.

People with dyslexia have trouble reading or interpreting words, letters, and other symbols. They think in pictures instead of words. Text to speech software converts written text into voice so that dyslexia users can read by ears. 

 
 

Problem

Current text to speech products are inefficient and difficult to use.

Some of the frustrations with current text to speech products:
- Complicated process to convert text to speech. 
- Limited usage in particular applications.
- Separate functions in different products.
- Disconnected between multiple devices.

Other text to speech products:

 
 
 

Solution

Speechify streamlines text to speech process across different platforms and combines multiple functions.

Speechify is a combination of the functions that are separated in other different products including converting digital and physical text into speech, downloading and creating audiobooks and connecting accounts across different platforms.  

 
 

Work closely with users while building the products

While building Speechify, our team worked closely with the Hamilton School at Wheeler in Providence. The school serves elementary-grade children with language-based learning differences, including dyslexia. It was essential for me to talk to the target users because dyslexia was very new to me when I started working on Speechify. Interacting with the students helped me understand how they used text to speech products and how Speechify could be improved to meet their needs.

 
 
 

 
 

Mobile Application

Speechify has a mobile and a desktop application. I started designing from the mobile app because its user flow is more complexed. The desktop application followed the design system on the mobile and had some specific adjustments for users' different needs on the desktop.

 
 
 
Desktop HD Copy 31.jpg
 
 
 

The design process

 
 

Build the MVP - Nail the core function first and then expand

We started by building the most important function first, turning digital text into voice. We wanted to build this function quickly and test with real users. As the designer, I started by sketching and building wireframes. They were quick ways for me to get my ideas onto paper and use visuals to effectively communicate with developers. 

 

Start from sketches and wireframes

 
 
 
 
 
 

The initial product

Copy digital text to make audiobooks and listen to them
The initial version of Speechify was very simple. Users could copy any text from anywhere on their mobile to create audiobooks and listen to the copied text. 

 
 
 

Iterations for the listening page

While designing, every page went through several iterations. For example, the following is the listening page where most of the control actions happen. Getting user feedback while designing was helpful to identify problems and make changes. Iteration 1 did not have the correct hierarchy. In iterations 2, we increased contrast but there were other problems pointed out by our users.

 
 
 
 
 
 
 

WPM - Satisfying the specific needs of people with dyslexia

While designing the listening page, we originally had the speed section called "speech speed". When we talked to our dyslexic users, they emphasized that they used the term "words per minute" to evaluate how the product helps them increase their reading speed. People who do not have dyslexia are normally not familiar with WPM, however, it is essential for our target users.

 
 
 

 

Add new features based on user requests

Feature prioritization to decide what to build next
From usability testings on our initial product, we received feedbacks on the initial function and got requests for new features. We decided to build some of the requested features to add more values to our product. We gathered the user insights and brainstormed on our own. We did a feature prioritization session to help us think about what to do now and what to do later.

 
 
 
 
 
 

Reorganize the playlist page to prioritize primary actions

After we decided what features to add, we needed to reorganize the playlist page to prioritize different actions. We listed out all the elements we needed to include on the playlist page. From there, I sketched different layouts and created different variations of the page. 

 
 
 

Element to include on the playlist page

 

Balance between user goals and business goals 

While designing the playlist page, if I were only thinking about user goals, I would consider “Contact Us” and “Gifts to Friends” as secondary and hide them into the hamburger menu. However, since we are an early stage startup, these two actions are essential for our business and product development. We want to gather as much user feedback as possible to improve our product by having users “Contact Us”.  We want to gain more users by encouraging people to send “Gifts to Friends”. While designing, my goal was to have these two actions easily accessible but do not fight with the primary function “Add Audiobook”. 

 

Be critical of my own design

I created different variations for the playlist page. While evaluating each option, I looked at each element on the page. I thought about and questioned how every element can help users perform a specific task and how the page as a whole facilitate users to achieve their goals. I had to be critical of my own designs and have a reason for every design decision.

 
 
 
 
final playlist page.jpg
 

The feature we added from user requests

Scan physical text to make audiobooks
Users can take a photo of a physical page and have the app read the text instantly. When we talked to students with dyslexia who tested Speechify, they told us that some of their reading assignments were on physical books. They wished to be able to listen to those texts as well. For our goal to help dyslexic users overcome reading challenges, it was essential for us to add this function into the product. 

 
 
 

Onboarding

To help users get familiar with the app, the onboarding introduces the four key components, making audiobooks in two ways, sending text from desktop to phone and sharing Speechify with friends.

 
 

 
 

Desktop Application

Similar to the mobile app, the desktop application allows users to select any text on their computer and turn it into sound within a few clicks.

 

Consistency across different devices

Because Speechify has multi-platform products, one of the challenges is to create a consistent experience on all the platforms. We tried to make the applications on different platforms similar so that users only need to get familiar with the interfaces once. 

 
 
 
 
 
 

Users can highlight the text they want and simply click the play button on the control panel to listen. We made the desktop interface small so that it does not take much space on the screen.

 
 
 
 
 
 

Work with developers to understand technical possibilities

While designing the downloading user flow for the desktop app, I was unsure about the technical possibilities in the beginning. I worked closely with the developers. They helped me understand what was technically achievable and I designed the simplified user flow and visuals for the downloading experience. 

 
 
 
final playlist page copy.jpg
 
 

 
 

Insights & Looking forward

 

Design with more constraints and prioritize tasks 

While working on Speechify, I am learning to work with more technical limitations and time constraints. As we are building the MVP, I need to prioritize tasks. Sometimes even though there are some visual elements that could be improved, our priority is to have the product technically functioning and the user experience working smoothly first and then we can add more icing on the cake later. 

 

Understand and gain true empathy for my users

When I first started working on Speechify, I made a mistake to jump right into the design. I was very new to dyslexia. I did not fully understand the problems my users were experiencing and their special needs, such as the importance of the term "words per minute". Through the process, I learned a lot more by talking to more people with reading differences, doing more usability testings and getting more user feedbacks. Moving forward, this is a lesson for me to focus even more on the users, especially when I am not the direct target user. 

 

Build a product that is changing people's lives

As Speechify is getting more users, we received feedbacks that truly motivated the team to work even harder and build better products. We had users sending thank you notes expressing that they were finally seeing the hope to overcome reading difficulties through Speechify. I feel honored to work on a product that is making a real impact on people's lives. As the designer, I feel responsible to keep improving my design skills and build better products for my users. Learn more about our user feedbacks here.

Quotes from our users: 

 

Ready for more challenges to come

Speechify is very young. Our team is learning to create new products, build a startup and working together as a team. There is a lot more we need to learn and a lot more complexed problems we will need to face. I am excited to be part of this journey and look forward to the excitements and challenges that will come.