From Sketch to Interaction: Designing StudyBuddy

Good product ideas rarely begin as polished screens. They begin as questions, rough sketches, and conversations.

When we started thinking about StudyBuddy, the goal wasn’t to design another chatbot interface.

The question was:

What would an AI study companion actually need to do to help someone learn — rather than simply give them an answer?

That question changed how we approached the design.

Instead of jumping straight into high-fidelity UI, we started with something much simpler: paper, a pen, and a few possible interactions.

Start with the behaviour, not the interface

A common mistake when designing AI products is to begin with the chat screen.

You design a text field.

You add a send button.

You create a response bubble.

And suddenly you have a chatbot.

But the interface doesn't tell us what the product should actually do.

For StudyBuddy, we first mapped the interaction.

A learner asks a question.

StudyBuddy needs to understand what they are struggling with.

It may need to think about how to explain something.

It should respond in a way that supports learning.

And then it should help the learner decide what to do next.

That gave us a simple interaction:

Chat → Think → Respond → Continue learning

Why sketch on paper?

Because paper makes it easier to think.

A rough sketch doesn't make you worry about spacing, colours, typography or perfect components.

You can draw a screen, cross it out, move something, add another state and try again.

The purpose isn't to create something beautiful.

The purpose is to make the behaviour visible.

For StudyBuddy, we sketched three key states.

01 — Chat

The learner starts with a question.

For example:

“I’m struggling with user segmentation. Can you help me understand it better?”

Instead of immediately designing a long AI response, we asked:

What could StudyBuddy do next?

Could it explain the concept?

Give an example?

Suggest a practice exercise?

Show key methods?

The first screen helped us think about these possibilities.

02 — Thinking

The second state is easy to overlook.

Most AI interfaces jump directly from the user's question to the answer.

But the transition between those two moments is part of the experience too.

We explored a simple Thinking state.

Not because the user necessarily needs to see the AI's internal reasoning, but because the interface needs to communicate that their request is being processed.

This is an important interaction-design principle:

Every state communicates something.

Loading, empty, success, error, confirmation and transition states aren't secondary details.

They are part of the product.

03 — Respond and continue

The final state isn't just about producing an answer.

It's about creating a pathway to the next learning action.

StudyBuddy might explain user segmentation and then offer:

• Show me an example

• Key methods

• Practice exercise

This changes the interaction from:

Question → Answer

to:

Question → Understand → Explore → Practise

And that distinction matters.

The prototype is testing a hypothesis

At this stage, the sketches aren't the final product.

They're a way of asking better questions.

For example:

Does the learner understand what StudyBuddy is doing?

Are the suggested next actions useful?

Does the thinking state add clarity or unnecessary friction?

Should the AI give an answer immediately, or first ask what kind of help the learner wants?

Does the interaction encourage learning, or simply encourage dependency on AI?

These are product questions — not visual-design questions.

And they're much cheaper to explore with a pencil than after spending days building polished screens.

Design the conversation, not just the chat UI

AI products introduce a different design challenge.

With a traditional interface, designers often think in terms of:

Screen → Action → Result

With conversational products, the experience can be closer to:

Intent → Conversation → Interpretation → Response → Next action

That means designers need to think beyond individual screens.

We need to consider:

• What happens when the user doesn't know what to ask?

• What happens when the AI misunderstands?

• What happens when the user wants more detail?

• What happens when the user disagrees with the answer?

• What happens when the user wants to practise instead of read?

• What happens when the user needs to correct the AI?

• What happens after the conversation ends?

These behaviours are where much of the real design work happens.

From paper to prototype

Once the interaction begins to make sense, the sketch can become a prototype.

But the order matters.

Sketch → Test the flow → Prototype → Test again → Refine → Build

Not:

Make it beautiful → Build it → Discover the interaction doesn't work

The paper sketch gives us permission to explore.

The prototype gives us something we can interact with.

User feedback tells us what needs to change.

And the final interface emerges from that process.

The bigger lesson

The most important part of the StudyBuddy prototype isn't the phone screen.

It's the thinking behind it.

A good prototype isn't simply a smaller version of the final product.

It's a question made visible.

When you sketch three screens, you're really asking:

What should happen here?

Why should it happen?

What does the user need at this moment?

What should happen next?

That's why sketching remains such a powerful design tool — even when we're designing products powered by some of the most advanced AI systems available.

Because before we can design the interface, we still need to design the experience.

Try it yourself

Pick a product you're working on.

Don't open Figma.

Take a sheet of paper and sketch three states:

1. What happens before the user acts?

2. What happens while the system responds?

3. What happens after the action is complete?

Then ask yourself:

What is the product communicating in each state?

You might discover that the most important part of your product isn't the screen you were planning to design — but what happens between the screens.