UI/UX Case Study — Designing a Learning Management System Mobile App
Hello everyone! This time, I’m going to share my design process of designing Learning Management System Mobile Application. This project is an individual (some tasks involve group work) project given from taking part of Skilvul Virtual Internship (SVI) as part of Kampus Merdeka Internship. The design process is carried out according to the directions given by the mentor week by week align with the timeline.
Here are the details for this case study:
Product Name: istudy
Product Description: istudy is an online education platform that flexible, affordable and job-relevant online learning. istudy helps to prepare digital talents in Indonesia.
Product Mission: Increase access to high-quality education for everyone, everytime, and everywhere.
Tools: Figma
Overview
The idea of making the concept of istudy was supossed to help all types of workers prepare for the path ahead — wherever it leads. But ended up experiencing a decrease in revenue for 1 year. So I decided to created new this platform with the aim of making it more User Friendly with an attractive appearance and can increase learning motivation when using this platform.
In terms of designing a product, there are several stages that need to be done. In this case study, the steps taken follow the basic stages in the design thinking process.
Role in Team
As a UI/UX Designer, I am collaborating with 2 team members, Adhicitta Masran and Efraim Runtuwene. In this team, my responsibilities are:
- Create List of Pain Point
- Create How-Might We
- Create Solution Idea
- Create Affinity Diagram
- Create Prioritization Idea
- Create Crazy 8's
- Create User Flow
And also for the rest of the design process such as create Wireframe, UI Style Guide, Hi-fi Design, Prototype and Testing, I made them by myself.
Design Process
Design Process is a design iteration process to improve usability and optimize interface design. For this design I use Design Thinking as an approach to the design process. Design Thinking is an evolution of the Human-Centered Design process that can be used to create innovations in product design. The Design Thinking Process consists of:
1 — Empathize
The purpose of the empathize stage is to assist the designer in finding out the views & needs of the target user by doing research before defining the problem statement and making ideation. At the beginning of empathize stage, participants are given a description of the UX Challenge Test where the empathy stage has been carried out and the results are as follows:
- Users are not happy with the display
- The platform is complicated to use
- Loading the application takes a long time
- It’s hard to find motivation to learn
Target User:
- Age : 18–55 years
- Profession: Employee
- Language: Indonesian
- Economic level: Middle and above
Business Process Scope:
- Account Registration
- Login
- Home
- Course Details
- Purchase
- Learning process
With the results of this research, so I decided to create new the platform with the aim of making it more User Friendly with an attractive appearance and can increase learning motivation when using the platform.
2 — Define
After collecting and analyzing all the information obtained from the empathize stage, the next step is to defining user problems from the results of empathize stage and making How-Might We as an opportunity. The define stage that I did consisted of making a list paint point of users from more painful to less painful and created How-Might We together with team members then we vote to choose How-Might We.
List Pain Points
How-Might We
Final How-Might We: Create an attractive and easy interface to help users learn
3 — Ideate
After analyzing the pain points and opportunities, next is brainstorm ideas based on How-Might We, then formulate the best possible solution to solve the problems that have been collected in the define stage by making an affinity diagram which contains grouping solution ideas into several categories then prioritizing solution ideas according to user value and effort and finally making crazy 8’s. Crazy 8’s made on HVS A4 paper, folded into 8 frames, and drawn for 8 minutes.
Solution Idea
Affinity Diagram
After getting the ideas that will be made later, we group the ideas by category. This grouping of ideas is commonly referred to as an affinity diagram. We got seven groups of ideas which are Gamification, Data Analytics, Hygiene Feature, Mentor and Discussion, Future Feature, Reminder, Video and Settings, and Learning Support.
Prioritization Idea
Furthermore, the ideas that have been grouped are entered into the prioritization idea diagram to determine the priority level of these features. By creating Prioritization Ideas, we can determine which ideas to work on now, work on next, work on last, and work on later and we can also determine the minimum valuable product (MVP) for the first version of the application. This prioritization process is carried out based on user value and effort.
Crazy 8’s
After find out the solutions, me and the rest of the team made sketches using design sprint method, the crazy’8. Crazy 8’s made on HVS A4 paper, folded into 8 frames that portray the rough layout of the mobile app, and drawn for 8 minutes.
4 — Prototyping
After Brainstorming ideas, Prioritizing ideas and Crazy 8’s, next stage is prototyping. At this stage will do several things such as created user flow, designing interfaces (low-fi and high-fi) from Crazy 8’s, arrange the user interface into a process flow that is in accordance with the solution idea, created UI style guide, then created a prototype that can be used for testing.
User Flow
User Flow is a diagram of the steps a user must take to complete a task. I use FigJam for making the user flow. I work on this user flow together with my team members. Here is the user flow for the design of this application.
Wireframe
After making some sketches and user flow, I proceeded to created the wireframes. Wireframe is a layout in the Low-fidelity (Lo-Fi) version that can help designers present information in interfaces, provide an outline of the structure and layout of the interface, and speed up the ideation process. I also made a little changes as part of the ideas development of the rough layout in the sketch process.
UI Style Guide
Here is the UI style guide that I use on the high-fidelity interface of this application. The reason why I created UI style guide is so that the UI Design can always be consistent whether it’s the color or size of similar elements.
Interface Design
After finalize the ideate phase, then I make user flow, wireframe, and, UI style guide, next step is I make a high-fidelity prototype by beautify the interface design, add some flows to make it interactive, and use the UI style guide that I created before.
Interactive Prototype
Prototype is a 1:1 form of product display that will be developed but not yet real. Prototype is used to try & simulate the design solution that has been created. I created the interactive prototype on Figma. This prototype contains 67 (empty and filled) screens such as login, register, choose interest, course detail, learning path, and payment. Here is the interactive prototype that I have made.
5 — Testing
I did user research using In-Depth Interview and Usability Testing methods. This user research will be done through Google meet and participants will share screens while interacting with the prototype.
Research Date: October 20, 2021
Research Objective:
- Finding out user needs in conducting online learning.
- Finding out user habits in doing online learning.
- Find out the level of usability, convenience and satisfaction of the idea solutions offered in the Registration & Login, Course Search & Filter, Wishlist & Cart and Course Payment process flows.
- Determine whether the user has a satisfactory experience.
- Understand how users use the application.
- Find out if users can make course purchases.
- Find out what information users need to make a course purchase.
Respondent Criteria
- 18–55 years old
- Work as an employee
- Domiciled throughout Indonesia
- Have good articulation in communication
- Middle and upper economic level
- Have a good level of understanding of technology
- Can operate computer well
- Have experience using online learning applications
Research Scenario
At this stage, I created 5 tasks and scenarios related to the product for usability testing. Here are 5 tasks and scenarios that I made to test the usability of this platform.
Through this phase, I got the feedback and comments on what I can improve from this product design. Here’s are the results of usability testing session:
Single Ease Question
After users complete all of scenario, I ask users about the overall level of process flow in the context of design and convenience with Single Ease Question. From 1 to 7, all of the users gave me number 6.5 which signifies that design of this solution is very easy to use.
Conclusion
In conclusion, the users gave a score of 6.5 out of 7 which means that the respondent was satisfied, happy, and enjoy by the design of this solution.
The lesson I can take is that in designing UI/UX, it’s not just about creating a beautiful display, but also how to create a beautiful display that users can use comfortably and efficiently. Hopefully in the future this solution design can be developed into a real application product.
Next Recommendation
Since this was my first design in my internship, I felt that there was still a lot for improvement. This design is made based on the thoughts of team members and my personal assumptions, I hope this design can be the right solution that will be ready to be given to help many people in accessing courses that cover a particular field. So, users can mastering as many fields as they want.
I would like to thank Skilvul, team members, and mentors who have helped in completing this design. And also thank you for whoever read this! I hope you enjoy reading this case study and also I really hope for your critics, advices, and feedbacks.
