Speak & Translate is a popular iOS app that prioritizes the audio translation experience. In the application, the main functions include translating from audio, text translation, and swapping languages. As a school project in my Interface Design 1 course, I was tasked with improving the visual design and usability of this app.
I began the redesign by using an evaluative framework called heuristic analysis. Popularized by Jakob Nielsen, this framework provides 10 heuristics, or rules of thumb, specifically for evaluating the effectiveness of a user interface. With this, I studied each page of the app, considering factors such as visibility of system status, user control, and aesthetics.
After spending some time with the app I discovered three main pain points in regard to the visibility of the system status, the match between the system and the real world, and the consistency of the interactions compared to other applications.
Audio is supposed to be the primary interaction method, however, there is little to no feedback when audio translation is engaged. The system should make it clear to the user what state the app is in.
Speak & Translate uses flags as symbols to represent languages, however, this is problematic for a couple reasons. Firstly, most people only know a small handful of flags off the top of their heads, and would probably recognize the language quicker by seeing the name instead. Secondly, many languages, such as Arabic, span many countries and are not unified by one single flag.
Lastly, the app could use an update on interactions and iconography. The app uses uncommon interactions, such as "Pull up to delete", to perform key actions. Additionally, much of the iconography is ambiguous as to what it represents forcing the user to memorize it over time, rather than recognize it immediately.
As part of my research, I also looked to other popular translation apps on the market. The three competitors shown here include Google Translate, Translate, and iTranslate. This helped me identify additional features that improved the experience, study alternative task flows, and evaluate the visual design comparatively.
Some notable features and design decisions that I knew I wanted to include in my redesign include the clear call to action that iTranslate puts on the microphone button, Translate's placement of the languages at the bottom making for easy access, and the clean and clear visual style of Google Translate.
My final redesign prioritizes audio translation while aiming for clarity and simplicity. The prototype includes three main task flows: translating text, swapping languages, and translating audio. Additionally, I included some smaller functions and microinteractions including favoriting translations, quick swapping between languages for conversations, and playing translations out loud.