Beddr Sleep
Design Lead
Beddr Sleep is working to help solve the world’s sleep problem through diagnostic monitoring, sleep coaching and telemedicine consults with sleep experts. We produce the SleepTuner wearable monitor that attaches to your forehead and records clinical-grade data using an optical sensor and accelerometer while you sleep. These metrics are pushed to the mobile app where the user can view them.
My primary responsibilities as design lead are designing the UI/UX of the mobile app, the website and all marketing collateral.
Mobile App
The Beddr mobile app functions as the user interface for the SleepTuner device, which is worn on the forehead during sleep. The app controls the start and stop of a sleep assessment as well as presents all of the diagnostic metrics (sleep duration, stopped breathing events (SBEs), blood oxygen levels, heart rate, sleep position, trends over time and more).
The app needed to be intuitive and user-friendly as it's targeted for a wide age group and demographic. Onboarding needed to involve registering an account, gathering information through a health survey and pairing the device with the phone via Bluetooth. At the end of an assessment in the morning the user would be presented with a series of questions about their sleep the previous night.
Beddr Mobile App and Device
Original Screens
Checking Results
SleepTuner Placement
Created flow diagrams, wireframes, and interactive prototypes to test online with selected users.
Incorporated feedback from a user tests and questionnaire.
After Apple App Store release I iterated on feedback from single-question surveys generated from the service “Delighted.”
Wireframes
Beta Survey
Happy Path Flow
Onboarding Flow
The feedback from Delighted was combined with the feedback from our initial beta customers, which uncovered various pain points.
I conducted a complete redesign of the user experience and visual design to address the pain points as well as better comply with accessibility standards. The new version was released in January 2020.
The Beddr mobile application is continually being improved based on user feedback and new features added at regular intervals.
Beddr Mobile App
Beddr Mobile App
User Flow
Beddr Mobile App
Design System
Beddr Web and App
The initial Beddr brand and the mobile app alpha had been created just prior to my hiring. For the imminent Beta release of the mobile app, I had to extrapolate from the existing designs to flesh out the remaining missing screens. The screens and interactions, having been put together hastily between two designers, lacked consistent rules, constraints and principles. This resulted in disparities in visual treatment and user experience. While symbols in Sketch were being utilized, there was still no common “source of truth” to reference when creating new elements or designing other assets such as our website and marketing materials. Beddr needed a design system that could be the “source of truth” and allow us to maintain consistency, design faster and scale comfortably.
The current palette, while bright and playful was limiting and no longer reflected the direction our product and services were heading. We needed to display information on both light and dark screens as the application was used in day and night settings.
Competetive Survey
Conducted a visual audit of the current mobile app and website, documenting each element and visual treatment to gauge the scope of this effort.
Researched current accessibility guidelines.
Worked with our Head of Marketing to develop a Brand document that could provide a holistic and consistent vision of what the company wanted to convey to the world.
Beddr Design System Palette
I developed a palette that was more nuanced and better served the complexity of the product and range of use cases and constraints.
There are countless design systems available in the market that, through simple modification, act as a fantastic starting point. After researching many of these starting systems, I landed on the Cabana Design System as my starting point. The system includes a massive choice of text styles, layer styles, and nested symbols organized very logically.
I replaced the palette with the new palette I’d developed and added all of the new elements I’d created in my redesign of the mobile app.
I used the new design system to redesign our website to ensure consistency across our product and our web presence.
Design System Form Elements
Design System Buttons
Design System Typography
Physician Portal Application
Our business model includes a future feature that introduces telemedicine consults with sleep professionals who can diagnose sleeping disorders. A web portal was required that could allow a sleep physician to log in, create an account for a new patient and invite that patient to register. The portal would also deliver sleep test results from the user’s mobile app that the physician would view and use to diagnose potential sleep disorders. Full HIPPA compliance was required.
Worked with a group of physicians who specialized in sleep medicine to help define the patient journey.
Created user flow to discover potential pain points.
Created a functional prototype in HTML to demonstrate a physician adding a user, sending an invite and the user receiving an email with a link to login in to complete registration.
User Flow
Patient Jouney
Wireframe
Interactive Prototype
We worked with a Ukranian developement team to expedite the process. I art directed a designer from their team on all iterations including wireframes and visual designs to ensure brand consistency.
Physician Portal Patient Page
Physician Portal Settings
Physician Portal Sign In
Physician Portal Calendar View
Assorted Elements
