LearnIn, A Mobile-Based Online Learning — UX Case Study
This case study was made when I got a challenge from my internship program to designing an Online Learning app.
This idea is just an exploration of making a mobile-based online learning. This exploration is not based on the specific people problems and only as a training medium for me in designing a mobile app.
LearnIn started when most online courses are web-based, which is not compatible to open on mobile. With this I think what if there is an online course that provides a mobile version that can be opened on a phone, so people can open it anytime and anywhere. In this exploration I try to create a pattern like e-commerce for an online course application. Also the dashboard feature that is usually on a website, I try to use it for a mobile app.
For making a product, we need an approaching to creating a proper product. In this exploration, my design process consist of Define, Ideate, Design, and Test.
1 — Define
In this first stage, I gain some of Pain Points to find out what were the problems when studying in web-based online course, then I made my idea solution with How Might We.
Based on my own experience when studying in web-based online course, there’s some problem. And here’s my hypothesis —
- Not compatible if opened on a phone. must to open on a laptop, which is very impractical.
- Interface that doesn’t focus on the class itself
- Not familiar with the flow when purchase a class on a website.
How Might We
From several Pain Points, I used the How Might We method to determine the solution idea.
2 — Ideate
From the Solution that I found from previous stage, I have to broken down the solution into several features that will later be used in the product through Solution Idea. After finding several solution ideas, the next step is to prioritize which idea should be done first. Then made several flows for each scenarios and a rough interface design using Crazy 8's.
From the How Might We method, I broken down some of solution into several features with Solution Idea. —
I then put the ideas into a priority matrix, which one should be done first, which one will be next, which one will be last, and what will be done later. —
Down below is User Flow that I created. I created two User Flow contained in this app. First is the flow when making a class purchase transaction and Second, is the flow when opening class that has been purchased.
After getting a picture of the flow that will be used, I started the sketching process using pencil written on a paper folded into 8 parts or commonly known as Crazy 8’s. And here’s the sketch that I made:
3 — Design
Finally the most fun parts, Design!. At this stage I first made Wireframe to determine the right layout and so as not to get distracted by any visuals things. From the Wireframe that I made, I added a visual aspect in the Hi-Fi Design process.
For the Wireframe, I focused on 3 page first, Home, Category, and Checkout.
In making High Fidelity, I use UI Styleguide that I made, so that my design are consistent, from Typography, Colors, and Other.
And here’s the High Fidelity Design of LearnIn App —
Log In and Sign Up
I made this Log In and Sign Up Page as simple as possible, so that user’s focus is not distracted by other things.
Home and Class Category
There’s a change from the Home page Wireframe that I made. My assumption is that the first thing people who want to study in online course look for is the topic or class category. So, I put the Category section above the class list.
For the Design class category above, I made a pattern like E-commerce and there is a filter and sort feature do that user’s are familiar with the interface.
For the Checkout flow, I adjusted to the flow commonly used by E-commerce app and made it as simple as possible. To make a payment, user must copy the payment code to the selected payment option. After the payment is successful, a success page will appear and user can go directly to the newly class purchased.
Class Detail and Dashboard
For class details, I use tabbing as a navigation for the user to see the class description. I created the Dashboard menu myself as a place to manage all user activities in the application, and the Dashboard is also used as a place to open or study classes that the user has purchased.
Here’s Prototype I made with Figma
The last stage is validating my design. I use In-depth Interview and Usability Testing method to gain some insight about my design. For the UX Metric I use Single Ease Question.
- 18–25 years old
- Final years student who are doing an internship
- Fresh graduate who wants to find new knowledge
- Often use learning apps to study
- Have a good level of understanding of technology
- Finding out user behavior, needs, and problems when doing online learning
- Find out if the user understands the flow when registering, logging in, transactions, and studying in classes that have been purchased from the idea solution created
For an explanation of other research processes, you can access the research documents that I did here
After doing the research process, here are some of the findings I got:
- User doesn’t know if he can change the choice of payment method
- Users need to learn more in understanding dashboard features, because dashboards are rarely used in mobile apps
- From the user flow made, users really feel the ease because they are very familiar with the apps that are often used
Based on the Usability Testing process carried out, user gives a number 6 from a scale of 1–7, which means user is satisfied with the design made. But there are some things to iterate over this design. Especially when the checkout process and learning in the classroom. And these two things are the main for my next iteration process.
Overall, I think there is a need for a mobile-based online learning place. In order to make it easier for users to open their classes without having to open a laptop. For the flow and patterns can be adjusted like applications that are often used everyday.