It was only natural that we group the actions that are immediately tied to the textbox and kept it closer to the textbox which binds them. We then arranged the other options in a more accessible space which is not very difficult to adapt to.

This could take some getting used to. But assuming the positions of the options will solve a major reachability issue for the regular users, adaptability should be swift.

Reachability

As a user, it was an absolute necessity that the actions I frequented were reachable. I used the text box and the camera frequently and it had to be easily accessible. Talking about wants and needs, here are my most frequented scenarios:

Open app → Type in German → See in English

Open app → Choose camera → Scan label of the product

Open app → Type in English → Show German translation to someone in the store

Most of the people I spoke to, who use Translate pretty often, also confirmed that they used the text box more often. The camera was the next most used option because German was, again, a new language to them.

Comparing the “ouch” zones for the current and the proposed design

Ideally, the most used options must lie in the reachable zones and that’s something we’ve tried to solve by this exercise.

Seamless-ness

The type flow in the app is very special because it posed as a cute little 2-screen flow but ended up being so much more.

It has always bothered me to have the experience of a text box far from the keyboard. It’s easier when what you type appears closer to where you type it, right? Yes and no.

Yes, when you’re adding a task or typing in your username or password.

No, when you’re typing something that will trigger a suggestion list. Because then the list would have to defy gravity. And that’s where we hit a roadblock on our first iteration.

Here’s how the current type flow works:

There’s the home state, the typing (or) active state, and the result state. As much as I wanted to reduce the number of transitions, there was not a lot of ways to remove a state.

And I call them states and not screens because that’s what they ended up being; States of the same screen. The first and the third states were ideally the same screens, but the second typing screen looks a lot more disconnected.

As a user in a hurry, I’ve mostly dropped off prematurely in this flow. That’s because you get to see the result of the translation as you type. I just want to know what it means, and I want to know it real quick. And in the current app getting from screen 1 to screen 2 felt like it was taking you to a page exclusive to typing and looked very little like the previous screen.

So we connected the transition and stitched the textbox to be similar on all 3 states in the type flow. The textbox now prevails on all states, making it seem more seamless.