UI/UX Case Study — Discovery New Feature Mentor-on-Demand on Online Learning Platform
Hi everyone! This time, I’m going to share my design process of designing new feature in Skilvul. This project is part of the UI/UX Training Program held by the Ministry of Communication and Information with Skilvul and Skilvul as Challenge Partners. I am not employed or bound by a professional contract by Skilvul. The design process is carried out according to the directions given by the trainers day by day align with the timeline.
Background
Skilvul
is a technology platform that provides digital skills lesson content with the “blended-learning” method in online and offline form. Along with many other digital learning platforms, skilvul wants to continue to develop and innovate to provide a better learning experience. Having a good discussion space between the mentor and the mentee can be one way to increase the effectiveness of learning. Therefore, the idea arose for the newest feature, Mentor-on-Demand.
Objective
Main
- Provide services for mentees to conduct private mentoring in meeting their learning needs.
- Solution validation in the form of prototyping in terms of usability, convenience, and satisfaction regarding the mentor on demand feature.
Side
- Provide services for someone who has good skills in their field and wants to contribute to being a mentor.
Role in Team
In working on this project I collaborated with Annissa Luthfiyyatul. In general we have the same responsibilities as a UI/UX designer. But, during this process I really like and enjoy how the process of extracting data for validation (usability testing) and want to explore other things as a UX designer.
My responsibility is
- Clarify the background of the initial problem to the solution of ideas and features that will be worked on
- Make user flow
- Provide design kit
- Testing
Design Process
In this case, we choose to use Design Thinking as our design process approach. Design thinking is a design approach process that is currently popular because of the many benefits it provides and its flexibility in various ways. Can describe complex problems by reframe problems through a human approach so that later they can produce innovative, creative things that are needed as solutions.
1 — Empathize
For the first step in ideal phase we will try to reach out some people that relate with the problem we want to solve. But, in this project we just to know about this in the brief because it’s the real problem that our partner validate. So in this phase we just try how to understand from the brief and will be validate the solution in the end of stage of design thinking. Correct ! Testing stage.
2 — Define
We just started to run the design thinking in this stage. I and Annissa start to list the pain point with the way we try to position ourselves as someone who is following online learning. With Affinity Mapping we can more easier to organize and analyze the findings.
After we got a pain point, we try to think how we can find a way to help a user that have this pain point. So, we use HMW (how might we) to reframe and help us to find the great solution.
After brainstorming, we have some HMW and try to choose which HMW to bring us to gather a solution in the next stage. The conclusion for our HMW is
HMW — increase convenience for student learning effectiveness in online learning systems
3 — Ideate
After applied a divergent thinking we got some idea and filtering the idea use voting and finally to help us organize and track our idea we group what the idea that relate one and each other. After that we prioritize the idea using effort-impact diagram to determine where the idea that has a big impact on the user and doesn't need to waste much time when need a huge effort.
From impact-effort diagram we can easily to make a decision and clear vision of what idea that will working on. In Q1 where is it ‘Yes, Do It Now’ means have a big impact and low effort. So, for the first iteration will do what is in Q1.
We more focus on booking mentor first because it’s main objective. The flow for join as a mentor will be continued into the selection process from the Skilvul team, so the only screen provided is the registration form.
This is I’ll show user flow for booking mentor and join as a mentor:
After brainstorm and decide what will do for the solution, continue to make it more real by making wireframe or usually as Low Fidelity Design. But to continue the wireframing process is very difficult and requires inspiration. Therefore, it begins by trying to explore what the design will look like. The method commonly used in this case is called crazy’8s.
After explaining and voting, several screens were obtained to continue in the Lo-Fi design.
4 — Design and Prototyping
Now in one step before the last step is time to make a prototype for provide a solution that user can interract with. Before we can make a prototype, we have to make a final design that have a more detail than wireframe or lo-fi. Here is we called as a High Fidelity Design. For some existing pages we only adopt and will create a new design in addition to the needs of the mentor on demand feature. So, here are the UIs :
Landing Pages and Home
On this page we just add for mentor on demand and grouping to catalog menu in navbar because all content for hygiene feature is in this group.
But in another behaviour for user that used to scroll of all the content, user can find Mentor on Demand feature after class section.
Sign In
For first gate in anything, sign in and sign up form for new or existing user.
Either Mentor or Student, it will be mandatory feature.
Mentor on Demand
This is the feature made. in this feature there are many experts with different backgrounds. To make it easier and provide choices for students in choosing the best mentor, supporting information is also provided that can be used as consideration
Date Picker
After pass the selection phase for choosing the best mentor, student can select which student want to do the mentoring.
Transaction
For the last step, students must complete the payment and will be given 1x24 hours before this process is actually completed.
Access Mentor on Demand
Payment Success and student can start mentoring in the date that choosen before. Student can access this feature by 2way :
- Access by profile page, in content or class section.
- Access feature mentor in menu “catalog” navbar
Simulation
In this part is the playground to try simulating to access Mentor on Demand Feature.
5 — Testing
We tested the prototype with a total of 5 respondents with different backgrounds. Respondents must meet the criteria that have been set. There are 3 tasks that must be done by the respondent :
- Login & Register
- Mentor Booking (till payment)
- Start Mentoring
After currated all feedback and analysis during testing, we find many insight and we know what we have to improve and inadvertently, there are some parts that are the same as we expected to improve. For qualitative result is 80% of respondent can complete the task with total of SEQ (Single Ease Question) parameter is 5,7.
Conclusion
Starting from the define process to the testing process is a fun process and a lot of experience and knowledge is gained. What is the proper implementation for various specialties.
For the case of this project, it is very challenging because in my opinion this feature is an important feature and is indeed one of the things that I always raise after following several courses as an improvement for related parties.
Of all the series, the most challenging is the process of defining and testing. Because in my opinion the 2 stages are the location that determines the start and end before the next iteration process.
In terms of workmanship and through testing, this feature in terms of design and experience can be accepted with evidence of a SEQ value of 5.7 out of a total scale of 7. Not satisfactory, but at least it can provide the required solution.
What the next?
So many things that can be improve and for future recommendations for me is improve the experience to make it easier and more comfortable to use like such as simplifying the flow to access mentoring and several interfaces to support better functionality and accessibility.
There are too many things that can be taken from this program and during project work it means a lot for me to continue to improve and prove my seriousness in this field. Hopefully this article can also provide many lessons for those of you who have read. I thank you very much, and apologize for all the shortcomings.
