Graphic Designer
speaktranslate.jpg

UI/UX Design

speak&translate_logo.png
 
 
 

project timeline

Five Weeks

University of Washington Seattle - Winter '18

Tools used

Sketch, Principle, Adobe After Effects, Adobe Illustrator

Project goal

Visually redesign Speak & Translate app and add an additional feature.

outcome

A clean and simple translating app that allows you to say what you need to say. Speak or type to translate, hear back pronunciations, easily switch between languages, and save what you’ve translated for future reference. 

 

speak&translate.png
 
on-boarding  Benefit-oriented on-boarding with animations that show exactly what the app is offering.

on-boarding

Benefit-oriented on-boarding with animations that show exactly what the app is offering.

changing languages  Tap on a flag to change languages. Most recent languages used are displayed at the top of the list. The language on the left-hand side dictates the language for the entire app as well as the input language for translations. Toggle between two languages by tapping on the double arrow in the middle.

changing languages

Tap on a flag to change languages. Most recent languages used are displayed at the top of the list. The language on the left-hand side dictates the language for the entire app as well as the input language for translations. Toggle between two languages by tapping on the double arrow in the middle.

translate by speaking  Tap on the microphone icon on the right-hand side of the top bar to translate by speaking. This takes the use into a separate space where they may complete this action. Press and hold the record button while speaking. There is a microinteraction for feedback that shows that the app is listening. 

translate by speaking

Tap on the microphone icon on the right-hand side of the top bar to translate by speaking. This takes the use into a separate space where they may complete this action. Press and hold the record button while speaking. There is a microinteraction for feedback that shows that the app is listening. 

translate by typing  Tap on the pencil icon on the left-hand side of the top bar to compose a text translation.

translate by typing

Tap on the pencil icon on the left-hand side of the top bar to compose a text translation.

Save & Delete translations  Save a translation by tapping on the star. Delete a translation by swiping it to the left and tapping on the 'x.'

Save & Delete translations

Save a translation by tapping on the star. Delete a translation by swiping it to the left and tapping on the 'x.'

saved translations  Tapping on the middle tab bar button shows all translations that have been saved. Easily un-save any translation by tapping on the star button once again.

saved translations

Tapping on the middle tab bar button shows all translations that have been saved. Easily un-save any translation by tapping on the star button once again.

 

improvements

 
homescreen.png

original

Visually overwhelming with it's flood of blue, which was incredibly distracting from the actual translations the user is making. Languages are displayed as only flags placed in bubbles.

Redesign

There is a greater emphasis on the translations rather than the background. Languages are placed up top so as to not distract from what is being translated. Languages are displayed as rectangular flags which are comfortable to the eye and the name of the language is also shown.

languages.png

original

Basic list of languages that is visually unappealing. Flags are not completely visible due to the circled masking. Not a good use of space.

redesign

Two-column organization that allows for more languages to fit in one space. Full flags are visible with brighter color values.