Availability

CommandDot

My Role
Founding Product Designer
Branding
Team
Zane Shannon, Founder
Zane Shannon,
Founder
Nelson Ho, Engineer
Tools
Figma
Linear
Notion
Timeline
2020–2021
DesCription

A Command Line Interface for sharing plain-text availability and scheduling meetings.

Context

I joined CommandDot as their Founding Product Designer in April of 2020 shortly after the first shelter-in-place. As hire #1, I was immediately tasked with designing a Command Line Interface (CLI) inspired productivity tool focused on making the fastest and friendliest way to share availability.

Click around...
EST
PST
12 PM, 2 PM
9 AM, 11 AM
EST
PST
1 PM, 2 PM, 4 PM
10 AM, 11 AM, 1 PM
EST
PST
12 PM, 1 PM, 2 PM
9 AM, 10 AM, 11 AM
EST
PST
12 PM, 2 PM
9 AM, 11 AM
EST
PST
1 PM, 2 PM, 4 PM
10 AM, 11 AM, 1 PM
EST
PST
12 PM, 1 PM, 2 PM
9 AM, 10 AM, 11 AM
And HEre
Availability Calendar
Monday, Nov 21st
Sun
20
Mon
21
Tue
22
Wed
23
Thu
24
Fri
25
Sat
26
9 AM
10 AM
1
hour
9 AM
11 AM
Onboarding Call
10:00am – 11:00am
you@work.com
1
hour
9 AM
12 pM
Dr Appt
11:00am – 12:00pm
you@work.com
1
hour
9 AM
1 PM
Lunch
12:00pm – 1:00pm
you@gmail.com
1
hour
Days Of The Week
Sun
Mon
Tue
Wed
Thu
Fri
Sat
S
M
T
W
T
F
S
Duration
15 minutes
25 minutes
30 minutes
45 minutes
55 minutes
60 minutes
90 minutes
3 hours
15
mins
25
mins
30
mins
45
mins
55
mins
60
mins
90
mins
3
HRS
Availability Preview
Here are some times I’m available
this week (all PST):
  • Mon (Nov 21): 9 AM, 11 AM
  • Tue (Nov 22): 10 AM, 11 AM, 1 PM
  • Wed (Nov 23): 9 AM, 10 AM, 11 AM
or you can book some time here 🔗
Copied to clipboard
1
hour
1
hour
1
hour
1
hour

Challenge

How might we create a way for people to share availability in plain-text format?

I was provided the following needs and constraints:

  • a way for users to generate plain-text availability from a set of rules
  • must be accessible from anywhere on their computer at any time
  • interface must be able to scale past availability and support unrelated commands/actions

Constraints

Working as the only designer at an early-stage startup while moving to a new city during the middle of a pandemic brought its own set of personal and professional challenges. I’d be remiss to not mention that here first and foremost.

During my 2.5 years at CommandDot, I was all things design. This included design across the entire product, research, ui/ux, branding, marketing, website design & development (thanks Webflow), onboarding, dashboards, emails + an overwhelming amount of other shelved ideas that still live scattered throughout my Figma files today.

Soon after I joined the team, COVID quickly changed the way people booked and held meetings. Everything was now a Zoom call. People were no longer meeting in person, and it was becoming obvious that this would be the case for the foreseeable future.

This caused us to evolve the product to also support personalized booking links with Zoom support after initially focusing exclusively on plain-text availability that encouraged in-person meetings to foster relationships. For me, this meant focusing design across two separate products simultaneously throughout my time at the company.

Research

Interviews

After our team conducted a series of interviews, we were able to understand scheduler’s motivations and the blockers/pain points that exist during the scheduling and booking experience.

Key user stories

As a scheduler, I want to share my availability without tabbing back-and-forth to my calendar.

As a scheduler, I want to share my availability without manually typing it out.

As a scheduler, I want a way to customize my availability based on my schedule and the person I'm meeting with.

Iterations

Command Line Interface to generate Plain-Text Availability

CommandDot was conceptualized as a Command Line Interface that can do a variety of tasks and actions from anywhere on your computer—with the plan to quickly expand beyond availability-focused commands.

With this being the case, I first designed a modern availability-focused CLI with room to grow beyond scheduling. This first iteration featured a floating right-hand previewer of the availability that was generated after selecting a preset template and would act as a confirmation step before inserting the text into an email draft.

Early Feedback

Feedback from early users indicated that they felt confused by the CLI interface and were unsure of what to type to access and edit their availability. If we wanted to bring a CLI into the modern computing paradigm, we would need to expand on the antiqued state of CLIs to be more welcoming and mouse-friendly.

This led me to rethink what the layout of a CLI should be and expand the interface to include a UI set of clickable controls.

Key Features

EST
PST
12 PM, 2 PM
9 AM, 11 AM
EST
PST
1 PM, 2 PM, 4 PM
10 AM, 11 AM, 1 PM
EST
PST
12 PM, 1 PM, 2 PM
9 AM, 10 AM, 11 AM
EST
PST
12 PM, 2 PM
9 AM, 11 AM
EST
PST
1 PM, 2 PM, 4 PM
10 AM, 11 AM, 1 PM
EST
PST
12 PM, 1 PM, 2 PM
9 AM, 10 AM, 11 AM
An operating system for scheduling

With a CLI-inspired tool, we are able to deliver a searchable scheduling experience that could be accessed from anywhere the computer. An OS for a scheduler's most important workflow.

Hitting ⌘+. brings up the interface from anywhere on the computer and allows you to select a template with some pre-set basic scheduling rules, edit as needed, and insert into an email draft addressed to the person you are sharing availability with.

Availability Calendar
Monday, Nov 21st
Sun
20
Mon
21
Tue
22
Wed
23
Thu
24
Fri
25
Sat
26
9 AM
10 AM
1
hour
9 AM
11 AM
Onboarding Call
10:00am – 11:00am
you@work.com
1
hour
9 AM
12 pM
Dr Appt
11:00am – 12:00pm
you@work.com
1
hour
9 AM
1 PM
Lunch
12:00pm – 1:00pm
you@gmail.com
1
hour
Days Of The Week
Sun
Mon
Tue
Wed
Thu
Fri
Sat
S
M
T
W
T
F
S
Duration
15 minutes
25 minutes
30 minutes
45 minutes
55 minutes
60 minutes
90 minutes
3 hours
15
mins
25
mins
30
mins
45
mins
55
mins
60
mins
90
mins
3
HRS
Expandable tiles for easy edits and discoverability

To ensure feature discoverability and allow easy editing using the mouse, I designed a modular set of clickable UI tiles that lived alongside our CLI. The result was being able to make quick edits with the keyboard AND mouse, without leaving one or the other behind.

After receiving early feedback from beta testers who were becoming frustrated with the CLI interface by not knowing what to type to retrieve, edit, and send their availability, I pivoted my design approach to become more mouse-friendly—while still maintaining the speed and efficiency of using the CLI.

Learn with your mouse, master with keys.

The basic philosophy behind this idea: Users feel more comfortable exploring with their mouse and need visual UI hints to know what to do to achieve their goals. Learn and discover with your mouse. Then, master and become more efficient using your keys. With a new set of expandable tiles, users were able to understand what's possible from a high-level view and make edits with their mouse without feeling paralyzed with wondering what to type in the CLI search box.

The expandable tiles also opened up entirely new touch-points across the user's computer and forced us to rethink what a CLI is, and what it should be. With a way to display custom UI tiles based on the app or website a user is currently focused on, we could turn any workflow into a full-fledged operating system due to the modular-nature of the expandable tile UI.

Final Deliverable

After many rounds of iterations and reviews, our team created a CLI-inspired interface, with a modular set of expandable tiles for sharing availability and scheduling meetings from anywhere on the computer.

On the left ← Use Search to find templates and edit availability with your keyboard.

In the center ↑ Use the controls for a visual interface for editing your availability.

On the right → See the context of the message, copy to clipboard, or create a reply.

This version of the product better served scheduler's needs and motivations by providing an easy way to share and edit their availability with a fine level of control over from anywhere on their computer that was both keyboard and mouse-friendly.

Takeaway & Reflection

Before joining CommandDot, I had a very shallow understanding of the history of computing. Everything I knew of computers came from exploring them on my own as a kid during the 90’s. So, when I was tasked with designing a modern Command Line Interface, it prompted me to learn about the history of computing and the origin of a CLI. The lessons I learned I now take with me to everything I work on.

A final note: Learn from the past. Embrace it. Take what worked. Leave behind what didn’t. But, learn the why behind both.