UI/UX Case Study: LEARNGUAGE — Online Language Learning Platform.

8 min readOct 24, 2021

Overview

Learnguage, is an application designed for those who want to learn about languages but are unable to go to such offline courses. In other words, Learnguage is an application where the user can learn about languages, to improve their language skills, etc. much easier than going to the general courses out there, because users can just simply access Learnguage anytime, anywhere, much more flexible.

Learnguage is design to help users to ease their need of learning new languages or even improve the languages they have already known before, in a fun, easy, and more flexible way.

Background

Basically, i’m joining an Internship Program at a company. This company engages in the field of education which provides web-based online courses. At first, i learned about all the basics about UI/UX Design, from like the process, steps, implementation, documentation, etc. After all the lessons about the UI/UX Design had been learnt, then i was assigned to analyze the company’s web as the reference in order to create my own final product of UI design along with the prototype at the end of the term of learning which of course there were some steps that i had to do.

Objective

Being able to implement the UI/UX Design Process
Being able to create the UI Mockup Design along with the prototype
Being able to get the User’s perspective and opinion about the final product (User Research & Usability Testing)

User

Basically, the target user for Learnguage app is mostly targeted to the Student at any level of education, which means this app can be used from those who are still in elementary school (under parental supervision), high schools, until college student.

Role in the Team

As one of the UI/UX designer apprentices, i was also collaborated with the two of my work colleagues in order to do the Define & Ideate steps of the Design Thinking Process, they are Isnaini Solikhah and Sena Bayu. As a team, each of us was absolutely has resposibilities towards the task that we were assigned of. Apparently, our responsibilities were basically the same, and here i attach what was mine:

Create Pain Points as many as i can based on the observation that i did toward the web.
Categorized, Classified, all the pain points into some categories.
From each categories, find the “How Might We”
From each How Might We(s), pour all the creative solutions came up from the head.
Categorized all the solutions based on the Prioritization Diagram
Voted the solutions that had the urge to be done immediately.
Do the Crazy 8’s by drawing wireframes of the more voted solutions before.

Tools

The tools that i mainly used in order to complete this project is Figma.

Design Process

1 — Empathize

Honestly, this stage was skipped, because the object we needed to observe was the company’s web itself, thus we didn’t have to observe, to analyze the data, the user from scratch.

2 — Define

At this stage, there were actually some phases or sections, such as Pain Point, Affinity Diagram, and How Might We, here i explained what i did for each section down below:

At the Pain Point Section, I had to list down all the pain points based on my observation toward the web. I listed 4 pain points for the whole team.

As showed, the yellow sticky notes(inside the red rectangle) were the pain points that i stated based on my observation toward the web, they are:

Class/courses are quite difficult to be accessed
In order to continue the class, we will be brought to the very beginning of the first class then afterwards we choose the class that we haven’t learnt about yet.
The questions on the quiz sometimes have no relation to what the materials tell about.
To access the Forum page is quite confusing.

Next for the Affinity Diagram Section, i along with team members discussed to categorize, to classify, all the pain points that had been listed down before into some categories, from 11 pain points, we did categorize them into 4 categories.

There are 4 categories in the end, they are:

Filtering Issue
Quiz Issue
Content Access
Forum Access

All the categorized pain points would be next proceed to find the “How Might We”. Basically, the How Might We Section was to create “Question” that will lead to the solution we were about to make. As the result, I did 2 How Might We out of 4.

3 — Ideate

This stage apparently can only be done if all the sections in the define stage is finished, or at least until the how might we is discovered. After the How Might We is discovered, here i list down what to do next:

Solution Idea, after all the how might we had been discovered were listed down, from each How Might We, we had to create as many as solution ideas as we could. And in this stage, i created 6 solution ideas.

Prioritization Diagram, after we got all the solutions, all of them would be prioritize in the Diagram with the User Value and Effort as the parameters. The higer the User Value and the less the Effort, the solution would be prioritized other than the other, vice versa.

The most-voted and prioritized solutions are turn out to be my solutions.

After we got which solutions that were our priorities, we would vote them to decide which solutions we should do first. Then from the result, the solutions would be brought to visualization phase, that was Crazy 8’s. The phase where we had to either manually or digitally draw a rough wireframes for like maximum of 8 pages in order to visualize what the real wireframe would be. Here i attach my Crazy 8’s drawings.

4 — Prototyping

This is the stage where the making of the UI Mockup along with the Prototype is done. Thus, down below would be the explanation what i did at this stage:

Before getting to the Wireframe making I had to first create user flow for the solutions chosen (based on vote earlier). Basically, user flow could be defined as the steps that the user would do from the very start to end in order to finish the task. Task itself is simply the aim or the destination that the user is hoping to reach to. Here i attach the user flow sample that i created based on each task.

After all the user flows were already made, I created wireframes as the matrix of the UI design that i would be designing later on. Here i attach the sample of the Wireframe

Wireframe making was done, now it’s time to make the UI Mockup High Fidelity Design. The phase where the design was brought to color, to life, along with the copywriting to make the information clearer. Here’s the sample of the UI Mockup High Fidelity Design that i created.

After all the UI Design had been done like completely, we could move on to the phase where each components in a page would get connected to the page it would brought us to. I connected all the necessary components to all the pages related, then added some animation-transition to move from one page to another, called Prototyping. Down below is the sample of the prototype implementation using Figma.

Here i attach the result of the UI Mockup High Fidelity Design along with the already Implemented Prototype:

5 — Testing

Finally, the design and the prototype was completely done. Now, it’s time to do the User Research as well as the Usability Testing. On this stage, i did the test by doing the In-Depth Interview directly with the user, but because of the pandemic, i did it virtually.

In short, i did the test with one user. The user had already been fulfilled the requirements that i required. We did the test, i shot her some not-so-personal questions to get to know about the user more, obviously related to the product that i intended to test.

After get to know the user, after some questions, i asked her to get on to the Tasks that she had to finished which there were 5 tasks overall. After she finished the task that i gave, i ask her if the product was hard to use, was there any problem be found, etc. and such questions were being asked for each task completed.

These are the documentation of the User Research i did with the User

User Sharing their screen while doing the task by trying the prototype.

In a nutshell, the user’s responds toward my product was great. Not so many problem she found while she tried the prototype. Even so, I also got some advices in order to improve the design that i made to be better, and I was so grateful because by that, i know where i went wrong and what needed to fix.

Conclusion

Overall, in order to make the UI/UX Design of Learnguage happened, all of the process, all the steps of Design Process or Design Thinking tend to at least have completed to get move on to the next steps, but since the object observed was already available, thus the first step, that is Empathize could be skipped, but if the product is needed to be done from scratch, the Empathize steps have to be completed before we get to move on to the next step of the process.

It was a great experience to get to know of how to create UI/UX design from the beginning, not only the design part itself. It was fun and pretty challenging as well. Especially at the moment of testing, it was like we knew what the user actually needed and also by that we could get much improvements later on.

Thank you! ^_^