ZUTOBI / CALENDAR REDESIGN / 2025

A clearer schedule.
A connected system.

I redesigned the calendar and led design-system creation for driving-school operations, from clearer lesson cards to a library handed over to the design team.

Role: Senior Product Designer
My responsibility: Calendar design & design-system leadership
Period: Jan–Dec 2025
Result: Design completed; system handed over

Clarify the lesson

Give event details and statuses a consistent hierarchy.

Keep the schedule visible

Let the calendar and creation form share the workspace.

Build a shared system

Unify duplicate components and expand their states and flexibility.

CASE 1 / CALENDAR

01Context

The calendar connects
a driving school’s day.

Lessons, instructors, students, and availability meet in one workspace. My scope covered the calendar, student and group management, and a school website builder.

02Problem

Important details were hidden.

Client requests and stakeholder feedback prompted the redesign. Lesson cards lacked useful visible information, and event creation made it hard to keep the schedule in view.

03Solution

Readable lessons.
A connected workspace.

Make lesson information readable.

I reorganized the calendar shell, filters, and card content to make a dense schedule easier to scan. The source screens use different sample schedules; the comparison shows design choices rather than measured performance.

Calendar hierarchy · before and after

BEFORE / ORIGINAL DESIGN

The schedule was visible.
The details were harder to read.

Narrow cards, clipped labels, and competing visual treatments put pressure on a small amount of space.

Original Zutobi weekly calendar with narrow overlapping lesson cards — **Before · weekly schedule**Original project screen · Frame 38

AFTER / REDESIGN

A clearer hierarchy
for lessons and controls.

The new screen groups instructor, zone, and status filters, with a consistent structure for event information.

Redesigned Zutobi calendar with instructor, zone, and status filters — **Redesign · weekly schedule**Design deliverable · Frame 53

Make event states explicit.

I specified empty, pending, confirmed, completed, canceled, and blocked states, including single and group lesson variants.

Readable lesson cards and states

Detailed original lesson-card states; select to inspect the complete specification — **Complete event-card specification**Full original board · open and zoom to inspect every state and color family.Open full-resolution image ↗The source in Figma is a flattened raster. Small text retains the limits of that original image.

Share space instead of covering it.

I designed a creation flow where the calendar resizes beside the form and supporting filters fold away. This keeps the schedule available as a reference while creating a lesson.

Creating events without losing the schedule

Zutobi Create menu listing Lesson, Course and Blocked time — **Choose what to schedule**Original design · Lesson, Course, and Blocked time are separate entry points.

Original event-creation form overlays part of the calendar grid — **Before · an overlapping panel**Original screen · Frame 38. The panel covers part of the weekly schedule.

Redesigned Create Lesson panel beside a resized calendar without the mini calendar and filters — **Redesign · a shared workspace**Design deliverable · Frame 53. The mini calendar and filters fold away, leaving room for the grid and form.

Lead the system beyond a UI kit.

I set direction, delegated component work, and coordinated reviews with a design manager and product designer. We unified duplicate elements, expanded component states, and established tokens, typography, and foundations. The completed design system was handed over to the remaining designers.

Design-system foundations and component states

Phase 1 of the original design-system transition plan: library structure, product colors, tokens, spacing, radii and shadows — **Start with structure and variables**Original transition roadmap · planning artifact; design-system handover was later confirmed.

Original primary-button specification with filled, outlined and ghost variants; default, hover, active, disabled, loading and focus states — **Make interaction states explicit**Detail from the button library · Frame 58.

Original button token documentation for primary, secondary, destructive, shared and text styles — **Connect the component to tokens**Detail from Frame 58 · component naming and token mapping.

04Result

Design completed.
Ready for the next team.

The calendar went through stakeholder and team reviews; the design system was completed and handed over.

I left before the calendar entered development. Its subsequent implementation and release are unknown.

A clearer schedule.A connected system.