Case study

Configure working hours for complex teams

I designed a working hours configurator for a B2B scheduling software.

Client: ‘Epicurious’ (NDA-friendly name) is a SaaS appointment-booking software for professionals.

Role & team: Product & visual designer, part of a freelance team alongside a project manager

Business goal

Over 90% of the professionals on the platform are solo business owners and need a simple schedule configurator with weekly schedules and specific day schedules. But to increase their market share, the platform needed to provide a solution for complex teams as well. A team availability configurator makes the product more valuable to teams, who bring more revenue through a custom subscription.

User impact

The platform positions itself as an all-encompasing scheduling solution. An advanced team configurator increases the users’ trust to scale with the product.

For team managers, the configurator needed to allow easy access to a team’s schedule overview and an intuitive interface for creating and editing the correct team member’s working hours.

Design process

I used the jobs-to-be-done framework to separate the two main jobs of the feature:

  • Configure schedules - set up and edit working hours for solo professionals and team members

  • Visualize schedules - use a calendar interface to overview schedules, overlaps, and conflicts

I defined the feature’s information architecture, following a logical process of tasks. The goal was for the user to get accustomed quickly to the process, and learn when to expect conflict modals.

After researching major products like Google Calendar and Cal.com, I sketched the UI in my notebook and jotted down notes about the interface.

Later, I used the notes to create a comprehensive prompt for Claude AI to get an SVG low-fidelity wireframe of the main functionalities, which I validated with the product owner.

I went though 3 main iterations for this feature, and the final one highlighted the team the best.

Hand-off

I grouped the main flows of the feature in sections and designed the following:

  • empty states

  • style guide for availability calendar cells

  • custom repeat function for working hours

  • weekly and monthly availability views

  • weekly & specific day schedule configurator

  • edit mode, archive mode, & conflicts

  • responsive screens

Results

The team availability configurator drives revenue and increases customer retention through trust.

The intuitive interface boosts the product’s credibility.

With progressive disclosure of complexity, solo professionals can use the configurator without additional clicks. Only teams will access the “team view” with all members.

Next
Next

Overview your financial reports