Kayceesdesign

UI/ux Deisgn

2024

B2c product

AI-powered

Dashboard design

0-1 Resume Master -GmeeJob

Dashboard design for AI recruiting agency

demo

Canada/global

Recruiting

0-1 resume

scroll down

Kaycee

Introduction

0-1 Resume Master is an advanced AI-driven platform tailored to empower inexperienced job seekers by crafting professional, high-impact resumes and guiding them on their career journey.

With cutting-edge AI technology, it optimizes and organizes content to ensure resumes stand out and seamlessly pass Applicant Tracking Systems (ATS), giving users a competitive edge in the job market.

148

Screens

006

MOnths

004

iterations

200

Cups of coffee

Kaycee

My role

Research

User interviews

Testing of problematic sections

Analyzing the obtained data

Hypothesis formation

Competitor research

Design

Moodboard

User-flow

Design

Prototype

Creating a clickable prototype

Testing and finalization

Implementing a prototype in UseBerry

Sending the link to "testers"

Collecting and analyzing information about the text

Interviews with testers

Design system description

Staging tokens

Description of tokens in Figma

Description of system design in Notion

Finalizing the design

Kaycee

Design system

Helvetica Neue

48 px

Lorem Ipsum is simply dummy text

30 px

Lorem Ipsum is simply dummy text

Roboto

20 px

Lorem Ipsum is simply dummy text

18 px

Lorem Ipsum is simply dummy text

16 px

Lorem Ipsum is simply dummy text

Title

16 px

Lorem Ipsum is simply dummy text

Subtitle

16 px

Lorem Ipsum is simply dummy text

Body 1

16 px

Lorem ipsum dolor sit amet consectetur. Neque mauris massa mauris et dui volutpat nunc purus felis. Est vitae et velit at. Interdum sodales gravida mattis venenatis fusce sagittis quisque. Ut et imperdiet tempor eget sed. Eu augue consectetur adipiscing neque mauris placerat nec diam. Sit etiam sed egestas enim. Turpis sed ante facilisi sapien dictum. Ultrices elementum enim commodo nunc nulla sed id nec. Integer ut sit imperdiet neque ornare fames ultricies orci. Nunc in vel ipsum eget erat. Nunc risus sollicitudin mattis orci mattis sit velit duis mollis. Lacus neque nulla fermentum viverra ut in id.

Ut hendrerit mattis curabitur neque sodales. Ultricies amet magna suspendisse id. Non nec a augue turpis magna eget felis egestas. Ut amet amet massa in at velit pellentesque orci. Elit eget bibendum tristique donec praesent id tellus. Eget non malesuada sed justo elementum. Ipsum sed aenean tempor mi. Molestie neque cras vitae eleifend at amet tortor in duis. Cursus in platea tellus elementum eget et. Vestibulum fermentum nisl ac massa ornare ut donec viverra pharetra. Diam ut faucibus ultricies elementum. Augue dolor at sociis tempor scelerisque lectus tincidunt dapibus elit. Tincidunt nibh porta non duis. Aliquam adipiscing non sed et at porta.

Cursus accumsan amet nunc mauris mi elementum. Nisl blandit et aenean laoreet volutpat non amet bibendum. Viverra gravida quis quis dui et ac est sed et. Quis posuere morbi quis donec aenean pulvinar sit orci. Pellentesque scelerisque ipsum feugiat amet urna a molestie. Orci nisl lectus vitae urna. Viverra at ornare mi purus gravida. Ullamcorper amet et facilisis ultricies pharetra cursus in adipiscing aenean. Lacus purus amet nulla fusce ac turpis.

Body 2

14 px

Button 1

14 px

Button

Details

12 px

GmeeJob

GmeeJob

GmeeJob

Primary

#6F6CFB

#D6D2F9

Secondary

#198C6E

#DAFB58

#F2FCBE

#E6FCE8

Neutral

#000000

#031749

#868686

#ECECEC

#FFFFFF

Symbolization

Creativity, innovation, futurism

Growth, hope, and fresh beginnings, career

Reflection

Tech edge of the tool; goal support service

Development and opportunities.

Kaycee

Iteration—1

Identifies potential issues based on the key tasks users will perform during the user testing, helping in identifying patterns and prioritizing solutions.

Issue Clustering

Our first user testing session focused on core user actions within the resume-building dashboard, assessing usability, clarity, and task efficiency.

Key tasks:

Overview

Input a position description

Users will manually input a detailed description of the position they are targeting

Select a Description from AI Recommendations

Users will review and choose from AI-generated position descriptions tailored to their input.

Manage Position Descriptions

Users will edit or customize the AI-suggested description to better align with their preferences or requirements.

Modify the AI-Generated Description

Users will organize, edit, or delete previously created position descriptions as needed.

personpersonpersonpersonperson

76 real users on-site (undergraduate students& new graduates)

computercomputercomputer

80 invited users online (professionals& new graduates)

I removed a job description, but nothing happened. Did it work? Is it gone?"

The system didn’t give me any hints about what to do after removing the description resulting a mistaken deleting.

The layout didn’t update visually, so I couldn’t tell what had changed.

I ended up giving up because it felt like more work than just writing it myself.

The AI description doesn’t sound like something I would write—it’s too vague.

I wasn’t sure what the system wanted me to do after I clicked edit.

I wasn’t sure if I was improving the description or making it worse—there’s no feedback to guide me.

I ended up giving up because it felt like more work than just writing it myself.

Flows for testing:

Showcase PDs

*Algorithmic Recommendation

Position Description (PD)

PDs can either be manually inputted or selected from algorithmic recommendations.

This testing primarily focuses on evaluating whether users can effectively utilize the AI functionality and receive efficient assistance throughout the process.

Save

quit

Update the display list.

Remove

Add PDs

Edit

*Modify in text box

*Remove from the selected list while retaining the edited content.

High Drop-Off Rate

User Confusion

Perception of Ineffective Assistance

Usability Challenges with the text-editing interface

Key Findings

Unclear System Feedback

Uncertainty About Next Steps

Disrupted User Flow

Key Findings

AI accuracy rate

Content personalization rate

86%

70%

Success rate

Partial Success

Assisted Rates

Failure Rate

10 out of 28(35%)

8 out of 28(28%)

check

Product Ecosystem

One of the key invisible designs embedded within our product is that user edits to AI-generated text are seamlessly fed back into the AI system, contributing to the continuous improvement of its accuracy and relevance.

Modified flow after testing

Showcase PDs

*Algorithmic Recommendation

Add&Preview

quit

Update the display list.

Remove

Add PDs

Edit with AI tips

*Modify with AI tips

Select PDs

*Modify in text box

*Confirm again through a popup window

*Return to the display list

Divided the dialog box into two distinct regions:

Add Area: For users to quickly add new items.

Edit Area: For users to perform detailed and refined edits.

check

Separated Clickable Areas

check

Improved Guidance During Editing

Isolated Editing Steps

Clearly separated the editing process from other actions to reduce interface distractions and potential misguidance.

Tailored Suggestions for Edits

Provided personalized recommendations based on user input and the original position description, helping users refine their edits effectively.

check

Popup Window for Deletion Feedback

Deletion Confirmation Message

Clearly separated the editing process from other actions to reduce interface distractions and potential misguidance.

Post-Deletion Display Explanation

Provided personalized recommendations based on user input and the original position description, helping users refine their edits effectively.

Kaycee

High-fi prototype

Helvetica Neue

48 px

Lorem Ipsum is simply dummy text

30 px

Lorem Ipsum is simply dummy text

Roboto

20 px

Lorem Ipsum is simply dummy text

18 px

Lorem Ipsum is simply dummy text

16 px

Lorem Ipsum is simply dummy text

Title

16 px

Lorem Ipsum is simply dummy text

Subtitle

16 px

Lorem Ipsum is simply dummy text

Body 1

16 px

Body 2

14 px

Button 1

14 px

Button

Details

12 px

Website

Choose templates

Contact

Education

Skill

Career path

Experience

Certification

Finalize

Header

Sidebar

Footer

Notifications

version information,

company links.

Displays supplementary information or secondary actions.

Input fields

Dropdowns/ radio buttons

job position cards

feedback bottons

The main interaction zone for users to input personal details and explore tailored career recommendations.

Provide real-time guidance and assistance to enhance user experience and efficiency.

Content Area

In-editor tips

Title

navigation menu

user profile

notification icons

Links to main pages

Provides access to global features or settings and displays user information.

System updates,

real-time notifications,

error messages.

Delivers key dynamic updates or alerts to users.

Enables modular navigation for seamless switching between functions.

Resume Thumbnail

Progress Bar

Preview Fullscreen Button

A dedicated area for users to monitor their CV progress and preview the generated resume in real-time. This ensures transparency and allows users to make informed adjustments throughout the process.

Resume Preview

Kaycee

Annotated Wireframe

Kaycee

User flow

Landing page/

home page

Choose a template

Information collection

Input Contact

Input Education

Input Skills

Input Career path

Career path recommendation

Match board

Relative industries

AI skills

Input/Search bar

Input/Search bar(position)

Input/Search bar(industry)

Advice

AI recommendation

Manage skills

Save and continue

Add new

edit

Delete

Add new

Delete

Manage your education

Save and continue

Add new

edit

Manage your education

AI-powered job recommendation

Input work experience

Input experience

AI Career coach

Input Certification

Get the result

Edit

Preview

Download

Modify

demo

Emily Zhao

Aspiring Data Storyteller Ready to the Job Market

👩🏼

Age/Identifying Gender

23/Female

Location

Vancouver, Canada

📍

Education

Bachelor’s degree in Data Science from a U.S. University

🏫

“Eager to apply my analytical skills and passion for data-driven insights to solve real-world challenges and make a meaningful impact in the workplace.”

Bio

Sarah recently graduated with a degree in Data Science from a university in the United States. Although academically accomplished and equipped with internship experience in data visualization and analysis, she has no formal full-time work experience. Now back in Canada, Sarah feels uncertain about navigating the Canadian job market, which she finds vastly different from the academic environment she thrived in. She aspires to build a solid career foundation in data analysis but struggles with knowing how to position herself effectively to potential employers.

Goals

Secure her first full-time job as a Data Analyst.

Create a professional resume that highlights her skills and internship experiences.

Gain confidence in her ability to present herself as a competent candidate.

Align her career goals with a clear progression plan for growth in the analytics field.

Motivations

(For using a Resume Builder)

Time Efficiency

Professionalism/Guidance

Market Alignment

Overcoming Uncertainty

Personalization

Pains

Lack of familiarity with the Canadian employment landscape and hiring processes.

Struggling to tailor her resume to specific job descriptions.

Fear that her lack of full-time work experience might overshadow her technical skills.

Uncertainty about how to address ATS requirements effectively.

Devices

Uses her phone when she feels too lazy to open her laptop

iPhone

30%

Barely uses tablet for job seeking

Tablet

Likes using Macbook to do in-depth research

Macbook

60%

(% of Use When do job seeking)

Kaycee

Persona

HoW i addressed the requirements

Product Features and Functionality

Resume Templates and Customization

ATS Compatibility

Cover letter generation

Matching system for job descriptions

Human resume writing services

User Experience and Accessibility

Ease of Use

Personalization and Guidance

Step-by-step through the process

In-editor tips

Accessibility

Market Position and Pricing

Subscription options

Free trial

Advanced customization tools

Early-career professionals

Global user

Enhance CV

Jobright

Jobscan

Resume.com

Reed.co.uk

Top resume

Key Gaps Across Competitors

Lack of localized guidance for job seekers in markets like Canada, where employment norms differ.

Minimal support for inexperienced job seekers who need career advice alongside resume-building tools.

Absence of personalized user journeys, such as AI-driven recommendations tailored to specific user goals and career levels.

Limited emphasis on adaptive career insights, such as evolving job market trends or skillset demands, to guide users comprehensively.

Key Gaps Across Competitors

Lack of localized guidance for job seekers in markets like Canada, where employment norms differ.

Minimal support for inexperienced job seekers who need career advice alongside resume-building tools.

Absence of personalized user journeys, such as AI-driven recommendations tailored to specific user goals and career levels.

Limited emphasis on adaptive career insights, such as evolving job market trends or skillset demands, to guide users comprehensively.

check

Kaycee

Competitive analysis

Requirements I get

Design a user flow to gather career-related information from users, use AI technology to recommend a suitable job position based on their preferences, and generate an ATS-friendly CV that highlights relevant skills and work experience, formatted according to the user's preferred style.

Helvetica Neue

48 px

Lorem Ipsum is simply dummy text

30 px

Lorem Ipsum is simply dummy text

Roboto

20 px

Lorem Ipsum is simply dummy text

18 px

Lorem Ipsum is simply dummy text

16 px

Lorem Ipsum is simply dummy text

Title

16 px

Lorem Ipsum is simply dummy text

Subtitle

16 px

Lorem Ipsum is simply dummy text

Body 1

16 px

Body 2

14 px

Button 1

14 px

Button

Details

12 px

Typology

Helvetica Neue

48 px

Lorem Lorem

30 px

Lorem Ipsum

Rubik

Logo

20 px

Lorem Lorem

Roboto

20 px

Lorem Ipsum

18 px

Lorem Ipsum

16 px

Lorem Ipsum

Title

16 px

Lorem Ipsum

Subtitle

16 px

Lorem Ipsum

Body 1

16 px

Lorem ipsum

Body 2

14 px

Lorem ipsum

Button 1

14 px

Button

Details

12 px

Cursus accumsan

Solution

We position AI as a tool for prompting and assistance, helping users articulate their experience rather than making decisions for them.

In the first iteration, we discovered a clear conflict: users wanted AI to save effort and generate resumes automatically, but at the same time, they wanted to retain control and keep their own input when they had specific ideas.

To investigate this, we created three MVP prototypes with different levels of AI involvement — high (fully automated), medium (AI-suggested), and low (manual input) — and tested how users responded to each.

A/B testing and Survey:

An A/B test was carried out to assess user preferences toward varying degrees of AI involvement.

Three versions of the page were tested with 20 users.

We ran an SEO advertising test to measure how these three different AI-assistance video formats on the landing page affected CTA click-through rates.

we conducted a targeted SEO advertising test to examine how different representations of AI assistance influenced user behaviour. Traffic from SEO ads was directed to a landing page featuring one of three video variants, each demonstrating a distinct level of AI involvement: AI as a guiding agent, AI as a collaborative assistant, and AI as a minimal prompt-based tool. We measured the impact of each variant on users’ likelihood of clicking the primary CTA, using click-through rate as the key metric.

Kaycee

Iteration—2

Balancing AI and User Control

Kaycee

Refections

Designing an AI-powered product does not mean underestimating user needs.
On the contrary, it requires deeper user research to understand how much AI assistance users actually want at each stage of the experience.

Kaycee

Landing page

Last project

Thanks for scrolling!

Next project