6 0 9 MB
Home
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
About
Service
Tool
Contact
Team Project
Fauzan Munadhil
Andreas B.W. Katon Raharjo
Product Manager
UI/UX Designer
Fatahilla Afnan Product Manager
Hanifah Khairunnisa UX Writers
Table Content
Researcher Overview
Design Thinking
UI/UX
Tells the background about Kinobi Web App to improve skills and apply for jobs.
Researching a Case Study Kinobi Web App to provide user convenience.
Displays a Responsive Design Web App Kinobi and 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 Tools for creating User Personas & User Journeys and creating UI/UX Designers plus creating Wireframes.
Whatsapp
Tool to make phone calls with users to conduct interviews in product users.
Microsoft Excel / Spreadsheet
A tool to collect User Journey and User Persona data for Prototype purposes.
Google Meet Tool for conducting user interviews and just doing product screen screens on complaints faced by users.
Researcher Overview
Target User User 18 -35 Years Jobseeker Fresh Greduate Career Shifting
Timeline Sep - Oct 2022 Sep 2022 Planning Researcher
Interview User. Create User Researcher, Wireframe
Usability Testing & Prototype
Interest People who want to upgrade skills in the career world. People who want to learn according to passion. People who want to apply for jobs. People who are ready to expand network work.
Nov - Dec 2022
Create Mockup & Responsive Design
Oct - Nov 2022
Design Thinking
Design Process
Empathy
DESIGN PROCESS
Test
Define
Ideate Prototype
Design Thinking
Key Insight From The Interview
Empathy
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 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
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 Diagram
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 Right?
Wrong
Yes
Login Yes
Homepage
Have an Account?
No
Register
Guide Tour Nudges Onboarding Homepage
CV Builder
Job Portal
Nudges Onboarding
Nudges Onboarding
Menu Tools Online Course
Coaches
Nudges Onboarding
Nudges Onboarding
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 Jobs
Filter Job
Filter Course
My CV
Filter Coaches
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
Online Course
Tools
Coaches
Job Portal
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
Designers that have been made. prototypes run in the form of UI/UX
Prototype
Named this application Kinobi, which is a platform for users, especially
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 Prepare Career &
Apply Job Now 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/AffinityDiagram-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
Someone will visit a website because they are interested in the content available on the website.
About
Support
Follow Us
About Us Our Team Features Career
Support Center Feedback FAQ
Instagram LinkedIn Youtube Tiktok
Copyright, 2030, All rights reserved