Home About Service Tool Contact

Study Case
Revamp UI/UX
Kinobi Web App
Kinobi Platform Job Portal and Online
Course to upgrade skills and make it easier
to apply for jobs.

PORTOFOLIO
 Team Project

Fauzan Munadhil Andreas B.W. Katon Raharjo

Product Manager UI/UX Designer

Fatahilla Afnan Hanifah Khairunnisa

Product Manager UX Writers
 Table Content

Researcher Overview Design Thinking UI/UX

Tells the background about Researching a Case Study Displays a Responsive
Kinobi Web App to improve Kinobi Web App to provide Design Web App Kinobi and
skills and apply for jobs. user convenience. Wireframe interface.
 Researcher Overview

Background
Kinobi is a digital career platform that aims to help
Generation Z explore careers, prepare themselves to achieve
their dream career, and switch careers. Kinobi is here to
make it easier for users to apply for jobs and make it easier
for users to choose the online course they want to be able
to improve their skills in preparing for the world of work.

Objectives
Providing best quality courses and job portal

Providing the most complete and trusted Job Portal

 Researcher Overview

Methodology
The results of this methodology are by conducting user
interviews to carry out user interactions and conducting
research discussions on the Kinobi Web App to deepen user
complaints in our results objectives.

Tools
Figma Microsoft Excel / Spreadsheet
Tools for creating User Personas & User Journeys and A tool to collect User Journey and User Persona data
creating UI/UX Designers plus creating Wireframes. for Prototype purposes.

Whatsapp Google Meet

Tool to make phone calls with users to conduct Tool for conducting user interviews and just doing
interviews in product users. product screen screens on complaints faced by users.
 Researcher Overview

Target User Timeline

User 18 -35 Years Sep - Oct 2022
Jobseeker
Fresh Greduate Sep 2022 Interview User. Create
Career Shifting User Researcher,
Planning Wireframe Nov - Dec 2022
Researcher
Usability
Testing &

Interest Prototype

People who want to upgrade skills

in the career world.
People who want to learn
according to passion. Create Mockup
People who want to apply for jobs. & Responsive
People who are ready to expand Design
network work.
Oct - Nov 2022
Design Thinking

Design Process

Empathy Define
DESIGN
PROCESS

Test Ideate

Prototype
Design Thinking

Key Insight From The Interview

1. Users want to improve skills to apply for jobs according to

passion.
2. Users want to find job vacancies that are more reliable and
Empathy easier.
3. Users want to access online courses and job portals more easily
and effectively.
4. Users want to make ATS Friendly CV easier.
5. The user wants to use Interview Training to make interview
training easier.
Design Thinking

Problem Statement
We designed a product, namely the Kinobi Webapp Revamp UI/UX
Designer to change and revise designs that are less in the eyes of the
user to be able to provide the best in terms of appearance, features,
and feature
recognition.

Define How Might

We (HMW)
Providing design users to be able to provide an introduction to
Kinobi features in the form of Nudges Onboarding to be able to get
to know features on Kinobi.
Changed the landing page design on the Kinobi feature to reduce
the annoying infinity scroll.
Design Thinking

User Journey Affinity Diagram

User Journey is used to understand products or services

from the user's perspective in order to be able to
demonstrate how users interact with products, websites or
services at this time on Kinobi.
Affinity Diagrams are used to collect Suggestions and
Criticism data from product users to assist in the research
process and carry out analyzes that are complained by users
using the Kinobi Webapp.
Design Thinking

Pain Point

From our research results, Kinobi Webapp has

drawbacks and is less efficient for users to use.
For this reason, we will continue to do deeper
research to make improvements to make it
easier for users and provide comfort for users to
continue to provide the best for users.
Design Thinking

User Persona

This is our user that we contacted via

WhatsApp telephone, from the results of
research from Affinity Diagram that Christian
Nugroho wants to take part in an online course
to be able to improve skills in the world of work
and be ready to work.
Design Thinking

User Persona (2)

This is our user that we contacted via

WhatsApp telephone, from the research results
from Affinity Diagram that Vania wants to take
part in an internship or register for a job that
accepts non-experience to be able to add work
experience and wants to know how to make a
CV Builder.
Design Thinking

Brainstroming
Point 1 HMW:
Create nudges onboarding Users.
Provides an introduction to onboarding features.

Provides usability of Kinobi's features.

Provides onboarding steps in all features.

Ideate Point 2 HMW:

Fixed the design of the landing page list of all features to avoid
infinity scroll.
Fixed a design that could not be accessed by the user.
Create a landing page button to make it easier for the user.
Design Thinking

User Flow
Nudges Tools
Start

Is It Guide Tour Nudges CV Builder Job Portal

Homepage
Right? Onboarding Homepage
Yes

Nudges Nudges
Onboarding Onboarding
Wrong Have an
Login Menu Tools
Account?
Yes Online Course Coaches

Nudges Nudges
Onboarding Onboarding
No

Register
End
Design Thinking

Information Architecture
Homepage Job Portal Online Course CV Builder Coaches

Header Header Header Header Header

Profile Header List Job List Course Create CV List Coaches

Tool Search Job Search Course Draft CV Search Coaches

Recommended
Filter Job Filter Course Filter Coaches
Jobs

My CV
 Design Thinking

Low Fidelity Mobile Web

Design Thinking

Homepage & Nudges Onboarding

Design Thinking

Tools & Nudges Onboarding

Design Thinking

Job Portal & Nudges Onboarding

Design Thinking

Online Course & Nudges Onboarding

Design Thinking

Coaches & Nudges Onboarding

 Design Thinking

Low Fidelity Web Desktop

Design Thinking

Homepage & Nudges Onboarding

Design Thinking

Tools & Nudges Onboarding

 Design Thinking

High Fidelity Mobile Web

Design Thinking

Mockup Kinobi

Homepage Tools Job Portal Online Course Coaches

Design Thinking

Nudges Onboarding

Homepage
 Design Thinking

Design System
Mobile Typography Desktop Typography
Roboto Roboto

Aa Aa
Roboto / Bold / 36px Roboto / Bold / 48px
Roboto / Bold / 20px Roboto / Bold / 30px
Roboto / Bold / 16px
Roboto / Bold / 24px
Roboto / Reguler / 12px
Roboto / Reguler / 16px
 Design Thinking

Design System
Color

 Design Thinking

Design System
Color System Compalte

Link Color System

instabio.cc/PrototypeKinobiKel2
 Design Thinking

High Fidelity Web Desktop

Design Thinking

Mockup Kinobi

Homepage Tools Job Portal

Online Course Coaches

Design Thinking

Nudges Onboarding

Job Portal
Design Thinking

Result Prototype
After finding and giving birth to many ideas, User flow, and Wireframe,
Low Fidelity, and High Fidelity. The next stage is to make prototype
interactions between frames to frames for the process of making
prototypes run in the form of UI/UX
Designers that have been made.
Named this application Kinobi, which is a platform for users, especially
Prototype
Job Seekers who want to find
Fresh Graduates, Switch Careers, and
work and improve their skills.
Design Thinking

Iterate Web Desktop

Design Thinking

Iterate Mobile Web

Design Thinking

Iterate Mobile Web

Design Display
After discussing with the front-end
developer and product manager,
we made sure to change the display design on Kinobi products to make
it easier for users later.

Because stakeholders feel that there are several parts that need to be
revised and there are some that needs to be held, I also changed the
information Kinobi's product architecture.
Design Thinking

Iterate Mobile Web

Apply Job Now
Prepare Career &
After the user presses the tools feature, two sub menus appear,
namely for career preparation and applying for jobs which are useful

for preparing to improve skills and apply for jobs and create an ATS
Friendly CV.
Design Thinking

Iterate Mobile Web

Infinity
Scroll
After testing with stakeholders, we feel that the part that users feel
uncomfortable with is the Infinity Scroll and previous web results that

Kinobi did not install a landing page button resulting in infinity which
was annoying and there were some that the user could not access.
Design Thinking

Iterate Mobile Web

Nudges Onboarding
The results of our research, we provide an onboarding feature to make
it easier for users to introduce the features in Kinobi so they know
more about Kinobi.

Design Thinking

Result Prototype

Link Prototype
instabio.cc/PrototypeKinobiKel2
Design Thinking

Usability Test
Pada tahap Testing, saya menggunakan metode User Research

Interview untuk melihat apakah prototype itu benar-benar berhasil

memecahkan atau membantu masalah yang ada. Testing saya lakukan
2 kali kepada orang dengan latar belakang yang berbeda juga.

Test The results of the interview after the analysis, the user wants to
change and revise the appearance of the landing page from Infinity
Scroll to use the button landing page and be able to introduce features
on Kinobi to be able to use Kinobi.
Design Thinking

Link Researcher
Affinity Diagram
https://www.figma.com/file/UltmU438xL7k5avrzxRPYa/Affinity-
Diagram-Kinobi?node-id=0%3A1&t=6C7tCGAANXJ3KQc0-1

User Journey
https://docs.google.com/spreadsheets/d/1aj7CBUIeyHhoYvTRiEnuo
OaWKAECsMX_AWbHRUqeviw/edit?usp=sharing
UI/UX
 Disclaimer

Please do not allow the results of our portfolio to be duplicated

or plagiarism of our work and if you want to use a reference,

ask permission from the creator of the group so as to avoid

making designs that are not personal work or designs from
other people.
 THANK YOU
Website is a collection of web pages from a domain or sub domain that
contains various information that can be accessed via the internet.
Website is used as a medium to find various information and means of
communication.

Enter Your Email Address Get Started

 About Support Follow Us

About Us Support Center Instagram

Someone will visit a website Our Team Feedback LinkedIn
because they are interested Features FAQ Youtube
in the content available on
Career Tiktok
the website.

Copyright, 2030, All rights reserved