Note: the article below is written in English while the data is represented in Bahasa Indonesia.
The Objectives
On July 2022, I received an acceptance email from the Ministry of Communications and Informatics that I’m eligible to participate in the Skilvul Digital Talent Scholarship PROA UI/UX Design.
The Challenge
Skilvul is a tech-ed platform that provides digital skills learning content with a “blended-learning” method in both online and offline forms.
Skilvul plans to add a new feature to their service called Mentor On-Demand. This feature is needed because, currently, the mentees outnumber the mentors available. As a result, the mentors couldn’t provide maximum teaching to the mentees.
The MVP
Here are the MVP (minimum viable product) defined by Skilvul.
- The mentee as a user will visit the Skilvul.com page to view the list of available mentors.
- The mentee can also view some information such as price, amount of experience, programming languages mastered, location, and some other related parameters.
- The mentee will see a button to hire the mentor and proceed to the payment page which requires them to log in or register to the Skilvul platform.
- To make it easier for mentees, before renting or booking a mentor, they can contact the mentor to ask about programming languages and materials that will be discussed through the “Chat Mentor” feature.
- After making payment according to the details, the learning process with a private mentor can be carried out.
- Skilvul also opens the door for experienced developers who would want to become a mentor on their platform. Therefore, a mentor registration process is needed.
The Role
My tasks in the team were:
- Log in and registration flow for the mentee.
- Mentor checkout and payment process.
- Design components, such as buttons, text fields, chips, and many more.
- Low and high fidelity for the login, registration, chat, and checkout processes.
- Prototype for the processes mentioned above.
- Taking minutes of user interviews.
Sometimes, we worked on a task together and held discussions online.
Understanding the Feature
In order to understand how this new feature would work, we were conducting a competitor analysis. This was done by learning how other similar platforms work.
Defining the Problem
After we compiled our findings, we defined the pain points we found through competitor analysis. These pain points led us to construct the How-Might-We questions that could help us to generate ideas to solve the pain points.
Grouping the Ideas
We organized the ideas according to their types. This should be done to make us easier to visualize our next step.
Making Prioritization
Our next step is dividing the categorized ideas based on our priorities. There are 4 quadrants to categorize our tasks: Do Now, Do Next, Do Later, and Do Last. Of course, the Do Now quadrant has the MVP we have to tackle.
User Flow
The user flow was created for each feature listed in the highest priority defined in the prior step. Images below are the user flow of registration and login for mentees and mentor booking processes.
Wireframes
From the user flow we have defined, we made wireframe sketches based on the nodes.
High Fidelity
The wireframes are now designed with the design system. The colors and fonts were adjusted to Skilvul’s.
User Interview
The prototype needed to be tested by conducting a user interview. We did this to validate if the design is adequate enough for our future users. Prior to the interview, we made a document that held a scenario of how the interview should go and questions for the respondent.
We were expecting respondents with the criteria listed below:
- Age 18–55 years old
- Student or employee at any company/institution
- Residing in Indonesia
- Capabilities in Bahasa Indonesia
- Interested in information technology
- Interested in learning information technology
- Has used a learning platform / is interested in using an online learning platform with mentoring sessions
- Expert in one field of information technology and willing to teach mentees about their expertise (for mentors).
Some valuable inputs from the users
The text fields are too small.
The mentee information input process should be in one page instead of three.
The payment receipt should be shown on the screen as it is sent to email.
I have to underwent too many steps to get to the chat, which is less efficient.
The footage of this usability testing can be found in this link.
The Prototype
Below, you can see a prototype we developed in Figma.
Closing
Coming from my background as a freelance website designer, my gigs mainly come from life coaches and authors. As a self-taught designer, I’m aware of the importance of having a mentor that you can consult. The problem that Skilvul had intrigued me to help them in anyways possible.
I thank my team for putting their effort into this project and having me as their teammate.
This article is also available on Medium.