Salon Beta

A booking and business-management app for independent stylists — and the project where I built Mindbody's first Sketch symbol library. Salon was shelved before release when Mindbody acquired Booker.

Role
Associate Visual Designer
Company
Mindbody
Surface
Mobile + desktop app
Status
Beta · never released

The product

Salon Beta was a mobile and desktop application built for independent contractors in the salon industry. It let stylists book clients, keep services up to date, manage client profiles, and review business analytics — and it hosted a public business profile so a stylist's own customers could view and book services.

The project was never fully developed or released; it was shelved when Mindbody acquired Booker.

Mobile scheduling
Mobile scheduling
Desktop calendar — week view
Desktop calendar — week view

My role

I came onto Salon supporting a senior designer and ended up playing a significantly larger role in the design. I built out the design system, informed UX decisions, made many of the UI decisions, and did a large share of the mobile and desktop design work.

Setup — services
Setup — services

The pattern library

Salon was the genesis of symbol libraries at Mindbody. I started the library in March 2018 and maintained it through the project — a set of responsive UI elements used throughout the file.

It was built with layer styles and overrides so large changes could be made quickly and cascade to every instance, and with responsive elements using Sketch's pinning plus components that carried their own padding.

The symbol library
The symbol library
Responsive elements + overrides
Responsive elements + overrides

Setup

A four-step onboarding that took a stylist from empty account to bookable business: personal details, business details, hours, and services.

1 · User info
1 · User info
2 · Business info
2 · Business info
3 · Hours
3 · Hours
4 · Services
4 · Services
Setup complete
Setup complete

Schedule views

Day, week, and month views of the stylist's calendar.

Day view
Day view
Week view
Week view
Month view
Month view

Adding an appointment

Booking flow for an existing or new client, including booking multiple services and resolving time conflicts.

Adding an appointment
Adding an appointment
Adding an existing client
Adding an existing client
Booking multiple services
Booking multiple services
Time conflicts
Time conflicts
Resolving a conflict
Resolving a conflict

Service management

Creating and editing the services a stylist offers, with pricing and duration.

Service list
Service list
Adding a service
Adding a service
Service detail
Service detail
Editing a service
Editing a service
Service options
Service options

Business profile — edit & preview

The public-facing profile a stylist's own clients would browse and book from, shown in both edit and preview modes, empty and filled.

Edit — empty
Edit — empty
Preview — empty
Preview — empty
Edit — filled
Edit — filled
Edit — filled, scrolled
Edit — filled, scrolled
Preview — filled
Preview — filled

Account settings

Owner management and account administration.

Owner management
Owner management
Adding an owner
Adding an owner
Owner permissions
Owner permissions

Designed with Visual Designer Tyler Ramsey, UX Designers Kat Cordio and Madeline Sheets, and Copywriter Mike Milch.