Case Studies: Whistle App – User Interface

App mobile interface for Android. Whistle app is a project that helps nurses and staff at an hospital in Australia to coordinate to each other in an efficient way about all the patients, shifts, emergency calls, and more.

I worked closely with the Creative Director of the agency doing a consistent design system and the whole user interface for this app. In an initial stage of the project the client had an user journey map in mind and some low fidelity wireframes. I also took the approved branding that was made in an early stage by the team to begin with the design system.

My high level goals were:

  • Make an interface easy to use for everyone following Material Design standards.

  • Take the user journey map as a starting point and iterate along the process to refine it.

  • Get a consistent look and feel using the brand / logo on the project across all the screens.

Technological skills used

Sketch

Adobe Illustrator

Invision

Zeplin

User Interface Final Screens

Consistent Design System

I started my work by setting up the main elements of the brand from Illustrator in a consistent and flexible design system in Sketch. From the beginning, I created a Sketch library including all the design system and in a different file the user interface of the app. This way, any change made in the library it would affect automatically any other file linked to it.

It is important that from the beginning of the process to be organised with all the names of the art boards in Sketch. This way, everything will be easier when exporting all assets to Zeplin.

Design System in Sketch

Early Feedback

The agency worked closely with the client on the wireframes and the user journey for the app getting some user feedback in the process. I used this wireframes all the time as a guide for the user interface design process. On the way, we got more feedback and we refined the user journey and the storymap overall of the app.

Micro interactions

Secondary Menú

Help section

Simple call

Wireframes provided by the client

Final screens before handoff in Zeplin

* This project is on the development stage at the moment.

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google