Overview
SleepCharge is a patient-facing application that provides services such as checkups, evaluations, virtual consultations, and care for those struggling with insomnia. The app includes a video section that guides users through behavioral therapy to address insomnia.
The app, including the video player, was initially designed two years ago. Since that time, there have been multiple new additions to the application and changes to the UI. However, the video player’s design did not evolve with the UI.
Our goal was to redesign of the video player’s UI, and while doing so add some additional new features.
My Role
UX research
UX design
UI design
Team
1 UX Designer
2 Developers
1 Product Owner
Tools
Miro
Figma
Research & Discovery
The most challenging part of this work was figuring out how to obtain user feedback without direct access to users. Due to patient privacy laws, we did not have a way to interact with the patients who used this app. Therefore, we had to identify other sources of feedback. We started by examining reviews of the app on both the Google Play and Apple App stores. We obtained user feedback documentation collected by our support team. Finally, we spoke with our Care Team, the members of whom were able to provide further insight into how patients used the application and their frustrations related to accessing the content in the video player.
During this phase, we also gathered requirements from the product management team. This team identified new features that had to be added to the video player’s UI, including the ability for users to bookmark video moments and add notes to videos.
Findings
Using the information gathered from the various sources, we identified the following themes and pain points:
Users (patients) primarily rely on the mobile application to interact with the Care Team and access programs and resources. The web application was rarely used.
Pain Points Identified
On the mobile app, the UI of the video interface only allowed the video player to be viewed in portrait mode.
Interactions with the video interface on both mobile and web were limited. Users could not go back to review missed seconds, and there was no closed captioning option (important for users who are hearing impaired or did not have the option to listen to audio).
Design Phase
I kicked off the design effort using a brainstorming method called “The very bad idea”(https://hatrabbits.com/en/bad-idea-brainstorm/)”. We listed all the very bad ideas we had and then proceeded to identify the opposite of each bad idea. The result was a variety of proposed solutions and features for the video player interface and its interactions.
Using a Miro board, I came up with a range of options containing new requirements, ideas, and solutions for the issues identified during research.
I took these options back to the team. We reviewed and modified them further, ultimately developing an overall design pattern for adding video controls and an interface menu for adding chapter bookmarking and notes.
After establishing the general design pattern, I continued to work on the UI using Figma. Through team reviews of these designs, we realized we could add additional features that were low effort but would significantly improve the usability and accessibility of the app, including closed captioning, full-screen mode, and video transcripts.
Final Interface Design
The final result was a preliminary UI that addresses the pain points identified and also adds some additional features desired by users. This new UI is currently undergoing our quality assurance process and will soon be available to users.
User Feedback
We conducted usability testing to validate our designs before releasing the new UI to our users. Users were excited and genuinely overjoyed to learn that they could now extend their viewing area and navigate between maps in a single click. We continued to work on additional enhancements, but our users' positive feedback following the release of the new UI validated our decisions.