Skilvul, Mentor on Demand


Hello! My name is Muhammad Ihsan and this is my story about making new feature on Skilvul platform about Mentor on Demand. What is Skilvul ? Skilvul is a technology education platform that provides digital skills learning content with the “blended-learning” method in online and offline form.

This project is part of the UI/UX training program implemented by Skilvul ( , for Kampus Merdeka program held by Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi Republik Indonesia. Skilvul is the Challenge Partner. I am not working for nor contracted professionally by Skilvul.

In making this app, I need a framework to produce appropriate products. This time I will use the design thinking framework. Consists of empathy, define, ideation, prototype, and test.

In this project, I worked with Youky Arie Sandi as a UX Designer and Yosephine Yulietayanti Natalia sianipar as a UI Designer, and my role is Lead Product

source :

1. Emphatize

The purpose of emphatize is to help designers find out the views & needs of their target users with research before defining problem statements and doing ideation.

We are using secondary research for doing emphatize, this is the result

Secondary Research

2. Define

First, we determine Pain Points based on our secondary research and then we voted which one is the most suitable

Pain Points

after we determined Pain Points, we determined How-Might-We


What if we can help users to do one on one mentoring with trusted mentors.

3. Ideate

After we’re done with Define Stage, we proceed to Ideate Stage and created Solution Idea, Affinity Diagram, Prioritization Idea, Crazy 8’s, Userflow, Wireframe, UI Style Guide, and UI Design. First we created Solution Idea

Solution Idea

This is our solution idea after brainstorming

Solution Idea

And then we grouped the Solution Idea into Affinity Diagram

Affinity Diagram

Affinity Diagram for Detail Mentor and Payback
Affinity Diagram for Fitur Mentoring and Payment

Then we discuss to prioritazie which idea is to do now

Prioritization Idea

Yes, Do it Now

the circle things in the ideas it’s mean we must created the Crazy 8's

then we circle the ideas that we should include in our Crazy 8’s section

Crazy 8's

Fitur Riwayat Pembelian Crazy 8's
Fitur merubah jadwal mentoring Crazy 8's
Fitur Filter mentor, harga, kelas Crazy 8's
Detail Mentor Crazy 8's
Feedback Crazy 8's

We’re working together to make this Crazy 8’s and 1 Crazy 8’s mean 1 ideas, not 1 Yes Do it Now

The next stage is to create a userflow and wireframe. We created 3 userflows in this project, there is Sign Up for User and Mentor, Hire Mentor and History Transaction


Sign Up Userflow
Hire Mentor Userflow
Transaction History Userflow

for more detailed userflow, click here


Here are our wireframe we created, 1 person created 3 wireframe, so there is 9 wireframe in total

Sign Up User Wireframe
Sign Up Mentor Wireframe
Home Wireframe
Doc Form Wireframe
Schedule Wireframe
Transaction Form
Transaction History Wireframe
Mentor Page Wireframe
Mentor Detailed Wireframe

UI Style Guide

In this stage we created Color Pallete, Typography, Icon Style, Button. The Logo has been provided by Skilvul

Skilvul Logo
Color Pallete

Skilvul uses 2 font which is Cera and Inter


Skilvul using Icons called Font Awesome Icons


We make this UI Style Guide as similar as possible to Skilvul

UI Design

Sign Up as User
List Mentor
Detail Mentor
Transaction History

We are given 2 weeks to design the UI according to the wireflow that has been made

4. Prototype

I use Figma for Prototyping, Figma’s prototyping features allow you to create interactive flows that explore how a user may interact with your designs.

here is our prototype

5. Testing

In-Depth Interview and Usability Testing (UT)

In-depth interviews involve direct engagement with individual participants. It is a qualitative data collection method where the interviewer can ask the participants different questions based on their responses.

UT is useful for testing whether our application is already in prototype form that is understood by the user. It helps to validate our ideation results, whether it is okay or not.

We did Remote Testing via Google Meet

According to the respondent, this application is quite good, but a few things need to be revised

Respondent said to add filter by skill mentor in List Mentor page


6. Closing

That’s the whole process about this project, we almost do this project together. Thanks to Skilvul for giving me chance to apply internship in here, Thanks to Hafidz Noor Fauzi and Jennifer Efendi for giving me a lot of knowledge about UI/UX and thanks to my teammate Youky Arie Sandi and Yosephine Yulietayanti Natalia sianipar for your cooperation building this project together

Thank you for visiting! You can also leave feedback and comments so we can discuss and grow better.

I know this project and this UX Case Study is far from perfect, but Thank you for those of you who have read up to this point.




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

App Development Inspiration — #3

Best Website Dashboard UI Examples for Design Inspiration — #43

Kenji Ekuan: The Creator of Things

City Seed: Design Brigade Week 1

Capstone | Future Scenario 2.0

Storythings Products

Network Design from the Ground Up — Asking Questions

Postmortem of my #30DayMapChallenge 2021

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
M Ihsan

M Ihsan

More from Medium


Consensus Mechanisms (Part 1 of 2): Proof of Work

In Conversation with Evan Gilbert

Chronicles of Pregnan-Sea