Johan Marais-Piper

UX and UI Design / SpeechSaver

SpeechSaver App

SpeechSaver is a voice-bank app, a startup pro-bono project by someone whose brother was diagnosed with Motor Neuron Disease. The original purpose of the iOS native app was to provide a tool for the to communicate as the MND removes their ability to communicate.

At the time, the available apps to provide this service were either too feature heavy and cluttered, or did not allow for easy navigation. The client took the initiative to create a better alternative for his brother.

Working alongside an iOS developer, we built a simple app that has present commands and also allow the ability for users to record their voice as a custom phrases.

User Experience

I put together a persona based on the information I had through speaking with the client. While not extensive, it gave us some insight as to what to look out for when designing the app. Of particular importance were things like:

  • Button sizes and shapes
  • Simplicity of navigation
  • Flows on recording/deleting phrases


Freelance UI/UX Designer

Illustrator, Zeplin

A persona was created as an anchor for design and feature decisions.

Creating a Value Proposition diagram helped focus on the important features.

Design considerations were presented to the client, to maximise the user's experience.

Wireframes were created as a first step, with the prototype shared with the client.



As this was an MVP, we stripped the design to be minimal and focused instead on functionality and ease of navigation. 

The voicebank is grouped by categories, including medical, conversation, and medical. Also included are sticky "yes" and "no" buttons for quick interactions.  Recorded phrases can be included in existing categories or added to a "favourites" group.

Onboarding screens

Delivery & key learnings

The app was developed and a prototype was built for the client for testing and feedback. Additional plans to take the app to a larger audience has so far been put on hold.

  • An introduction to accessible design patterns
  • Rapid prototype and design, due to timeline

 ⚡️ H I G H L I G H T S ⚡️

Introduction to Accessibility

In retrospect there were many things that could have been done better, however much was learnt during the process.

Design for Good

Being able to directly help someone through design is a rewarding experience.

Working Lean

Working to a tight timeline meant that the focus was squarely on the main purpose of the app — to help the user to communicate easily.


Are you building a product?

Let's talk about your goals and needs moving forward. I'm happy to give advice or provide further help if it looks like we can work well together and provide each other real value.

Using Format