Meet Thomas
Head Design Engineer at Hailera, part of the EWOR programme. I rebuilt Boski’s onboarding and chat as a focused concept. Here is the film, the thinking, and the work.
video/boski-film.mp4
Design and code, in one person
At Hailera I built the infrastructure and the design, so I work across product, design and code. This concept follows the same approach: design it, then build it for real.
How I got to this concept
A short timeline, from using the product to a working prototype.
- 01 · Use it
Signed up
I went through the onboarding and the chat slowly, taking notes on where it felt heavy and where it felt right.
- 02 · Notice
Where it felt wrong
Onboarding ran longer than expected and progress was unclear. Most of all, it felt like filling out a form instead of interacting with the agent itself. In chat, I wanted clearer feedback on what the agent is doing.
- 03 · Frame
A hypothesis, not a verdict
I don’t have completion numbers, so I treated it as something worth measuring. I kept what already works: chat feels like messaging a person.
- 04 · Concept
Two focused screens
Onboarding that reads as a conversation, and a chat that is easier to follow.
- 05 · Build
Rebuilt in code, then filmed
Both screens run as real components, and the onboarding is now responsive from desktop down to a phone. The film above is the concept in motion, not a mockup.
The concept
Two screens, both running as live components.
Onboarding
Less like filling out a form, more like Boski learning about you reacting, remembering, and giving something back as you go.
A bounded structure
Four topics, a few questions each, and a clear sense of progress.
Why a short onboarding
The aim is not only signups, but people who complete onboarding and keep using Boski. A shorter flow is easier to finish, so it asks only what it needs to. The rest Boski learns from your conversations, and it updates its own memory as you go.
Chat
A clear message thread with visible read states and key actions within reach.
Components
The real components from the product, rendered live in your browser, from the full screens down to the smallest part.
Onboarding
One column on a phone
The chapter strip stays visible as answers and insights flow into one clear column.
Parts
Answer pill
Fits its label, keeps a steady height and uses contrast to show selection.
Chapter strip
Shows the chapter, question count and progress at a glance.
Chat
One column on a phone
The navigation folds away while the thread and composer fill the screen.
Parts
Navigation
Brand, items with a quiet status dot, and the account card.
Header
The current topic as a title, with a quiet label beneath.
Messages
Agent bubbles are dark, yours are light. Each carries a label, a time and a read receipt.
Composer
A single rounded field with the add and voice actions inside it.
Primitives
Brand lockup
The Boski mark and wordmark.
Icon buttons
Ghost and light tones.
Status chips
Small labelled chips used in the learning panel.
Account card
Avatar, name, workspace and a settings button.
What I kept coming back to
- 01Let users feel Boski learning
After each answer, Boski should react and update the profile on the right, so users can actually see what the agent understood.
- 02Make onboarding feel finite
The user should always know where they are and how much is left. Clear progress makes a long setup feel manageable.
- 03Keep the interaction conversational
Questions should feel like part of a dialogue with Boski, not like completing a personality test or long form.
- 04Show what Boski is doing
When Boski reads, saves, thinks, or acts, the interface should make that visible instead of hiding everything behind a loading state.
- 05Keep the UI quiet
Use whitespace, strong hierarchy, and only the controls needed for the current task. The interface should support the conversation, not compete with it.