Overview
Introduction
Design System
Design Approach
Solution
Result

DataLynn
‍All-in-One Guide for AI Career

Overview

‍In the rapidly evolving Tech industry, job seekers face significant challenges in preparing for and securing positions that match their skills and aspirations. Traditional job preparation methods often fall short in providing targeted, up-to-date, and practical resources that can effectively bridge the gap between aspiring Tech professionals and their desired roles in major companies.

DataLynn foresees the opportunity to solve the issue. It aims to revolutionizes the tech job-seeking experience with interactive AI tools. This case study explores the design and implementation of DataLynn’s platform, focusing on enhancing the user experience (UX) at every step of the job-seeking process.

Industry

- Educational Technology
- AI Startup

My Role

As a UI/UX Product Designer focusing on 0 to 1 designs of
- Responsive Web App
- Design Strategy
- Coordinate with the dev. team and marketing team

Features
‍- Tutorial: Video and information based courses platform.
- Interview Questions - Information based split-screen lessons.
- Mock Interview - LLM based voice to voice AI agent.
- AI Hub - Project based competition.
- Auto Resume Optimization

Introduction

We were tasked to develop a digital platform that could:
Streamline the job-seeking process for users by integrating a suite of AI-driven tools, such as resume optimization, interview preparation, and personalized job matching, to increase efficiency and job placement success rates. Foster a supportive community where users can exchange knowledge, share experiences, and access mentorship opportunities, enhancing their career development and networking prospects.Provide actionable insights and analytics to users about their job search progress and market trends, enabling them to make informed decisions and improve their strategies in real time.

Our Approach
DataLynn's strategic plan called for a swift launch of a Minimum Viable Product (MVP) that prioritized user privacy and system security. Our approach was to carefully choose advanced technologies that ensured the platform was scalable and reliable from the outset. Collaborative Design Thinking sessions with DataLynn were instrumental in creating a user-friendly digital experience, leading to a clear product vision and a focused set of features designed to meet the core needs of job seekers.

We adopted an Agile development approach to efficiently deliver this cross-platform MVP, which included responsive web applications. This method facilitated a quick market introduction while allowing for continuous improvement. The resulting MVP provided an intuitive interface for users, enhanced by powerful AI tools, and a robust administrative dashboard for DataLynn, setting a solid foundation for the platform’s future growth and user-driven enhancements.

Design System

Figma

UI Design & Interaction Prototype

MUI System

Provides a simple, customizable, and accessible library of React components

Design Tools Used

Adobe Illustrator

Icon creation & modification

UX Research Methods

In-person / Phone Interviews

1 on 1 phone interviews were mostly done using Zoom or Google Meet voice chat with selected users.

Online Questionnaire

Mostly used on gathering general feedbacks and validations.

Tools For Data Gathering

Google Analytics

Used for usage data recording & analysis.

Hotjar

Used for heatmaps and user behaviour recording.

Web Design Rules
‍
12-column grid layout, Layout Breakpoint, Color System

1. Breakpoint for Responsive Design

breakpoints: {
    values: {
       xs: 0,
       sm: 600,
       md: 900,
       lg: 1200,
       xl: 1440
     }
   },

2. Grid and Layout

[layout] Max. 1200px
‍
[grid] 12 Column / Count=12 / Width=auto / Gutter=24 / Margin=24
‍
[variable] Column Width

3. Variables

[img] proportional scaling
‍
[cards] The width changes adaptively, switch line when reaching the breakpoint area or wrapping.
‍
[text] The main title adapts the font size according to the breakpoint, and the text description class remains unchanged.

[navigation] xs and sm, unfoldable due to dev team’s time and resource constrains.

4. Large Screen

Example: LG(1200px-x), grid line is always 12 columns, a card may takes 3 columns, therefore 4 cards per row, please see below

5. Small Screen (Mobile)

Example: xs (0px-599x), grid is 4 column, a card take 4 columns，1 card per row, see below

6. Color System

Example: The primary color is variations of blue, The secondary color is variations of cyan.

Design Approach

1. Research, Empathize and Define
‍
Before building a solution, a project team needs to find out whether users need it and whether other solutions exist. My responsibilities during this phase are to build an understanding of the problem space/statement, the long and short-term business goals, and the user and business needs.
‍
Duties and Deliverables:
- Facilitated the Kick-off Meeting.
- Developed a Business Model Canvas to outline the business plan.
- Explored the root cause of problems.
- Created User Personas to represent the target audience.
- Performed Stakeholder Mapping to identify and categorize stakeholders.
- Developed a Strategy Map to visualize organizational objectives and strategies.
- Established Short and Long Term Goals for the project.
- Identified Fears and Challenges associated with the project.
- Crafted a clear and concise Problem Statement.
- Conducted Competitive Analysis and SWOT.
- Facilitated User Research Activities:
- Developed User Interview Topic Maps to organize and relate topics for the interviews.
- Created User Interview Scripts to guide discussions.
- Conducted User Interview Synthesis for collecting, aggregating, and analyzing observations.
- Compiled a User Research Findings Report to summarize insights.
- Showcaseed the work and key findings from this stage to stakeholders.
- Aligned the entire team (business, technical) on next steps.
‍
2. Define, Design and Prototype
‍
Brainstorm solutions for the problems gathered previously; may refer to other products on the market for inspiration. Ideas will be sketched out if necessary.The solutions will then be visualized by creating high-fidelity designs populated with authentic content.

Duties and Deliverables:
- Built and tested Information Architecture
- Created various "clickable" prototypes that offer potential solutions, included low fidelity and high fidelity wireframes.
- Validated "clickable" prototypes.
- Engaged users in usability testing sessions with the prototypes.
- Generated a research findings report based on the feedback and observations.
- Iterated on prototypes:
- Refined and improved the "clickable" prototypes using insights from the research findings report.‍
‍
3. Test and Validate
‍
‍Create realistic looking fully interactive prototypes to run user testing sessions on. Optimize the design according to user insights gathered during testing. Product development will start when major problem no longer surfaces during further user testing sessions.
‍
Duties and Deliverables:
- Conducted raegular usability testing sessions on the livebuild.
- Analyzed usage ansalytics and user behaviour patterns to track and measurekey performance indicators.
- Produced key metric to track user engagement with the product.
- Coordinated with the development team to launch MVP product.

The Solution

We designed and launched a digital platform for DataLynn, geared towards facilitating the job search process through an interactive and user-friendly interface. This platform enhances the job-seeking experience with advanced AI-driven features, including resume optimization, mock interviews, and job matching capabilities. Essential tools such as real-time interview feedback, comprehensive learning modules, and personalized job alerts were integrated to assist users in their career development. Additionally, the platform employs anonymized profiles to maintain user privacy while offering a seamless, efficient, and secure pathway to employment opportunities.
‍
Key Features included:
- Tutorial - Video and Information Based Courses.
- Interview Questions - Information Based Split-Screen Lessons.
- Mock Interview - LLM Based Voice to Voice AI Agent.
- AI Hub - Project Based Competition.
- Auto Resume Builder - Utilized ChatGPT API for Resume Optimization
- Job Boards

Note:
- Due to the file size, only the main features are presented in the demo below. Pages such as login and registration process are not presented.
- There maybe a delay to load the demo file.

The Result

The platform successfully gain the $300k initial investment funding and facilitated connections with more than 15 venture capital firms for future funding opportunities.

HomeResumeContact

Owen Qian
647-473-4349
owenqcyuan@gmail.com

Owen Qian