One primary action.
Filled actions communicate the next step. Outlined and text actions keep alternatives visible without competing for attention.
A softer landing for your thoughts.Graduate team project · My focus: UI / UX
Leave it here. Return when you’re ready.
Where thoughts go to rest.
Leave the thought.
Keep the night.
01 / THE SLEEP STONE
A place to put the day down.
02 / RETURN TO IT
Your words, in your own time.
03 / CHOOSE
A step, only if you want one.
01 / The ideaThe stone comes first
A stone by the bed.
A little less on your mind.
Offlo is a sleep-oriented product concept: a stone-shaped bedside companion designed to help people settle a busy mind before sleep, with an app for returning to their thoughts later.
The physical object is central to the experience. Its natural form, material character and soft light establish a calmer bedside presence. My teammates led the physical product; my primary contribution was the UI/UX connecting the night-time ritual with the morning review.
This digital refinement keeps that relationship intact. The phone offers an alternative capture route, while the original stone remains the intended bedside companion.
- My contribution
- Primary contribution: UI/UX
Digital journey, interface & interaction - Project
- Graduate team product concept
Physical product led by teammates - This edition
- Sleep stone + companion app
Night-to-morning experience
A physical place to put the day down
The object.
The ritual.
The return.
The original stone, droplet and ripple are one connected idea: a thought lands somewhere outside the mind. The logo carries that idea into the digital companion.
- At the bedsideThe stone anchors the proposed night-time experience, away from a phone screen.
- In the morningThe app lets you return to the original thought and decide what, if anything, comes next.
- In this browserTry the app’s phone fallback. The preview does not connect to hardware.
The same thought. A different moment.
Night gives space.
Morning gives shape.
The original sleep stone, droplet-and-ripple identity, carried into the app’s night and morning modes.02 / The design directionLess pressure. More control.
The useful part
is the handoff.
Day and night change more than the background. The amount of information, the primary action and the point at which a person can leave all change with the moment.
01 / At night
Finish the moment.
Don’t start another one.
Capture asks for words, not categories. Saving ends with a reassuring receipt and “Done for tonight”, without a prompt to organise the next day.
- 01 Voice or writing, with a clear start.
- 02 Pause, listen back, save or discard.
- 03 A clear end to the interaction.
02 / In the morning
Return to your words.
Choose what follows.
The original thought remains visible. A possible action is a separate decision, with room to edit the wording, choose a day or leave it as a thought.
- 01 Search meaningful thought titles.
- 02 Read or replay the original record.
- 03 Choose, defer or undo a decision.
Original concept and new design decisions ＋
The original team materials contain night and morning screens, voice records, transcripts, suggested steps and scheduling. This 2026 refinement adds explicit capture controls, a written fallback, a saved stopping point, searchable records and reversible planning. These are design proposals, not findings from a new user study. The browser does not connect to the bedside object or generate AI advice.
03 / Try the experienceAn interactive concept
Let it land.
Then let it wait.
A working journey, at your pace.
Leave a written thought, or explore a sample morning. Find the thought, choose one step and try completing, removing or restoring it. Voice capture is optional and only begins after you allow your microphone.
LEAVE ITRETURNCHOOSE
This preview keeps text and optional audio in this tab only; reload clears them. Nothing is uploaded. No hardware, transcription or AI service is connected.
04 / The interfacesA connected core, including the edges
Quiet in tone.
Explicit in every state.
The journey includes the moments that are easy to leave unfinished: a paused recording, a failed permission request, an empty plan and a changed mind.
Interface collection / tap to enlarge
05 / The design systemOfflo identity / Material 3 foundations
A small ripple.
A clear visual language.
The original stone, droplet and ripple symbol stays intact. Its forms inform the supporting illustrations, while reading surfaces stay quiet. Day and night colours support different moments without replacing the identity.
Less to hold.
More room to begin.
Clear words. Deliberate choices.
Reflective serif headings; clean sans-serif reading and controls. The Figma library uses Lora and Manrope. Mobile content follows a consistent spacing scale, with controls sized for touch.
Material 3 foundation reference ↗Night / surface#252536
Coral / action#F6AA8F
Cream / morning#FAF6F0
Lavender / possibility#DEDFF3
Sage / completion#DDE8DA
Terracotta / emphasis#9B4027
State is more than colour.
Labels, icons, selection indicators, helper text and focus outlines communicate what changed. Errors include a usable next action.
Control over the moment.
Stable navigation, comfortable touch targets, readable surfaces and reduced-motion support carry across both themes.
06 / Looking backA proposal, with a next step
A calmer experience.
A concept still to test.
Design decision
Make stopping feel complete.
The saved state deliberately closes the night-time interaction. In the morning, keeping a thought is as legitimate as choosing a task. Removing a thought also explains what happens to its linked steps, with an undo route.
Next validation
Test the handoff, not a promise.
Next I would observe whether people understand what is saved, can return to the same thought, and feel free to defer an action. I would also compare bedside capture with the phone fallback. These studies have not been run for this iteration.
Project & image credits ＋
Graduate team project. My primary contribution is UI/UX; teammates led the physical product. Sample thoughts and plans illustrate the interaction. The logo and stone concept render come from the original project’s Figma board. The render illustrates the product concept; it is not evidence of a manufactured device. No sleep improvement, working bedside connection or AI efficacy is claimed. Supporting sleep is the design intent, not a measured outcome. The 2026 portfolio revisit uses AI-assisted interface refinement and presentation production under my direction. No launch or measured usability improvement is claimed.