CASE STUDY | WEB DESIGN

Case Study : Chat GPT (PRD based)

TIMELINE

Apr 2024 ~ May 2024

TEAM

4 UX/UI Designer (me)

TOOLS

Figma

MY ROLE

  • Set up the design system and layout following Google Material Design and WCAG (Web Content Accessibility Guidelines).

  • Conducted target research from PRD and designed the folder management feature.

OVERVIEW

BACKGROUND

Improving ChatGPT's UX Through Client Needs

What is PRD?

A Product Requirements Document (PRD) outlines a product’s goals, users, and features, aligning teams with clear objectives and constraints for an efficient, measurable development process.

Client Scenarios

User A : Solo Businessman


A, a solo entrepreneur, relies on ChatGPT for productivity but struggles with managing accumulated conversations. Without a saving feature, he’s forced to search or scroll endlessly to find key information.

User B : College Student


B, a college student, uses ChatGPT for assignments but loses past discussions in the clutter. With an unintuitive UI and no easy way to retrieve past chats, she often gives up searching altogether.

Product Requirements Document (PRD) Received

Product Name

ChatGPT

Target Users

College students

Solo entrepreneurs

Project Goal

Better history management

A friendlier design

PROBLEM

Target Users' Needs

Analysis user requirements (Based on PRD)

What do they struggle with?

SOLUTION

Finding Solutions Through the User Journey

Key Solutions

Point 1

Creating Questions


Point 2

Viewing Responses


Point 3

Generating Related Questions

Point 2

Saving & Managing Responses

FINAL DESIGN

Renewal UI

Point 1

Creating Questions

Point 2 & 3

Viewing Responses, Generating Related Questions

Point 4

Saving & Managing Responses

PROBLEM STATEMENT

Understanding Users

PRD Analysis

What: What do users need from the product?

Why: Why do they need it?

PRD Analysis helps identify potential issues and refine solutions.

Target User Analysis

SOLUTION

Customized Work-Specific Features

Based on user analysis, we identified the following solution insights.

Additionally, we derived solution keywords from further user needs.

DESIGN SYSTEM

Style Guide

USER JOURNEY

User Journey

Based on the target users’ expected journey, we defined the scope of service improvements. The size of the circles represents the frequency of interactions with the service.

Renewal Solutions

Point 1

Creating Questions


Point 2

Viewing Responses


Point 3

Generating Related Questions

Point 2

Saving & Managing Responses

FINAL DESIGN

Renewal UI

Point 1 - Creating Questions

Point 2 & 3 - Viewing Responses, Generating Related Questions

Point 4 - Saving & Managing Responses

Enhanced Navigation & Temporary Mode(Secret Mode)

Enhanced Navigation & Secret Mode

Enhanced Search

REFLECTION

New AI Products Demand New UI/UX.

  • Designing this product required integrating multiple functionalities, search, note-taking and storage, into a seamless, all-in-one experience. Unlike traditional tools, this approach demanded a more holistic and user-centered design strategy.

  • As an emerging product category, data on user behavior is limited, making usability testing and research crucial for validation.

  • To effectively bridge user needs with cutting-edge AI technology, continuous learning and adaption to new interaction paradigms will be essential.

Have ideas, feedback, or just want to chat?

Let's Connect!

I'd love to hear from you! Let's grab a virtual coffee - just drop me an email. ☕

2025 Josh Jang