Whistle App – User Interface

Project date:

Whistle is a mobile app for Android. Communication solutions specifically designed for Aged Care. Connecting care staff enables positive Resident outcomes. Whistle helps improve efficiency and the lives of their residents.

Whistle connects care staff which helps improve efficiency and has a duress function for staff safety. Whistle also manages nurse calls, enhancing staff responsiveness to help improve the Resident experience. In addition, Whistle provides detailed reporting of all activity around communication, nurse call and duress events.

This app has an intuitive icon-based system that is easy to use, requiring minimal training. Ongoing system training is a burden on management and staff. With an intuitive interface, Whistle vastly reduces training overhead. Whistle is built to run on a smart device for Aged Care, allowing for dual-purposing of the staff’s devices. Whistle addresses many diverse challenges experienced in Aged Care as it runs on smart devices that people are already familiar with.

Ongoing improvements and iterations

This case study includes all the design processes for version 1.0 of the app (currently in use) and some of the ongoing design processes for version 2.0. All the design work was migrated from Sketch to Figma in 2021.

My high level goals were:

  • Create a consistent user interface, easy to use for everyone following Material Design standards.
  • Take the client’s brief as a starting point and make a user journey to iterate along the process to be refined.
  • Make a consistent look and feel across all the app’ screens having the brand / logo of the project included seemly.
  • Include user testing / user feedback in all the iterations of the project.
Final screens mockups / User Interface v1.0
Wireframes provided by the client

Brief of the project and scope

The client is an experienced professional in the healthcare area. Hence, he had a good idea about the problems that the app should help users solve and a preliminary idea of how it should work and some user interactions that had to be translated into specific contexts. The project’s first stage included a brand creation phase, considering the logo, the color palette, and some of the icons (all of this branding work was made by the agency Yonder).

Having all the wireframes provided by the client and a clear scope of the user journey, I work on the refinement of those wireframes and mapping out a more robust user journey to get started with stage one of the UI design.

User pain points

  • Message overload: Current nurse calls systems send every nurse call message to every staff member on shift, whether or not the calls were relevant to them.
  • Unpleasant beeping/noise around the facility: Ineffective systems used in aged care facilities sending messages to all the staff members make a noisy environment which stress the work environment.
  • Colleague contact: Need for workers to contact colleagues or supervisors in big facilities avoiding the use of personal devices.

The main features/challenges for v1.0 of the app were:

  • Staff calls
  • Nurse calls
  • Duress function for staff safety
  • Reporting of all activity around communication, nurse call and duress events (Desktop dashboard)

Design System v1.0

I started my work by importing all the main elements of the brand from Illustrator into Sketch. From the beginning, I created a Sketch library, including all the logos, fonts, colours, icons, buttons, etc and in a different file, the screens of the app. Thereby, all the main components of the app are managed in one place, which keeps the look and feel of the product consistent, organized, and easy to maintain.

Design System v1.0 made in Sketch

Early Feedback

The first iterations of the product to gather user feedback were made at an early stage of the process. First, I set up a prototype in Sketch for some of the micro-interaction of the app as well as the user onboarding and the profile screens. Then, the client conducted some user testing in the healthcare facilities and had this feedback at hand; we could improve and collect valuable insights for some design decisions.

In those early design iterations, we refined the product’s user journey. For example, the team discovered that more screens were needed for some app sections.

Profile screen v1.0
Nurse call screen v1.0
Do no disturb (DND) screen v1.0
Whistle App – Home screen v1.0
Whistle App – Call log screen v1.0
Whistle App – Help screen v1.0

“With the floor staff now using Whistle, we’ve been able to rationalise the number of messages going out to them, so that they receive only the messages they need to receive.”

Leigh Parker, CEO – Heywood Rural Health’s aged care facility.

Whistle App v1.0 Final screens before handoff stage in Zeplin
Whistle App v1.0 screens

Improvements and new iterations of the product – 2021-Present

Sometime after launching the product, the feedback received was very positive. However, valuable user feedback is collected, and there are also new features/ideas for the app that needs to be active. The main design work for this new stage of the product involved a complete migration of the design system from Sketch to Figma. The collaborative features of Figma and easy file sharing options made this migration a good step forward for the project.

Whistle app components – Design system made in Figma

“Whistle certainly makes life easier!”

Claire McGregor – Heywood Rural Health’s aged care facility.

*New updates for this project to come in 2023! stay tuned!

Share this case study:

More case studies