UI/UX Case Study: Creating a Mentor on Demand Feature for Skilvul

Pranika Rahmawati
5 min readOct 11, 2022

--

Hi! My name is Pranika Rahmawati. For the last few months, I’ve been developing my UX research and UI designing skills by applying as a part of UI/UX Design Mastery Training Program, which was held by Ministry of Communications and Information Technology of Indonesia (Kominfo) in collaboration with Skilvul as a challenge partner. I neither work for nor in contract with Skilvul or kominfo.

Background

Skilvul is a technology education platform that provides digital skills lesson content with the “blended-learning” method in online and offline form.

Mentor on Demand is a feature at Skilvul that allows students to schedule sessions with a mentor to assist them learn coding and UI/UX. The background of this feature is an online course system that typically has a large mentor-to student ratio and limited time for mentors to communicate one by one with the student. Hence, sometimes students may feel completely uninstructed. Mentor on Demand also able to be a professional platform for job opportunities as teaching staff (Mentor). This feature is here to answer the problem.

Category : MVP Case Study and UI/UX Design
Duration :
10 Weeks (August-October 2022)
Tools : Figma and FigJam, Google Docs and Sheets, Zoom, Discord

Role in the Team

Praise for Maria, Ananda M. Andjani and Ervy for the marvelous collaboration. In this team work, our responsibilities are the same which are: UX Researcher and UI/UX Designer.

Design Process

We used the Design Thinking approach for solving this problem. To practice design thinking I followed the process below

The five stages of design thinking (interaction-design.org)

Empathize

We started this project by discovering how the competitor doing in the market. We observe the competitors with similar purpose then divide our findings by positive and negative as our insight. The insight is obtained through user feedback from the app store, hands-on experience and articles.

Competitive Analysis results

Define

To find the user’s main problems, we spilled out our struggles based on the challenge brief given as if we were the mentee or the mentor. From there, we collected our ideas that might be done to solve the problems.

After we done with the problem, we created solution based on the problem statement we found called How Might Be step.

Pain points and how might be steps in define process

Ideate

We generating ideas to go from identifying problems to finding specific solutions for our problem statement. But all the ideas gathered cannot be realized at the same time so, we prioritized the ideas by four prioritize quadrants. Because of limited time, we only go with ideas on the Yes, do it now quadrant where have high value but with low effort.

Ideas in Yes do it now quadrant

Design & Prototyping the Ideas

The collected ideas are realized into a physical form throughout this step.

User Flow

After getting all the information and identifying the problem, we created the user flows where it helps anyone to easily get an idea about the feature and its flow. Below, are some initial user flow:

Flow for mentee registration
Flow for mentor registration

Wireframe

Before into the UI Design, it’s better to have a visual representation of what we want our UI to look like.

Wireframe for Mentor on demand feature

Design System

In order to ease our design process, we made our own design system. We designed the typography, color palette, and components such as button, input field, navigation bar, and else.

The design system

High Fidelity Design

Using the wireframe and the user flow that we made, we added the appropriate images, colour and components into the frames into High Fidelity design.

The user interface design

Prototype

We added Interaction and motions to the components to complete the prototype.

The final prototype

Testing

Now that all finished, we still have some question left unanswered:

“Does our design solved the problem?”

To answer those questions, we did usability testing to ensure that our prototype was used by a real target user. We conducted interview and Single Ease Question (SEQ) as the usability testing methods with two participant via Zoom.

We asked our participants to use the prototype to complete the task we given before. The task given consist of 4 tasks, namely: 1. register as mentee, 2. booking and sending message to mentor, 3. payment, 4. register as mentor.

Using SEQ which has a 7-point rating scale to assess how difficult it is for users to complete tasks, both the participant rated with overall average are 6.25 and 6.4 which means the design that have been made is easy to use.

Feedback

After conducting usability testing, here are some insightful feedback from the user that can be used as improvement in the future :

  1. Users are confused about the steps of registration both for mentee and mentor. Because, there are no information about how many steps that must be completed. It would be informative if the completion of the steps is displayed.
  2. Users need to go back and forth between the website and their email account to get their invoice and results of the mentor’s acceptance. It would be so much helpful if that’s all of the information displayed on the website.

Takeaways

  • Creating a product from scratch has been a fantastic learning experience. At each stage of the process, I learned and discovered something new.
  • I was able to empathize, define, ideate, prototype, and test by applying the Design Thinking technique. Through this approach, I was able to understand how each of the processes could be used to help in the development of the ultimate product.
  • This project gave me the confidence to play a role in a teamwork and grinding critical thinking skills from all aspects to solve problems.

Presentation Deck

See the presentation deck for more information about the project.

--

--

Pranika Rahmawati
Pranika Rahmawati

Written by Pranika Rahmawati

0 Followers

A girl who is actively learning the world of UI/UX Design to improve the lives of others through design.