My new-and-improved prototype of the Speak and Translate app

CONCEPT
Sometimes quality existing products just need a facelift. Not Speak & Translate—it demanded to be reinvented. On this, my first iOS app design and prototype, I spent half my time learning Sketch, Principle, and Flinto, and the other half researching translation techniques. 

Early art concept.

PROCESS
I wanted to treat the phone as a tool, with a sense of play. By tipping the phone left or right, the language input/output switched. In later versions I tried to keep this playful, physical approach.

My first concept. Rotating the phone left and right changes language input. Playful, but bulky and visually incoherent.

PROTOTYPE
Sharing visual confirmation with the other person was a weakness of the original Speak & Translate app. Voice recognition software isn't perfect yet, and confirming what I've said as it gets translated prevents miscommunication. Many users don't feel comfortable handing their thousand-dollar phone to a stranger; how do I share my screen when they're in front of me, across a counter or table? After experimenting with several variations, I settled on a tap-activated text flip function:

The app's unique text-flip feature allows elegant readability across from each other.

While retaining the phone user's orientation to their own language, the translated language appears facing the other speaker. Both can read their own language from their own position across the device. The interaction and animation still make me smile. It accomplished both tasks: confirming meaning in a delicate situation, and ludic physical manipulation.
Another frustration in the original app: language selection. Users were required to navigate away from the translation page in order to change languages, and it wasn't easy to discover. (It took me several minutes... boy, did I feel dumb.) I simplified it, then provided simple instructions:

Clear onboarding and intuitive controls simplify tasks like selecting languages.

The swipe-up animation feels conventional enough to accommodate quick familiarity, and by keeping the language selection on the same screen as the translation, it feels less fidgety.
The original app's page hierarchy was a mess, and it contained no introduction. I fiddled around with it for a while before figuring out how to use everything. In this version I incorporated a full onboarding experience:

In-depth walkthrough.

NEXT STEPS
The onboarding's pacing feels a little slow to me (partially due to my prototyping software's limitations), so I hope to refine its speed and content based on user feedback. The simplified visual language improves on the original with clean, predictable animations, but by digging into the visual design harder I hope to give a feel of sophistication and grace. A touch of levity and a few "ah-ha!" features playfully elevate the app, but adhering to formal constraints may give them an elegant touch. With greater confidence in my tools, I hope to create more visually sophisticated prototypes in the future.

more Isaac Waring designs:

Back to Top