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: meditation, breathing exercise, sound 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.
