UI/UX Case Study: Stoday — E-Learning Mobile Application

The Challenge

Company X is a company specialized in the EduTech industry. Company X launched an educational platform that provides online courses on topics such as programming, digital marketing, UI/UX design, product management, etc. These courses are aimed towards Indonesian workforces that want to improve their skills in their spare time.

Objectives

Based on the research results, we were challenged to design a mobile application for Company X with the following specifications.

  • User-friendly design
  • Attractive interface
  • Increases users motivation to study
  • Account registration
  • Login
  • Home
  • Course details
  • Transactions and payment

The Team

Some parts of the challenge required us to work in teams. My fellow team members are Audilla Putri Ferialdi and Ananda Annisa Putri. As a team, we collaborated in the Define and Ideate stage. After the Define and Ideate stage was completed, we continued to work on the project individually. The tasks I did individually were:

  • User flow
  • Wireframe
  • Design system
  • High fidelity prototype
  • User research

Design Process: Design Thinking

We approached this challenge by implementing the Design Thinking approach. Design Thinking is human-centered and solution-based. The human centered aspect of Design Thinking helps us get a better understanding of the users and their needs, while the solution-based aspect helps us create innovative solutions. This type of approach corresponds with the requirements of the challenge presented.

Design Thinking Stages

1 — Empathize

The main idea of the empathize stage is to understand our users, including their problems, their needs, and their point of view. From the research provided by the challenge brief, we know the targeted demographic is as the following.

  • Age: 18–55
  • Profession : Employee
  • Native Language : Bahasa Indonesia
  • Economy: Middle to upper class
  • Lack of motivation to study
  • Difficulty in using the complicated platform
  • No interest in the existing UI design

2 — Define

Using user information gathered in the empathize stage, our team brainstormed possible pain points that were caused by the existing mobile application. Our main concerns were related to the flow of the existing application and how the existing application was not interesting for users.

User pain points
How-Might We board

3 — Ideate

In the ideate stage, we brainstormed ideas based on our the goals we determined in the empathize stage.

Solution ideas
Affinity Diagram
Idea Prioritization diagram
Crazy 8 sketches

4 — Prototyping

The first step in the prototyping stage is creating a user flow. Here I created the user flow for the main features, which are Home, Transactions, Course Details, and Bookmark.

User Flow: Home
User Flow: Transaction
User Flow: Course Details
User Flow: Bookmark
Wireframe: Home and Course Overview
Design System
Stoday prototype

5 — Testing

Based on the interview, the respondent thinks that it is very important to learn and improve his skillsets in his spare time because it can increase his value as an employee. The respondent also said that he has never used an online course platform because the registration and subscription process can be tedious. He usually learns from Youtube videos.

Usability testing results
SUS Score

Conclusion

After an iteration of the design thinking process, a design prototype for Company X’s e-learning mobile application was created. The design was aimed to solve the problems that were present in the existing mobile application. The main focus here was to give users a system with flow that is easy to understand and an attractive user interface. This approach was shown to be successful based on the results from the testing phase.

Recommendation

As stated in the testing section, the respondent had concerns for the Bookmark feature. Other than that, the respondent said that he needed some help to use the prototype. This can be improved in the next iteration of the design process.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store