HelloSleep App


Project Summary

HelloSleep was a small project created by our UX team at ResMed as an education app for sleep apnea patients. The app was meant to see if there was a market for newly diagnosed CPAP patients who wanted/needed more in-depth information about CPAP.

The success of the app would be dependent on organic traffic and we would leverage healthcare providers to introduce HelloSleep as a “digital pamphlet” for their patients.

What I contributed

Visual design, animation, video editing and mobile interactions

How we got started

Maria Joliff was the UX designer tasked with masterminding the concept behind HelloSleep and the initial wireframes. She and I worked together on initial guerrilla testing of the concept which lasted around 2 weeks with positive feedback about how it worked.

Initial sketches of HelloSleep
Initial workflow of HelloSleep

Midway through

Once Maria had completed her wireframes, she had to unfortunately refocus on other projects leaving me in charge of final design and delivery.

The great developer huddle

IAs the visual design took shape, there were several instances where I discussed certain interactions and possibilities with the development team. I had to pivot quickly on some of the initial concepts since initial sandbox testing of some of the coded screens, the interactions would have required substantial developer effort that pushed the project estimation another 2 months.

So we agreed and  made changes necessary to keep development moving without affecting the core of the application.

Finding delight

Sleep apnea by its nature is a very serious subject, my idea was to create some delight in approaching the subject matter and I came up with the idea of a mascot named Preppy, who would greet you upon loading the app for the first time.

I talked with the developers about what would be the best way to approach the animation of Preppy without bloating the app since it was supposed to be lightweight. We settled on using Lottie, which was basically a JSON file exported from After Effects and could be coded into the app easily.

Preppy the Owl takes the stage.
Drawing owls for inspiration.

The misstep

Creating the visual design of HelloSleep caused a few more unseen changes to the UI, because we were coming up on our deadline, we had to descope parts of the app and make the visual language evolved the iterations.

In the beginning we set on a slide carousel out of box experience, sequential and easy to understand. Unfortunately we had to change it to a more traditional app menu bar because of dev effort. The changes were not without repercussion, Maria came back to the project and felt her design had major changes she had not approved, I had to assure her of the decisions we had to make due to timelines and dev feedback.

The great copy debacle

Because of the speed at which this app was being developed, we had a bottleneck with copywriters being able to make content available for us. It took effort from me and Maria to become self sufficient project managers in order to be the intermediaries between marketing and development. Getting content was going to push us out another month.

The hat closet

At this point in the development we were receiving steady content and development was working on getting the visual design implemented. Video content was sparse so the Project Manager on the team asked if there was any way for me to repurpose content from our YouTube channels and ResMed website. I hadn’t done video in years so I ended up getting in contact with marketing and also ripping several of our YouTube videos and creating several pieces of content exclusive for the app.

Into the wild

HelloSleep was released with zero marketing behind it, it was intended to have organic leads for a set amount of time on the App Store. The app performed below our expectations but the learnings were plenty. We had basically made this information available but none knew about it. 

What it did for us is take another look at our current sleep apnea therapy tracker myAir, and how we could incorporate the content of HelloSleep it into future releases. 

The bittersweet end

Below is the final design of HelloSleep, there’s so many things I would change looking back on it now. However it allowed us to find out about the current state of knowledge gaps in sleep apnea education and how to apply them in more successful ways in the future.

HelloSleep for Sleep Apnea – Post Diagnosis App
Rafa Rodriguez's avatar

Rafa Rodriguez

I'm a UI/UX & Digital Designer from San Diego! Working as a freelancer on the side.

Leave a comment

More from Portfolio