Learnversity

Learnversity
‍

Google UX Design Certificate

The Immigrant Center is providing for newcomers a variety of free programs and services including language aid.

The organisation needs a tool that will help immigrants learn and get accustomed to a new language.

The Product

Mobile app + Responsive website

My Role

UX/UI Designer

The Problem

The language barrier is one of the main challenges immigrants face every day. The complex UI of mainstream language tools makes this matter even worse.

The Goal

Design a simple structured mobile app & responsive website that will be intuitive to use for not tech savvy users.

I used collected data from multiple internet sources to develop interview questions for user interviews.

Based on data from user interviews I developed a user journey map and created personas. As a final step, I compiled information about competitors and made a competitive audit.

Pain Points

1. Design elements aren’t intuitive enough, icons and buttons have no labels.

2. Users can’t keep up with subtitles, time and space restrictions make text reading challenging.

Research Insights

I’ve learned that most users are not tech-savvy and work as unskilled workers.

They were not familiar with modern design elements and any additional features caused confusion or even frustration.

To get ready for the usability test, I have created a low-fidelity prototype that connects the user flow from registering in the app and goes all the way to the selected video material to watch

Usability Study Findings

1. The navigation menu is not intuitive and self-explanatory.

2. It was not clear what sort, filter, and search buttons are

3. Most users didn’t figure out that the transcription field can be scrolled down.

Navigation

I have added a label for each navigation menu button instead of relying on icons only. Now the navigation is much clearer in its functions

Scroll bar & Subtitles

As an alternative to usual subtitles, the app displays the whole text transcription. This text can be scrolled, which is indicated by the scroll bar on the side.

Consistency

I have also added labels to search, sort, and filter buttons for a simpler orientation and to keep the design consistent on each screen.

Our product meets the main accessibility requirements. The app & website site has been checked for contrast ratio to match AAA standards with the “Contrast Checker” by WebAIM.

Since transcription is one of the main parts of this product, I wanted it to be accessible as well. Based on my online research I found out that it is recommended to highlight in “bold” the text as the video runs.

As a result, the user can rely not only on the sound but also on the text visuals, this helps tremendously for deaf and hard-of-hearing people.

During my certificate project, I was taught mobile-first design.

Now I have realized that this approach has saved me from running into different issues caused by space limitations in devices with smaller screen sizes.

I have created the design kit so that I can keep the design consistent and convenient throughout the whole user flow.

While working on this case study, I have learned a great deal.

During the course program, I worked on various UX/UI tasks and went through a web designer’s thinking process.

I have acquired a valuable set of skills and understanding that iterating and having patience will get you to the right solution.