Learn with Feb-Edu. — A UX Case Study
Overview
Feb-Edu is an online courses application designed for either students or workers in Indonesia. This mobile app was designed from conception to delivery to complete the Skilvul UX Challenge. In this challenge, We implemented what we learned in Skilvul including defining problems, making user-flow, paper and digital wire-framing, digital prototyping, conducting usability testing, and iterating the design.
“This is my very first UX Case Study that I made.”
About the Challenge
The challenge is about Feb-Edu, an edu-tech company that facing decreased revenue for the past 12 months. Therefore, the company wants to redesign their app to meet their user’s need. The researcher team in the company has done a little research and managed to define a few problems.
▸ Problems
- Users is unhappy with the app’s interface
- The platform is too complicated to use
- Load time takes too long
- Hard to get motivated to study
▸ Challenge Duration
August — October 2021
Objective
Based on the defined problems, we identified some objectives needed to redesign Feb-Edu app in order to meet user’s needs.
- Design an app that motivate user to study
- Design an app with simple interface and user-friendly
Design Process
In this challenge, I collaborated with Mikael Widi Radito, Anithiya Tata Widhiyanti, and Muhammad Rizal Wibowo to empathize, define, and ideate based on the challenge — meanwhile the rest is done individually.
We chose Design Thinking for design process approach. Design thinking can be used to break down problems in any system, especially when the problems are unknown/ill-defined.
This strategy has a human-centered core, and leads us to create creative and innovative ideas. It has five steps — empathize, define, ideate, prototype, and testing.
1 — Empathize
To identify what the users needs, we need to specify the target user in order to find the problems. We have done a little research and identified what user needs in order to redesign the app.
— Target User Criteria
● 18–55 years old
● A college student or a worker
● Lives in Indonesia
● Use Bahasa Indonesia as their native language
● Middle-to-upper class in economic
2 — Define
In this stage we define the problems based on what the user needs. From what we learned, we should put the user in the center of the problems in this stage.
— Pain Points
● Interface: Users find that the app interface isn’t attractive at all
● Usability: Users is confused when using the app because it’s too complicated
● Time: Users find that the app takes too long to load
● Purpose: Users is not motivated to study when using the app
— How-Might We
Based on the pain points, we decided to choose one of the problems and made it our main goals for the app. We have done it by making some of How-Might We’s, and choose the most voted one.
● How might we make an app that motivate the users to study?
3 — Ideate
Solution Idea
We then list our ideas for the app based on the How-Might We that we already chose. We need to think creatively to find the most suited ideas for our app.
“There’s no bad idea, just an idea that can’t be implemented YET.”
Affinity Diagram
The ideas that we already listed will be categorized in this stage in order to find which features should we implement first to our app. Therefore, the categories that we made based on our ideas are Promotion, Gamification, Discussion, Career, Video, Social, UI, Navigation, Back-end, and Side feature. After we categorize the ideas, then we vote to decide which features to be implemented first.
Prioritization Idea
We put the categorized ideas in a table based on the effort needed and user value of the feature.
Crazy 8's
We made a paper wireframe to get a picture on how we will make the app. We also do a vote session to decide which screen ideas that we will use.
Userflow
User-flow is needed to make a prototype. Our team decided to make a user-flow for the main features of our app first. The user-flow are Register/Login, Course Detail, Transaction, Point Exchange, and Collect Point.
4 — Prototype
Wireframe
In this stage, I made a digital wireframe based on the previous stages that I already done. Wireframe helped me to specify my application’s layout and structure before I make the user interface and prototype.
Design System
Before I started to design the user interface, I made the Design System first to make the designing process easier.
— Color Style
— Button Style
— Text Style
— Text Field
— Header
Mockup
Based on the wireframe that I made, then I designed the user interface with a little improvement from the wireframe.
Prototype
I made the UI Design and then connected the frames one to another to create the prototype of the Feb-Edu app in Figma.
5 — Testing
After I made Feb-Edu’s prototype, I conducted an interview with user in order to do a usability testing.
— Research Objectives
● To find out whether Feb-Edu app is already meet the users needs
● To find out whether Feb-Edu app can motivates users to study
● To find out the convenience level of the Feb-Edu app
— Respondent Criteria
● 18–55 years old
● A college student or a worker
● Lives in Indonesia
● Use Bahasa Indonesia as their native language
● Middle-to-upper class in economic
— Tasks for the Usability Testing
- Register and Login
- Buy a course
- Access the course and do the Quiz
- Exchange Point
— Usability Testing
In the interview session, I managed to do a usability testing with a user that matched the criteria. The first thing I do is introduce myself and the Feb-Edu app, explain the purposes of this interview, and explain what are we going to do.
After the interview, I managed to got some feedbacks from the user regarding the Feb-Edu app prototype. The user said that overall the app is already good and user-friendly since the user has no experience of using online course application, but there’s some things that need to improve, for example when the user is asked to exchange point, the user is a little confused to find the exchange page. The user said that I can put the point exchange icon in the home because previously the point exchange icon was in the profile page.
For the usability metrics, I used the Single Ease Question to determine the convenience level . The user gave 6 for the score, which passed the target result. Based on this feedback, I iterated the design once again to meet the user need.
What I Learned
From this challenge I learned new many things. Defining problems, bringing ideas, making user-flow, paper and digital wire-framing, digital prototyping, conducting usability testing, design iterating, and many more. I learned that the ideas itself are the only beginning of the process. Usability testing and user’s feedback influenced each iteration of the app’s design.
Conclusion
Feb-Edu is an online course app that aims to motivate users to study. The app is designed with gamification features for example points collect and points exchange. The user can get points by completing their courses, and then exchange the point with items that we offer, therefore is a win-win solution. Based on the usability testing for the app, there’s some feedbacks like points exchange button that a little hard to find. However, the overall application is already good and user-friendly for beginners.
Next Recommendation
The design of Feb-Edu app will needs some improvements to increase user experience. Based on the user and team’s suggestion there are things that can be done to improve the design.
- Determine which button that’s hard to find or is not in the right place
- Add more gamification features to motivates more users to study
- Consider adding social features so the users can study together
Since this is my very first case study I ever made, thank you for your time to read this until the end. Every feedbacks and suggestions are welcome to improve myself in the next project.
You can also connect me at Linkedin, if you want to know more about me. This is the end of my case study, peace out!
