Datalynn

Time: 2024

Time: 2024

Duration: 3 months

Duration: 3 months

Intro:

Intro:

DataLynn is a tech startup dedicated to developing a platform that transforms the job-seeking process using innovative AI-driven tools.

DataLynn is a tech startup dedicated to developing a platform that transforms the job-seeking process using innovative AI-driven tools.

DataLynn is a tech startup dedicated to developing a platform that transforms the job-seeking process using innovative AI-driven tools.

My role

My role

As a UI/UX Product Designer, I focused on web responsive design and design strategy, enhancing the landing and pricing interfaces while leading brainstorming sessions to drive innovative solutions.

As a UI/UX Product Designer, I focused on web responsive design and design strategy, enhancing the landing and pricing interfaces while leading brainstorming sessions to drive innovative solutions.

As a UI/UX Product Designer, I focused on web responsive design and design strategy, enhancing the landing and pricing interfaces while leading brainstorming sessions to drive innovative solutions.

Time & Status:

May 2024 - December 2024

May 2024 - December 2024






CONTEXT

CONTEXT

The Growing Demand for Career Services in Tech

Market insights

The number of university graduates is projected to increase from 137 million in 2013 to 300 million by 2030 globally.

The number of university graduates is projected to increase from 137 million in 2013 to 300 million by 2030 globally.

In the U.S., there were 18.66 million college students in 2021, highlighting a strong pool of emerging talent.

In the U.S., there were 18.66 million college students in 2021, highlighting a strong pool of emerging talent.

The U.S. career service industry was valued at $2.7 billion in 2022, with a steady growth rate of 4.5%.

The U.S. career service industry was valued at $2.7 billion in 2022, with a steady growth rate of 4.5%.

"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

"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
"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
– Sarah, a recent computer science graduate
Bridging the Gap: Empowering Tech Job Seekers

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

Career services such as skill training, resume writing, interview coaching, job placement, and networking are increasingly essential for bridging the gap between education and employment in 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

© Jinlan Huang 2024

© Jinlan Huang 2024

© Jinlan Huang 2024