Case Study Kinobi Web App 48 Slide [PDF]

Citation preview

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