ChatGPT Visual Reader

UIUX Design
Duration
1 Months
Tools
Figma
My Roles
UX Researcher
Interaction Designer
Visual Designer
Project Type
Personal Project

Overview

Background

As a non-native English speaker and regular ChatGPT user, I frequently rely on it for tasks such as refining my text, summarizing articles, and aiding in basic content creation. While ChatGPT has proved helpful and convenient, its web-based interface has introduced complexity into my workflow, leading to inefficiencies. Recognizing the need for a more streamlined process, I became motivated to enhance the workflow of ChatGPT for users like myself.

Problem Statement

Multilingual designers who frequently use ChatGPT as an assistive tool need a more streamlined user experience of ChatGPT, reducing the need to switch between multiple pages, so that they could enhance their workflow efficiency and productivity.

Goals

How might we ensure ChatGPT's seamless functionality across multiple platforms, aiming to streamline and simplify the workflow for users?

Design Process

Understand

Survey

I carried out a survey involving 26 multilingual designers and artists who utilize ChatGPT.  The survey aimed to gather information about their interaction with ChatGPT, the purposes for which they use it, and to analyze the patterns of interaction among them.

Participants Age Range

Frequency of Use

Commonly Used Functions

What are your main purposes for using ChatGPT?

Frequency of "Copy & Paste"

Have you ever copy and paste text into ChatGPT?

Current Flow with "Copy & Paste"

The survey findings indicate that frequent copying and pasting actions are common in the interaction with ChatGPT, and these steps have been identified as primary factors impeding user workflow efficiency.

Research

Inspirations

Since it is difficult to find direct competitors at present, I conducted more research to investigate products that provide related services or similar models.

Platform Comparison

After researching on the inspirations, I identified several platforms on which the design could be implemented. To determine which platform best meets the design goals and best addresses the needs of the user, I compared them from the desirable dimension.

Empathize

Persona

Scenarios

After defining the platform and persona, the next step is to define the what interactions need to be included. Based on the results and analysis of the user survey, I chose 3 common  interactions, designing 3 different scenarios.

Scenario 1:

Improve writing of a interview summary chart

Scenario 2:
Summarize the article with images

Scenario 3:

Translate document into English

Design

User Flow

Mid-Fi Wireframes

Based on the usage flow, I designed different wireframes for three scenarios, aiming to test the usability and feasibility of these feature as quickly as possible.

Test

Usability Testing

Once the wireframes of all three scenarios were wired and ready for use, I designed one task for each scenario. Then I organized and conducted moderated usability testings for five potential users to test if users can complete core tasks within the prototypes and if this tool is easy to use.

  • Tasks 1: In scenario 1, you have a chart of information, and you want to improve the writing of it.
  • Tasks 2: In scenario 2, you want to summarize this long article you are reading.
  • Tasks 3: In scenario 3, you want to translate the script into English you selected.
40 s
Average Time
to Complete Task 1
31 s
Average Time
to Complete Task 2
23 s
Average Time
to Complete Task 3
75/100
System Usability
Score

Insights

In the process of hosting, I also collected interviewees' ideas about the prototype and extracted them into insights for further improvement of the prototype.

  • 5 out of 5 participants said they would prefer to enter information directly from a chat box rather than an icon toolbar.
  • 4 out of 5 participants think a desktop application is more helpful and easy to use than an extension.
  • 3 of the 5 participants were more likely to click on the green dot to see the proposed changes.
  • 2 of the 5 participants wanted to see the original text more clearly and directly compared to the revised version.

Iterated Design

Final Design

Scenario 1:

Improve writing of a interview summary chart

Scenario 2:
Summarize the article with images

Scenario 3:

Translate document into English

Design System

Color

Typography

Icons

Buttons

Components

Evaluation

Prototype Testing

After completing the design, I ran another round of user testing on the prototype to evaluate the improved results. Multiple data shows that the usability of the prototype and user satisfaction have been greatly improved.

40
21 s
Average Time
to Complete Task 1
31
28 s
Average Time
to Complete Task 2
23
19 s
Average Time
to Complete Task 3
75
90/100
System Usability
Score

Retro