Digital Drift

AI Design Tools, UI/UX Design, Thesis

Digital Drift is a graduate thesis proposing an AI-powered research assistant that sits between a whiteboard and a generator. Helping designers navigate complexity and uncover the narrative within it.

How to Use Digital Drift?

As a research assistant, Digital Drift is designed to support designers in the early stages of the design process. It uses AI to transform messy drafts into clear narratives that can be presented to clients or team members.

Now, let’s walk through how to use the product with our user, Billy.

User Persona: Billy

Billy is a freelance graphic designer based in California. He has been commissioned by LA Metro to create a timeline poster for their 100th anniversary.

He want to gather his initial ideas and prepare a clear creative direction to present at next week's client meeting using Digital Drift.

Input Materials

Billy starts by adding the client's design brief as the initial node.

Then he begins collecting and organizing assets using the “Add New Node” feature, simply dragging and dropping images, videos, websites, or website clips into the interface.

Gathering Research

Now that Billy has gotten his messy thoughts onto this canvas, he moves forward to do more research using the “Related Research” and “Find Similar Images” features.

Exploring Relationships

To make sense of everything he has gathered, Billy connects nodes using the “Node Connections” feature. By simply dragging the handles, he creates a mind map that visualizes the relationships between all assets.

Identifying Direction

Now that Billy has all the assets and ideas ready, he wants to identify potential creative concepts.

But before he jumps to creating a narrative, he wants to make sure what he's building toward is actually what the client asked for.

So he sets the node that contains the design brief as a North Star. With it, the narrative will connect his research back to the actual brief."

Create Narrative

Billy selects the nodes that best represent his creative direction and uses the “Create Narrative” feature to generate a concept.

AI analyzes the selected nodes and suggests several narrative directions. Once a direction is chosen, he defines a framing angle that shapes the perspective of the story.

The result is a structured narrative that consolidates his research and creative exploration.

Final Outcome

Billy uses the narrative generated in Digital Drift to build a clear, structured presentation script, enabling him to successfully communicate his ideas to the client during the meeting.

Early Prototype Explorations

The early exploratory prototypes are developed before the final system took shape.

These initial experiments tested conceptual ideas, interaction possibilities, and structural approaches that helped define the overall direction of Digital Drift.

Rather than focusing on refinement, this phase was about discovery and establishing the project’s core trajectory.

Prototype 1

Tool: FigJam AI mind map

The first prototype used FigJam AI to continuously generate ideas from the prompt: “A node-based interface for design thinking.” I kept prompting it until the output no longer made sense.

This experiment tests the limits of AI when designer input is gradually removed from the thinking process, while also questioning what kinds of tools are truly useful for designers.

Prototype 2

Tool: FLORA AI

The second prototype used the same prompt: “A node-based interface for design thinking,” but this time with FLORA AI, which was able to generate visual outputs.

Without designer input and critique, the results quickly became repetitive and ineffective.

This raised questions about the necessary level of human interaction when collaborating with AI, highlighting how AI often acts as an executor while shifting the designer’s role toward judgment and decision-making.

Prototype 3

Tools: Gemini (text), ChatGPT (text), Adobe Firefly (images)

Prototype 3 used Gemini and ChatGPT to write detailed text prompts for Adobe Firefly, generating conceptual images for “A node-based interface for design thinking.”

This experiment explores collaboration between multiple AI tools, and how an abstract idea can be translated into a more tangible visual outcome.

Prototype 4

Tools: Claude, Figma-Make

Using Figma Make, Prototype 4 explored four node-based interface variations combining node mode and narrative mode. Among them, Prototype 4.3 established the direction of Digital Drift.

This prototype introduced two modes: a node mode for inputting ideas and materials, and a narrative mode where AI transforms this complexity into a structured form for communication.

This led to a key insight: tools for designers must support both drift and delivery, reflecting how designers constantly move between chaotic ideation and clear communication.

Additional Prototypes

Product Development

Tools:

Cursor - Used as a coding assistant during the development of the interface implementation process.

Claude - Used to assist in outlining and structuring the interface implementation plan.

ChatGPT - Used for conceptual exploration and discussion related to thesis direction and framing.

Digital Drift follows a practice-based design research methodology, combining iterative prototyping with user evaluation.

Development was structured in two primary phases. The first, spanning Weeks 01 through 05, focused on establishing the foundational UX structure of the interface.

Weekly user testing sessions were conducted using a structured feedback form to evaluate usability, clarity of interaction, and how effectively the system supported nonlinear idea organization.

The second phase, spanning Weeks 06 through 10, focused on UI design implementation and refinement.

A separate evaluation form gathered feedback on visual hierarchy, interface clarity, and overall user experience. Insights from both phases informed iterative adjustments to the interface, ensuring the final system evolved through both conceptual exploration and user-centered evaluation.

First Phase: UX Foundation

First Phase User Testing

Participants rate each statement from 1–4, where:
1 = Strongly Disagree, 4 = Strongly Agree.

Each number represents the average score of the corresponding week.

1. This tool addresses a real challenge I face when making sense of complex design information.

3.33 3.50 3.33 3.67

2. The node-based approach feels natural for how I think about and organize design concepts.

3.33 3.25 3.67 4.00

3. I can see myself using this tool as part of my regular design workflow.

4.00 3.50 3.67 4.00

4. This tool helps me understand relationships between ideas better than my current methods.

3.67 3.00 3.33 3.67

5. I can effectively capture and structure my thoughts using this interface.

3.00 2.75 3.33 3.67

6. The available content types (text, images, videos, web clips) are sufficient for my design work.

3.33 4.00 4.00 4.00

7. The tool helps me discover insights I wouldn’t have found with other methods.

3.00 3.25 3.33 3.67

8. I feel like this tool is made specifically for designers (not just adapted from other fields).

3.33 3.25 3.67 3.67

9. The functionality solves the problem (designer struggle to translate thoughts) in the right way.

2.67 3.75 3.33 3.67

10. I would choose this tool over my current sense-making methods (whiteboards, mind maps, etc.).

2.67 3.00 3.67 4.00

Second Phase: UI Design Implementation

Second Phase User Testing

Participants rate each statement from 1–4, where:
1 = Strongly Disagree, 4 = Strongly Agree.

Each number represents the average score of the corresponding week.

1. The current set of features feels complete and sufficient for my design needs.

3.33 3.50 4.00 4.00

2. I can immediately understand what is primary, secondary, and supportive information.

3.33 3.50 3.33 3.67

3. The visual hierarchy guides my attention naturally through the interface.

3.67 3.67 3.67 3.67

4. Important actions stand out clearly from less important ones.

3.67 3.50 3.67 3.67

5.  I never feel visually lost when navigating between panels or views.

3.33 3.33 3.67 3.67

6. The spacing and alignment make the interface feel structured and intentional.

3.67 4.00 4.00 4.00

7.  The interface maintains clarity even when many nodes or elements are on screen.

4.00 4.00 4.00 4.00

8.  The typography feels purposeful and reinforces the structure of content.

3.33 3.83 3.67 3.67

9. The color system communicates meaning (states, relationships, actions) clearly.

3.33 3.33 3.67 3.67

10. The interface feels like a cohesive design system rather than a collection of components.

3.33 3.83 4.00 4.00

Initial Inspiration

My thesis begins with the idea of commuting. Just as people travel between home and work, designers move between tools like Pinterest, Figma, InDesign, and ChatGPT.

These so-called “in-between” moments reveal a deeper truth: the design process is nonlinear by default."

The Thesis Digest newspaper acts as a trailer to the project, revealing the initial inspiration and thought process, while inviting viewers to join the journey.

Conversation with AI

This half-letter size book documents my early-stage thesis exploration through conversations with ChatGPT. The layout replicates a chat interface: the right pages present the actual dialogue, while the left pages capture my inner monologue in response.

As an information design piece, Point A reveals how contemporary designers work with AI as part of their everyday design process.

A Node-Based Thesis Book

The thesis book documents my entire process from research and ideation to project development. The table of contents is designed as a node graph, treating each page as a node and organizing content by relationships rather than a fixed sequence.

This gives readers the freedom to navigate the book nonlinearly by choosing their own path while maintaining a sense of direction.

Previous
Previous

The City That Moves Through Us

Next
Next

Uptown Whittier