Mobile app
Case study
UI UX Design
Adrian Nemes
Doorstep - Personal Departure Assistant - Case Study
Tools Used
Figma
Claude
.
Illustrator
Google Docs
.
Photoshop
ChatGPT
2026
"Doorstep is your personal departure assistant that will assist you step by step, giving you ease of mind throughout the day knowing you'll be out the door in time."
The Problem
Many people have trouble estimating the time needed to get ready for a scheduled event or appointment. Existing apps fail to account for preparation and travel time and expect the user to do mental math.
Our Solution
Doorstep provides ease of mind by telling users exactly when they need to start preparing by reverse engineering the preparation timeline, as well as guiding them through the process itself.
01 - Research
Opportunities
By visually breaking down an event into its distinct, actionable phases (preparation, travel, arrival), we can remove the guesswork from daily routines and provide a structured visual timeline.
“I often arrive at places way too early because I'm so afraid of being late.”
Gaps
Existing calendar apps only track the destination, not the journey. They force users to perform constant mental math to calculate preparation and transit times, increasing cognitive load and fueling "waiting mode" paralysis before scheduled events.
“It feels like everything is stacked on top of each other”
Impact
Automatically filling these transitions significantly reduces pre-event anxiety and reclaims hours of lost productivity. Users can trust the interface to notify them exactly when to start moving, allowing them to fully decompress and relax prior to getting ready.
“I spend so much time in ‘waiting mode’ because I have that one event scheduled for the day”
Anna is a 25 years old animal shelter worker, living in Budapest. She loves spending time with animals and with her friends. She has been diagnosed with ADHD, and time blindness has a big impact on her social and professional life.
A way to easily set up and stick to routines Colour coordinated tasks visually presented Fixed sense of calm before a scheduled event
Frustrations
Anxiety about being late
Spending too much time in "waiting mode"
Having to adapt to people rescheduling events
02 - Design
Creating a new event
From the beginning the "New event" screen was a key focus of Doorstep. The way a user logs an event will define how they interact with the app later on. First, enter basic details about the event itself — this determines their arrival time.
Users have the option to set travel time for events taking place outside of their home. Doorstep will calculate travel time based on the destination and travel mode selected, so they know exactly when to leave.
Users also have the option to set up tasks and checklists for the preparation phase. Doorstep will remind users when they need to start preparing, and guide them through these tasks with a visual timer.
The event card will appear in the calendar, with the most important details available at a glance.
Calendar
Users are able to skim through their upcoming events in the build in calendar menu. They can also sync up preexisting calendars with Doorstep to import events.
Preparation phase
The design challenge with the preparation phase was building a visual timer that best represent the passing of time for users with time blindness.
Once preparation begins, a focused timer view walks users through each task one at a time. Tapping play starts the countdown for the current task.
While a task is running, users can pause anytime or check it off early if they finish ahead of schedule.
For tasks that aren't time-based — like packing a bag — users can switch to a checklist and tick items off in any order.
After the event, Doorstep shows a quick breakdown of how the day actually went — how long each phase took compared to what was planned, and where things ran early or late. This data feeds back into smarter suggestions for future events.
03 - Branding
Doorstep is all about reaching that threshold of leaving the door and stepping out into the world. The Doorstep logo is about representing this threshold and the steps leading up to it, using a simple pictorial and a friendly yet modern wordmark.
The logo should only be used on solid background, with no rotation, distortion, and minimum clear space as shown on the right.
Icon variations
Typography
Poppins is used for body text and UI elements — semibold for headings and button labels, medium for subheadings, regular for body copy.
Chillax is used exclusively for presentation titles, branding, and main display text.
Colour
Neutral primary colours
Neutral, slightly cool grays form the basis of Doorstep, including the UI and branding.
Users have the option to choose from 8 preset colours when adding new events. The colour shows up in time badges, icons, timeline dots, section highlights, and the event card itself.
Dynamic accent colours - Card background
Dynamic accent colours — Pill background
Dynamic accent colours — Card border
Dynamic accent colours — Text / Icons
Use cases
Store page and widgets
UI Components
04 - Reflection
- ·Creating a full colour/typography system, using standard naming conventions that are ready for development
- ·Iterating the calendar screen taught me to check every new screen against the established visual language — a screen can be functionally correct and still feel like it belongs to a different app if it drifts from established patterns
- ·Creating complex components inside Figma with variables that can be easily reused in the app
- ·Engineering the mobile app and deployment
- ·Iterating based on real life user data collected
- ·Implementing monetization through pro features such as AI powered suggestions for tasks and checklists when creating new events, introducing advanced statistics and more
