Project Overview

HDES (Hospital do Divino Espírito Santo) is a local hospital and customer of Connexall. In my last two months of contract with Connexall I was requested to design a new product for the hospital.

They were in need of an internal message system where administrators could send notifications and messages for all personal (including doctors, nurses and staff) on mobile devices, beepers and email.

Role
Product Designer

Wireframing, interface design, prototyping, typesetting, iconography and front-end development.


Team of 1 designer and 1 developer


May 2017 - Jul 2017

Challenge

Being at the end of my contract and knowing that I wouldn't renew it, I knew that I only had a limit timeframe of two months to build a product that was complex and would be used on critical services. I would need to be at my top game if this project was to succeed.

Also there was a small requirement list, but it was incomplete. Key functionalities were missing and with low level of details, so, it was important to understand and get as much information as possible from the client side.

Process

Following a similar process for the development cycle I've used before at Connexall, first I needed to know more about the project and key functionalities so that I could define the problem and jump into the creation process. From wireframes up to implementing it on a Yii2 framework, in a short period of time, we were able to build the first version of the application.

Development cycle
1 - Product Discovery
Understanding the project

Without that much time to research the project and learn more about it's users, it was important to listen and exchange emails with the client, since it was going to be used by him and his employees.

For that reason I took some notes and built a diagram regarding the main action that the client needed.

Diagram Project

The message system would be divided into two areas. The admin panel where an admin would write a message, select a channel to spread the message and publish it. And the client app, where the recipient would receive the message.

Due to time constraints, I was only going to work on the admin panel, having in mind that was the most complex and harder to design.

2 - User Research
Talking with users

As much as I wanted to do a complete user research, time was a limiting factor and for that reason all I could do was have informal talks with friends that work on the health care business and had similar profiles to the target user and ask them what was the best method for them to receive important notifications during work time.

Results showed that mobile app push notifications would be a valid option, right next to having a mobile app and receiving a text message.

3 - Wireframes
Simple and straight

Looking for a good structure that would be easy for an admin without strong IT knowledge was my main focus on this project. For that reason it was important to design a very straight forward interaction and experience for the user, for that reason I've decided to allocate some of my time to research new techniques and design trends.

Login and onboarding wireframes Login and onboarding wireframes

Multiple wireframes were designed and sent to the client in order to fix, simplify and improve the overall experience.

4 - High-Fidelity Mockups
Brand elements

I quickly mocked up the product from wireframes all the way into high-fidelity mockups in a few days. I've used brand colors when building the very first high-fidelity mockups, adding Arapawa green color on a few elements like logo area and links, the Putty gold color for secondary elements and hover effects and the Nero gray color for header background and titles.

Color and font

Regarding typography I've kept the original Yanone font used on the logo for titles and Lato family for regular text and subtitles.

5 - Client Testing
Good feedback

Since time was limited, and we couldn't perform user testing, I sent some screens to the client while I was building the High-Fidelity HTML Prototype.

Screenshots

After having the HTML prototype ready, I went to see the client, since it was a local hospital, in order to showcase the prototype and how the interface would work.

The feedback from the client and its users was extremely positive with very few areas to change.

6 - HTML Prototype & Deliver
Breaking down Yii2

Even though I was on my last few days of contract, I was still able to implement the HTML prototype on a Yii2 framework using bootstrap framework for a simple responsive layout.

Login Screen
Onboarding
User Profile
Notifications Screen
Create new notification

The yii2 framework was quite a challenge, since it auto generates chunks of html code that makes it harder to add customized classes to html elements. 

yii2 framework example

Still I was able to apply the style defined on the high-fidelity mockups and we delivered the very first version of the message system panel to be used and tested by the hospital using as channels email, voice and text notifications due to the fact that they were already implemented with the Connexall software and it was easy and without the need of having special design steps.

Final Product
Final Mockups
Reflection

This project had everything to go wrong. It didn't have a project manager, it had a really short time frame and the team allocated to the project was leaving the company in less than two months. In fact the initial software developer left the company only after a few weeks of getting this project started. He was replaced with another developer that was able to continue his work.

What was done right

To be honest, I believe that only a strong will and great team work allowed this project to be successful and even though we were only two / three working on this project, the fact is that communication was key and each of us had a very specific role and timeline.

What could have be done differently

Due to the time limit, I didn't have the chance to test and iterate like I needed or wanted. I would have loved if I could have kept refining the product and conducting usability tests.

twitter linkedin behance

2020 Designed by Nuno Viveiros