Wireframes

Wireframes are a way to gather quick feedback about a design without fully implementing it.

The idea for this week came during a discussion about technology appropriation.

A student who is a non-native english speaker mentioned a interesting use of technology during conversations. The student recounted a situation where she, a native Chinese speaker was speaking with a native Japanese speaker in English. The native Japanese speaker was having trouble conveying an idea to his friend. To alleviate the problem, the native Japanese speaker pulled out their and used a Japanese-English translator to translate words.

My idea this week was to create a translation app with the purpose of being used during conversations.

Research

I began my research looking at current translation apps on the market. I looked at most of the top rated apps. I found through my exploration that most of these apps provided adequate translation services but for the most part were not designed to be shared between two people.

For one, the font size of these more academically oriented apps were too small. They might be readable by someone holding the phone close to their face but when shared between two people it may be hard to easily understand the meaning of a certain word.

After evaluating the other apps in the market place I did a quick analysis to set up the framework of my app.

Task Flow

After conducting the preliminary research, I moved on to making a basic map of the interaction that would take place on the app.

I went on to make a more detailed task flow, but for the most part the wireframe I created followed the basic flow of input vocab, save the vocab and practice the vocab word until memorized.

Building the Prototype

To build my prototype, I used adobe experience design. I used XD because I wanted a smooth interaction with the my tool. I like axure and other web based prototyping tools, but I have found that XD seems to break my flow of thought and allows me to finish my prototypes faster

Overall, I found XD to be well suited to make fast interactive prototypes but lack a few features. At this stage things like user input and motion weren’t needed and I thought that XD worked well for my needs.

Check out my prototype here.

Evaluation

To evaluate my idea, I tested and showed the prototype in informal show and tells. For the most part I was gathering ideas of how effective my layout and higher level interactions were.

I found that

  1. People did not realize my app was for translating two languages
  2. Mobile layouts should have less clutter in each row
  3. Buttons should be of appropriate size
  4. The use of a photo icon are not the best at showing scrollable images

Iterations

To make changes and push this idea further, changes will be implemented during next weeks assignment for a high fidelity interactive prototype.

Show your support

Clapping shows how much you appreciated Michael Fernandes’s story.