UI/UX Case Study: Stoday — E-Learning Mobile Application
Over time we as humans have the desire to continue our growth and improve ourselves. Learning new skills is part of that growth. One way we can learn is through e-learning platforms and online courses, which is where Stoday comes into play.
As part of Skilvul Virtual Internship, we were challenged to create an educational mobile application design with the following brief.
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.
In the span of a year after their platform’s launch, Company X’s experienced a decrease in revenue. Their research team found that the decrease was affected by problems in their educational platform, mainly the mobile application. They found that users were not pleased with the application’s design. Users also complained that the application was too complicated to use and that the application was slow to load. Another problem was that users lacked the motivation to study and continue their courses.
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
The features needed on the mobile application are:
- 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.
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
We also know from the research data that the users face problems such as:
- 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.
After plotting out the pain points, we had a clearer vision of what we needed to fix and improve. Through that vision, we determined the main goals and objectives that we wanted to achieve through the new design. This was done with the help of the How-Might We board. We then decided that we wanted our design to help users stay motivated. We also wanted users to navigate their way through the application easily.
3 — Ideate
In the ideate stage, we brainstormed ideas based on our the goals we determined in the empathize stage.
After that, we grouped the ideas that shared the same concept in an Affinity Diagram.
Once the Affinity Diagram was done, we sorted the ideas in the Idea Prioritization diagram. The ideas were sorted based on effort and user value.
The last step in the Ideate stage was Crazy 8. In this activity, we spent 8 minutes to draw up 8 rough sketches that could potentially be used in our design.
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.
The next step is to create the wireframes for the main features based on the created user flow.
After wireframing, I created a design system for the mobile application. The design system regulates the color palette, typography, buttons, and input fields.
Once the design system was complete, I continued on to design a high fidelity prototype based on the wireframes and design system.
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.
After the interview, I asked the respondent to test out the prototype and asked him to do a few tasks. During the usability test, the respondent stated that he had no problems carrying out the requested tasks. He said that the information provided was sufficient and that the flow was easy to understand. The only concern that he had was that a few users might not be aware of the Bookmark feature if they are not familiar with the Bookmark icon.
I also utilized the System Usability Scale (SUS) to measure the usability of the prototype. The prototype received a final score of 70 on the SUS rating system. A score of 70 means that the design passed the usability test.
Overall, the in-depth interview and usability test showed promising results, as the user did not find any difficulties in using the prototype and the SUS measured high scores.
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.
Through this UI/UX study case, I have learned a lot of new things. This experienced has pushed me to continue and improve my design and research skills. If you have any feedback to better this UI/UX study case, please feel free to comment!😊
