Case Study | Zonefully

Connecting long-term goals to everyday routines

A planning app that connects personal goals with recurring routines and a calendar to put them into practice.

Interaction designVisual design

Role

UX and UI design

Team

Working directly with the founder

Timeframe

10 days / 2021

Key points

Translated the founder’s conceptual model into a coherent interface
Used connected cards to keep context visible between programmes and routines
Worked with the founder from concept through to a functioning v1

Zonefully's Programs screen: a searchable list of programmes on the left, and the selected programme's detail — cover image, activity and ordered routines — on the right. — Programme list and detail share one spacious structure; the activity colour and selection highlight tie a programme to its routines.

Summary

Zonefully’s founder approached me to design the UX and UI for an app that organised recurring activities around long-term goals. He had a well-developed conceptual model, and my role was to make it understandable through the interface.

During a short engagement, I designed the navigation, editing states and visual treatment, helping translate the concept into a functioning first version.

Problem

Connecting the bigger goal to the next action

Zonefully brought together several related concepts. Activities represented the things people wanted to plan and track. Programmes grouped Routines into sequences, which could then be applied to a calendar.

For a cycling goal, that could mean training and recovery programmes containing individual rides and rest days. The challenge was to make these relationships easy to follow without asking people to understand the whole system before they could start.

Zonefully's Planner: a programme's routines laid across a week, with a side panel naming the Activity, Programme and Routine for the selected slot. — A programme’s routines placed on the calendar, with the chain from activity to programme to routine kept in view.

Approach

Making the structure visible

I worked within the founder’s conceptual model, focusing on how people would navigate between its different levels. Programme lists, routine lists and detail views followed a consistent visual structure.

A spacious layout separated the main areas of the interface. Activity colours, selection highlights and breadcrumb labels reinforced the connections between goals, programmes and routines.

A newly created 'Untitled Program' selected in the list and open in the detail panel, with an 'Assign to an Activity' prompt and empty day-by-day routine fields. — A new programme starts with the next steps spelled out: assign it to an activity, then add some routines.

Key decisions

Keeping context alongside the detail

The interface centred on cards that opened and collapsed across the screen. Selecting a programme revealed its routines; opening a routine brought its details into focus alongside the programme it belonged to.

This gave navigation a consistent direction. The intention was to let people move into the detail without losing sight of the plan they were working on.

A routine opened for editing alongside the programme it sits in, with a breadcrumb reading Activities › Ride the Tourmalet › Programs. — Opening a routine brings its detail into focus without losing the programme it belongs to; the breadcrumb holds the path back.

Creation states made the next steps explicit. Prompts such as “Assign to an Activity” and “Add some Routines” guided the setup of a new programme. Contextual controls grouped actions such as setting a cover image, duplicating and deleting.

Implementation

Developing the interface

I developed designs for programme browsing, routine details and new-programme creation, including selection and hover states. I also explored variations in cover imagery and action placement to balance functionality with a spacious layout.

A variant of the programme detail without a cover image, with the contextual action controls placed in a row at the top of the panel. — One of the explorations of where the programme’s controls sit, keeping them reachable without crowding the layout.

Working towards a first version

Working closely with the founder, I contributed the interaction design and visual language that helped bring the concept into a functioning v1.

Outcome

A working expression of the concept

The work helped bring the founder’s concept into a functioning first version. I established a coherent visual language and a consistent way to move between goals, programmes and routines, giving the product a concrete foundation for further development.