Company Overview:

Hyperionics Technology, the developers of Voice TTS App are a Tech company in Massachusetts, USA. I have been a recurrent user of their Voice Reader App and as passionate UI/UX designer I saw many ways I could help redesign the user experience of the app. I reached out to the company CEO and Lead Developer “Greg Kochaniak” and he was pleased to have me on board.

This is the previous design before I came on board

Problem statement:

The app has a wonderful functionality (i.e Text To Speech) but has a not so good user experience i.e its not a user centered design. My approach in solving design problems always starts with having a User Centered design approach. Sometime these depends on what stage the App is when I join a team, but for this project I was starting from scratch. Whenever I start from scratch these are my design processes.

Project Details:

My Role: Product Designer

Platform: Android

Industry: Tech

Client: Hyperionics Technology

Tools: Figma, Miro, Forms App, Drawing Pad, Microsoft Word, Microsoft Excel, Voice Recorder App

Scope and constraints:

The Scope of the project

1. Empathize (to understand users and pain points)

2. Define (to define what their major problems are)

3. Ideate (to think of design solutions)

4. Protype (Create designs using ideas from design solutions)

When I was working on the project the major constraints I had were that the client didn't have a proper budget for this and I was the only UI/UX designer, but because I really loved the App and I'm very passionate about UI/UX Design I went forth with the project.

Design Process & Solution:

Empathizing with Potential Users:

In empathizing with users, I had to know what their pain points were and this required research. My two research methods which I used are the Primary Research method (which helps me get firsthand information from potential users with the use of interviews, surveys, and usability tests) and Secondary Research method (which helps me get knowledge from existing data out there).

1. Primary research:

Survey:

I ran a survey with 23 applicants with the Forms App which is a great tool to run surveys and get data using a phone. I designed a Survey with Forms and sent it to people/potetials users to know if first and foremost users would love to use TTS apps, if they knew about @Voice TTS App and what type of devices users use for this. The research was quite successful and here are the takeaways we got from the research:

An Apple Version of the App is desired (the app is only on android for now)

Marketing Voice TTS App would be necessary to get more people to know the App/Product.

There are users that use TTS apps which are out in the market (this would help with our secondary research).

Physical & Virtual Interview Details:

I also ran series of Interviews with current users of the App, whom I deduced from my Survey. This gave me more in-depth knowledge of their pain points as I interviewed them. I had my questions ready and a few tasks for them to do with the App. I interviewed Bloggers, UI/UX Designers, entrepreneurs and students. I also recorded them (with their permission) so that I don’t have a bias while understating their pain points. Here are the takeaways of the interview:

Make the design interface simple and easy to navigate

Choose a better colour combination/scheme

Use more distinct icons for representation

Create a more organized Settings Tab

Make the App Compatibility with iOS

Design a good dashboard for users

Bookmark path way should be just like Google Chromes Path way

Navigate book page easily

Swipe interaction for moving through pages

Create Desktop Version

2. Secondary Research

I went up on the google store to find out I comment sections, what pain points users had with other TTS apps, what users complained about most and wrote them down. This helps me focus on users and solving their problems. I looked at some other reading apps for inspiration.

Competitve Analysis

I went into researching major competitors to gain insight into their products, sales, and marketing tactics. Companies I researched were as follows:

TTS Reader

Speechify

Natural Reader

Here are some takeaways I got from the research:

Avoid Apps Crashing

Make it Affordable

Use visual trailers for marketing

Use Good Hierachy of Information and Navigation

Test use of scan to read feature before releasing

Use of Natural AI voices

MosCow Analysis

Define User Pain Points:

User Journey Maps

The great tools I use to help define users pain points are the User Journey Maps and MosCow Analysis. The user journey puts me in the frame of the user to help me define their pain points more accurately and understand how they flow through the app. Here are some the takeaways:

Design a more attractive splash page to increase trust in the brand

Redesign a proper information architecture for the app

Position the Navigation for the app at the bottom of the screen rather than the top

Make folder of the library more organized

Allow users to use their choice of colors for highlighting

MosCow Analysis

I also wrote down the some of my pain points also, to add during this process. I wrote some when I first used the app and others when I was researching.

One good tool I use for my ideation process is the use of user stories. It helped me to put myself I the shoes of users while designing. Combining this with the research really spikes my creative view of apps when designing because I know exactly where to start designing from graphically. For this project I created 6 user stories.

Prototype:

At this stage I was clear about the design problems. I made some sketches and created a SiteMap on Miro to help with a distinct information architecture for the App (Miro is a great tool for UX Research and project management). This was also good for the stakeholders also because it gave them a bird eye view of the App’s structure.

I dove into figma to do my thing. I created the frames for each of the tabs starting with a splash, the dashboards then others. I rebranded the app with great fonts to maintain simplicity and also chose a better colour combination. Whenever I need clarity on color scheming, I use colour pallete apps like coolors. For Iconography, the research shows the actions users wanted so a I used SVGrepo to get the best icons that related with the users. I design a good dashboard for users to interact with so that they can feel some sese of ease while flowing through the app. I created a more organised Settings Page with simplistic ad attractive designs to help users create a etter experience for them seles as they use the App.

I also prototyped the app, linking the pages according to the right flow for users to navigate through. This also give the UX engineer/Lead developer a great direction to develop from. I did this and a lot more for the app designs and presented it to the stakeholders’, lead developer and the sent the project over for full development. The stakeholders were very happy as they as they experience the presentation of the app because they could already see the upgrade I the user experience of the app.

I find my new design thinking process which I learnt from my Google UX Certification Course really cool because if helps me solve real life user problems and enhances user experiences.

Conclusion

My design was delivered to the UX Engineer and the design was able to guide him through his engineering process. Communications were done via mails and video calls. During the User Testing Phase we got great feedback from the users who were happy that their pain points were solved. The CEO expressed his joy for the new designs because he could already see the improvements in design. We are forecasting 50% increase in sign ups and 75% increase in user retention.

What did I learn?

I learnt about how great research can help direct designs properly and how recording research session can help curb bias in designs.