Pod Backoffice

Employee backoffice UI for Breathpod's meditation Pod.

Client: Breathepod
Services: Information Architecture, UI Design

In short

Breathepod‘s Pod is a multi-sensory meditation and mindfulness experience designed to bring moments of peace and calm to the workplace, business or home. Users can book an “experience” choosing it between the top categories: meditationbreathing exercisesound and life classes. Content to be managed by the client employees includes: session collections for each top  category and respective subcategories, scene collections (images or videos) for the 4k display inside the Pod, sound/music, modes for the lighting devices and for the ergonomic chair’s pulsation intensity. Each subcategory tends to be very specific, for example sound bath sessions require an image or video to be displayed instead of the regular scenes. The Pod user can also customize any experience choosing any scene, lighting and sound the In-Pod App offers.

A screenshot of all the 155 Sketch artboards, 4 of them are adjustments for tablets:

Specs

Service Structure

UI Theming

Employee/Pod Owner

Login screen example (of course I defined “focus” and “error” states, but I’m being concise for presentation):

Target

Breathepod employees

The backoffice UI is meant to be used by Breathpod employees (but there’s a much simpler version for Pod owners too), so I took into account the different roles and the end users technical level (mid-high).

Navigation

Sidebar sections by role

In the UI I represented the “worst-case”, most complex scenario where a user has access to all the sections, but in practice only the admin can see everything altogether and decide who has access to what from the Users section → Role List.

All the sub-items in the employee sidebar:

Employee UI

Role manager

Employee UI

Analytics Dashboard

With the PM’s mediation I got the required information to define priorities in the Analytics section (including cards order of course). Noteworthy functionality: the chevrons (top-right area) to show data month by month, the nice calendar view, chevrons on the charts to navigate weeks or days and data comparison between bookable and not bookable Pods.

Data details on hover:

Calendar view to choose a custom dates range (first click sets start date, second click sets end date):

Employee UI

Comparing Pod data

Data comparison between bookable and not bookable (usually private) Pods: I decided to hide rather than grey-out unapplicable cards/charts for a cleaner and easy-to-read result. Sticky header example on the right.

Employee UI

Tables and tabs

Click to select/deselect, double click to open, numbered icon near edit button to deselect all:

Pagination detail:

Session collection details tab:

Session collection contents (individual sessions, click to edit):

Session collection frontend appearance, images can be edited or repositioned:

Image repositioning:

Sound class session example with stateful buttons to add/remove audio and video; dropdown mode selectors for lighting and chair:

Employee UI

Scenes

The majority of the backoffice section work with tables and forms, but for the Scenes a grid layout was ideal: the big images make it easier to find the desired scene collection, next to the collection name we have the total number of scenes inside that collection.

Grid layout item selection:

Every kind of collection, including scene collections, has its front-end appearance for the In-Pod App, the Booking App, or both:

The background preview toggle is useful to check if a certain background image for the collection will play well with the scenes previews in the frontend apps:

Employee UI

Scheduling

The scheduling UI (Pods → [pod id]) includes weekdays and specials in which the Pod will stay available/unavailable for booking, independently from the usual schedule: useful for holidays, events and special days in general.

Employee UI

Membership management

A single membership can be linked to multiple Pods and can host a limited number of subscribers (customers booking the Pods). The UI goes straight from top to bottom, with additional panels collapsed by default.

Sketches

A few sketches I used to help myself work out the trickiest parts.