CONTENT

Intro

Context

Impacts and Results

User Research

Synthesis

Landing Page

Pricing Page

Mock Interview

Design System

Back

Back

AI-Powered Career Platform for Interview Preparation

Time: 2024

Time: 2024

Duration: 6 months

Duration: 6 months

My role:

My role:

Designed and launched Datalynn’s first AI-powered career platform, enabling job seekers to prepare for interviews through conversational AI.

Designed and launched Datalynn’s first AI-powered career platform, enabling job seekers to prepare for interviews through conversational AI.

Responsibility:

Worked as a Product Designer on a team of 1 PM and 3 designers, contributing to product strategy and leading the end-to-end design of key pages including the homepage, pricing page, and AI mock interview tool.

Worked as a Product Designer on a team of 1 PM and 3 designers, contributing to product strategy and leading the end-to-end design of key pages including the homepage, pricing page, and AI mock interview tool.

Worked as a Product Designer on a team of 1 PM and 3 designers, contributing to product strategy and leading the end-to-end design of key pages including the homepage, pricing page, and AI mock interview tool.

Time & Status:

May 2024 - December 2024

May 2024 - December 2024






CONTEXT

CONTEXT

The Growing Demand for Career Services in Tech

Market insights

🎓 300M

🎓 300M

Global graduates projected by 2030, up from 137M in 2013

Global graduates projected by 2030, up from 137M in 2013

📊 $5.94B

📊 $5.94B

Career guidance market, nearly doubling by 2034

Career guidance market, nearly doubling by 2034

📈 $15.8B

📈 $15.8B

AI in career development, 25.7% annual growth through 2033

AI in career development, 25.7% annual growth through 2033

"Breaking into tech feels overwhelming. I needed tools that simplify the process and help me develop the skills top companies are looking for."

"Breaking into tech feels overwhelming. I needed tools that simplify the process and help me develop the skills top companies are looking for."
"Breaking into tech feels overwhelming. I needed tools that simplify the process and help me develop the skills top companies are looking for."

– Sarah, a recent computer science graduate

– Sarah, a recent computer science graduate
– Sarah, a recent computer science graduate

The Challenge

As the tech industry rapidly evolves, aspiring professionals face the daunting task of aligning their skills with the ever-changing demands of top companies.

As the tech industry rapidly evolves, aspiring professionals face the daunting task of aligning their skills with the ever-changing demands of top companies.
As the tech industry rapidly evolves, aspiring professionals face the daunting task of aligning their skills with the ever-changing demands of top companies.
Why It Matters

Career services are critical for today’s job seekers.

From skill training and resume support to interview prep and networking, these resources empower graduates and career switchers to successfully bridge the gap into tech.

DESIGN GOAL

Recognizing the limitations of traditional job preparation, DataLynn set out to reimagine the job search journey through innovative AI-driven tools, offering targeted resources and a user-centric platform to empower job seekers at every step.

Impacts and Results
Impacts and Results
Impacts and Results

Successful MVP Launch

Successful MVP Launch

Successful MVP Launch

Contributed to the design of DataLynn's MVP, resulting in a successful product launch that attracted USD 300k in initial investment and facilitated connections with over 15 venture capital firms for future funding.

Contributed to the design of DataLynn's MVP, resulting in a successful product launch that attracted USD 300k in initial investment and facilitated connections with over 15 venture capital firms for future funding.

Accelerated Design Efficiency

Accelerated Design Efficiency

Accelerated Design Efficiency

Contributed to developing a scalable design system that reduced design-to-development handoff times by 40%, significantly speeding up feature releases and product iterations.

Contributed to developing a scalable design system that reduced design-to-development handoff times by 40%, significantly speeding up feature releases and product iterations.

USER RESEARCH
Discover and Define
Target users

University Graduates

No Communication

New grads looking to turn their knowledge into job-ready skills.

New grads looking to turn their knowledge into job-ready skills.

Career Switchers

Professionals moving into tech and needing support to reskill and adapt.

Professionals moving into tech and needing support to reskill and adapt.

To bridge the gap between users and job market expectations, we conducted interviews with 16 new graduates and 10 career switchers. This discovery phase was designed to help DataLynn's teams better understand pain points of our target user.

To bridge the gap between users and job market expectations, we conducted interviews with 16 new graduates and 10 career switchers. This discovery phase was designed to help DataLynn's teams better understand pain points of our target user.

To bridge the gap between users and job market expectations, we conducted interviews with 16 new graduates and 10 career switchers. This discovery phase was designed to help DataLynn's teams better understand pain points of our target user.

Key challenges
Key challenges

Interview Challenges

No Communication

Difficulty translating theoretical knowledge into practical skills for technical interviews.

Difficulty translating theoretical knowledge into practical skills for technical interviews.

Insufficient Preparation Tools

Insufficient Preparation Tools

The platform may lack focused resources such as career advice and interview preparation tips.

The platform may lack focused resources such as career advice and interview preparation tips.

Job description confusion

Users find it challenging to interpret job descriptions and match them to their skills.

Users find it challenging to interpret job descriptions and match them to their skills.

What are the job market expectations?
What are the job market expectations?
What are the job market expectations?

DataLynn's team engaged in discussions with over 20 Hiring Managers, Tech Founders, and Tech Leads at major tech companies, uncovering significant gaps between new graduates and the demands of the job market.

DataLynn's team engaged in discussions with over 20 Hiring Managers, Tech Founders, and Tech Leads at major tech companies, uncovering significant gaps between new graduates and the demands of the job market.

Hands-On Experience

Hands-On Experience

Employers want practical skills, but grads often have only theory.

Employers want practical skills, but grads often have only theory.

Employers want practical skills, but grads often have only theory.

Soft Skills

Limited experience with teamwork, conflict resolution, and leadership, which are key in interviews.

Limited experience with teamwork, conflict resolution, and leadership, which are key in interviews.

Limited experience with teamwork, conflict resolution, and leadership, which are key in interviews.

Applying Knowledge

Grads struggle to use theory in real scenarios during technical interviews.

Grads struggle to use theory in real scenarios during technical interviews.

Grads struggle to use theory in real scenarios during technical interviews.

SYNTHESIS
Breaking Barriers in Tech Job Preparation
Key wants
Key wants

Affordable Learning Paths

No Communication

Clear pricing and Cost-effective options for ongoing education and certifications.

Clear pricing and Cost-effective options for ongoing education and certifications.

Clear pricing and Cost-effective options for ongoing education and certifications.

Effective Interview Prep

Effective Interview Prep

Practical tools to bridge theory and practice for technical interviews.

Practical tools to bridge theory and practice for technical interviews.

Practical tools to bridge theory and practice for technical interviews.

Clear Job Matching

Clear Job Matching

Features that simplify understanding job descriptions and align with users' skills and goals.

Features that simplify understanding job descriptions and align with users' skills and goals.

Features that simplify understanding job descriptions and align with users' skills and goals.

Comprehensive Prep Resources:

Comprehensive Prep Resources:

Tailored preparation options, including interview tips, and guidance

Tailored preparation options, including interview tips, and guidance

Tailored preparation options, including interview tips, and guidance

Persona
Persona

We than created persona based on the insights gathered from these interviews.

We than created persona based on the insights gathered from these interviews.

LANDING PAGE

LANDING PAGE

Inspiring and Guiding Job Preparation

Wireframe

Wireframe

We designed a landing page for Datalynn to showcase its products and how they assist users with interview and job preparation. The process began with wireframes for the mid-fidelity prototype, focusing on key sections like the live copilot, services, pricing, and testimonials.

We designed a landing page for Datalynn to showcase its products and how they assist users with interview and job preparation. The process began with wireframes for the mid-fidelity prototype, focusing on key sections like the live copilot, services, pricing, and testimonials.

Wireframe

Wireframe

After finalizing the structure, we moved to high-fidelity, refining visuals, interactions, and the overall interface. The page was broken into sections for clarity.

After finalizing the structure, we moved to high-fidelity, refining visuals, interactions, and the overall interface. The page was broken into sections for clarity.

Hero Section: Designed to immediately communicate the page's goal with a clear headline, supporting subheaders, and prominent CTA buttons.

Product Introduction: Provides a detailed overview of each product, highlighting their core features.

Datalynn GPT: Showcases sample interview questions for various job positions, connecting directly with users' needs and emphasizing the product's benefits.

Testimonials and Footer: Testimonials offer social proof, appealing to users by sharing experiences from different roles. The footer provides a final call-to-action to engage viewers.

PRICING PAGE

PRICING PAGE

A clear comparison of product features and services

For the pricing page of our AI copilot interview product, we explored two design options.

For the pricing page of our AI copilot interview product, we explored two design options.

Option 1

Pricing comparison table with key information and detailed product features

User stories section to build credibility

FAQ section to address common questions

Option 2

Integrated pricing and product features for a clearer, more intuitive view

Call-to-action for email subscriptions

Blog section with career insights and interview tips for added guidance and resources

Our final pricing design merges the best features of two options to offer a clear, combined view of pricing and product features.

Our final pricing design merges the best features of two options to offer a clear, combined view of pricing and product features.

Final design

Final design

The detailed pricing card improves clarity, allowing users to easily compare all key details at a glance.

The comparison table highlights the key features of each plan, helping users make informed decisions.

User stories provide real-world context, helping users understand the practical benefits of each plan.

MOCK INTERVIEW

MOCK INTERVIEW

LLM based voice to voice AI agent.

We started by designing two layouts for mock interview exercises: one for behavioral questions and another for coding exams.

We started by designing two layouts for mock interview exercises: one for behavioral questions and another for coding exams.

Behavior question

Coding exams

After conducting user testing, we introduced a feature that allows users to check references for questions, enhancing their practice experience.

After conducting user testing, we introduced a feature that allows users to check references for questions, enhancing their practice experience.

Final design

Generate Reference: Displays answers to assist users with the question, enhancing their understanding and preparation.

Recording Icon Animation: Provides real-time feedback to indicate that the voice is being successfully recorded.

Prototype 1

Prototype 2

Two animation prototypes were developed, and after testing, we selected the first design for its simplicity and clarity.

DESIGN SYSTEM

DESIGN SYSTEM

Define the guiding principle

During the MVP launch, we developed a design system to establish a cohesive and consistent design language for Datalynn.

During the MVP launch, we developed a design system to establish a cohesive and consistent design language for Datalynn.

The primary color is a range of blue shades, while the secondary color features variants of cyan. The blue-to-cyan gradient was chosen as the core color palette to reflect professionalism, trust, and innovation—key qualities of an AI-driven career platform.

Design System: Color Scheme & Iconography

The components were designed to be clear, consistent, and adaptable within this color scheme, improving usability and ensuring a seamless user experience.

The components were designed to be clear, consistent, and adaptable within this color scheme, improving usability and ensuring a seamless user experience.

Design System

Responsive design

Responsive design

By offering 12-column grid layout variations for different screen sizes, we ensure that Datalynn maintains a consistent visual hierarchy across all devices, from phones to desktop computers.

By offering 12-column grid layout variations for different screen sizes, we ensure that Datalynn maintains a consistent visual hierarchy across all devices, from phones to desktop computers.

Responsive design

Next project:
Next project:
Next project:
Crossing the Pell
AR / VR
Exhibition
Immersive exhibition for reimagining the pell bridge through VR and AR technologies
Crossing the Pell
AR / VR
Exhibition
Immersive exhibition for reimagining the pell bridge through VR and AR technologies
Crossing the Pell
AR / VR
Exhibition
Immersive exhibition for reimagining the pell bridge through VR and AR technologies

© Jinlan Huang 2024

© Jinlan Huang 2024

© Jinlan Huang 2024