create by my teammate , Jonathan
Uncommon icons on the navigation tab should be labelled, and the chosen icon images should not be vague to cause confusion
Project Summary :
Resolving misinterpretation in today's translation application
My Role
User research and prototyping the interactive screens
Platform
Mobile Application
Program
Adobe XD, Figma ( revamp version)
Year
2019, 2022 ( revamp )
Travili
From observations and looking at patterns, most of misinterpretations occurred because each language has its complexity and ways of functioning. For example, the different meanings in idioms, expressions, and compound words are not translated correctly to the given context.
Problem (Empathize)
Introduction
Project overview
Our goal is to create an app that aims to overcome language barriers by incorporating modern technology, Artificial Intelligence, that can understand and adapt accordingly to how each language functions and builds, thus reducing the frequency of mistranslation results.
Goal
Introduction
Project overview
Initially, the concept of the project itself revolved around improving current translation applications with a broad target audience such as students, travellers, and language learners. To understand the current translation trends in technology and scope down our design concept, we analyzed the top three popular language gadgets and platforms ( competitive analysis).
Initial Phase (Define)
Introduction
Project overview
Looking back, I realized ili device is not a good example for competitive analysis. As Travili is a product in the form of mobile application, it is better to choose an app that serves a similar translation purpose. We could gain better insight from analyzing another application as it is more relevant to what we aim to execute.
Introduction
Project overview
During the initial phase of the design process, we decided to interview and survey the potential users to create a product that provides the best solution to their problems.
From the responses gathered, we can narrow down the main aspects of the app that we must tackle.
Interviews and Surveys
Introduction
Project overview
Thirty-three people participate in our survey questions. 31% use these language apps to learn a new language, 51.5% find the accuracy of the translation the most trivial part of an application. As a result, we are able to form a question which is "How can we increase the accuracy of translation?".
From this question, we decided to narrow down our target audience to mainly "Travellers" as they are the potential users who depend highly on the accuracy of language translation compared to other users. At the same time, allowed us to thoroughly iterate our prototype that highly focused on delivering accurate translation results.
Introduction
Project overview
We later conducted an empathy mapping to get in the minds of the travellers when they encountered a situation where they need translation tools . With this information gathered, we can identify the purpose of the application and brainstorm the features we want to implement into the app.
Introduction
Project overview
The rapid prototype was sketched out after we discussed the main features and the user flow that will be implemented on the application. With the survey results of 31% of the participants using language applications to learn a new language, we decided to add a learning section that was not initially planned. And the favorite features were introduced as we want to save up the time of searching up old translation results, or users can get back on the interesting phrases they stumbled upon.
Paper Sketch
Introduction
Project overview
Because we want to focus on the bare-bones and functionality of the app, the prototype was in grayscale. Having color themes and visual elements incorporated in this stage would distract our focus from the application's performance.
Low Fidelity
Introduction
Project overview
After the testing, we realized AI implementation works well as a concept but is hard to follow along during user testing. Therefore, we decided to explore different methods to present our hi-fidelity prototype.
Testing results
Introduction
Project overview
Features are elaborated for the high fidelity prototype to create a seamless experience. We added all visual elements into the prototype, including fonts used, color schemes, and a consistent layout on each screen.
High Fidelity Prototype
Introduction
Project overview
However, after conducting our user testing, we realized many technology limitations prevent users from fully understanding the use of our application. Moreover, given that the application depends highly on Artificial Intelligence and conceptual ideas, it is difficult for us to replicate the authentic user experience.
Therefore, our team decided to showcase our product in a short video format, giving us more opportunities to create a scenario and present the onboarding experience of Travili features.
Introduction
Project overview
I decide to draft a storyboard for my team as we need to create a storyline for the users to understand the purpose of our application.
In the end, we presented the project in a video format made in Adobe After Effect to showcase the onboarding experience of the application , which also showcase how smart Travili is with the AI translation integration.
Storyboard
Introduction
Project overview
I decided to revisit the project in 2022 as I could see the opportunity to present the prototypes better to support the conceptual idea of the app. In addition, I realized many of Travili's interfaces could be updated, and the design elements could be presented on a much more professional level.
2022 Revamp Version
Introduction
Project overview
In this version, I focus highly on the interactivity on the onboarding screen. In the former version, the elements' hovered effect and clicked state are neglected; therefore, there's less interactivity with the user action. I realized as a designer; it is easy to overlook these small details in the design process because of how seamless it was built onto the application.
Thence, in a revamp process, I decided to explore with a drop shadow for the hover state and a darker shades button for a clicked state of the button. I realized these small implementations are essential aspects of the prototype. They keep the user informed about the current state on the screen and make them feel at ease to continue navigating within the app.
Interactivity
Introduction
Project overview
I decided to set a grid system for the screens as the previous version barely had any consistency. Unlike the former version, the 2022 prototype was designed using Figma, where the tools can answer my design needs.
Grid System
Introduction
Project overview
In the older version, the typeface weight is also not conducive to reading as it appears to be pretty thin on a light background. The use of white on the text made it exceptionally hard to read as the contrast is pretty low.
Therefore, in the revamped version, I decided to establish a clear text hierarchy with the typeface thickness and text size. High color contrast is applied to the area where users commonly scan, such as the translation's result and the area where users input their text.
Contrast
Introduction
Project overview
After revisiting the old design, I realized that though monochromatic blue was the primary palette, the tones were chosen without a strong understanding of applying shades and tints. Therefore the visual execution is not properly tackled. To prevent the same mistake, I selected one primary color and adjusted its tints and shades as a hover, background, and text colors on the screen. In the end, the color palette ratio was created to establish a visual hierarchy to avoid confusion from the users when they used the app.
Color Palettes
Introduction
Project overview
Overall, I've learned a lot through this project, such as coming up with the final execution from the technology limitation, AI.
We could be more in-depth with the competitive analysis. I realized we could touch more on the strategy and tactics of the competitor's translation apps or analyze why Duolingo's interface and google translate app appear to be visually different even though they are both language apps.
There is still room for improvements, such as the micro-interaction features which enhance the user experience. For example, I would add a scrollbar on the learning section as it tells the user that there is still content below the fold or adds a tactility function like having vibration when an action is successful. Designing loading screens also provide a better user experience as it provides a sense of what is going on in the app for the users. I believe as a UX designer, our job is not only to provide a visually pleasing product to the user but also to deliver a delightful product experience.
Reflection
Introduction
Project overview