Project Overview

HDES(Hospital do Divino EspĂ­rito Santo) is a local hospital and a valued customer of Connexall. In the final two months of my contract with Connexall, I undertook the challenge of designing a new product specifically for this hospital. The requirement was for an internal messaging system empowering administrators to send notifications and messages to all personnel, including doctors, nurses, and staff. These notifications were intended to reach users on various platforms, including mobile devices, beepers, and email.

Role
Product Designer | May 2017 - Jul 2017

In a solo role, I took on the responsibilities of wireframing, interface design, prototyping, typesetting, iconography, and front-end development. This compact team consisted of only one designer (myself) and one developer, acknowledging the urgency and brevity of the project's timeline.


Team of 1 designer and 1 developer

Challenge

Given the imminent end of my contract and the decision not to renew it, the challenge was to deliver a complex product designed for critical services within a constrained two-month timeframe. The project presented a unique set of obstacles, including incomplete requirements and a need for detailed information 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

With time limitations in mind, understanding the project quickly became the maind focus. Through close communication with the client, I gathered insights and outlined a diagram to depict the main actions required. The message system was conceptualized with two key areas: the admin panel for composing and broadcasting messages, and the client app for receiving them. Due to time constraints, my focus was solely on designing the complex admin panel.

Diagram Project
2 - User Research
Talking with users

Acknowledging time constraints, I engaged in informal conversations with healthcare professionals resembling the target user profile. Insights from these talks revealed that mobile app push notifications were a preferred method for receiving critical notifications during work hours.

3 - Wireframes
Simple and straight

Prioritizing simplicity for administrators with limited IT knowledge, I dedicated time to researching new design techniques. Multiple wireframes were created, refined through collaboration with the client to enhance overall user experience.

Login and onboarding wireframes Login and onboarding wireframes
4 - High-Fidelity Mockups
Brand elements

Swiftly transitioning from wireframes, high-fidelity mockups were created, incorporating brand colors and elements. The Arapawa green, Putty gold, and Nero gray colors, along with the Yanone font for titles and Lato family for text, maintained consistency with the hospital's branding. Color and font

5 - Client Testing
Good feedback

Given the time constraints preventing comprehensive user testing, screens were shared with the client during the creation of the HTML prototype. A local visit to the hospital allowed for a detailed showcase of the prototype. The feedback from the client and users was positive, with minimal suggested changes.

Screenshots
6 - HTML Prototype & Deliver
Breaking down Yii2

Despite the imminent contract conclusion, the HTML prototype was implemented on a Yii2 framework using Bootstrap for responsive layout. Challenges arose with Yii2's auto-generated HTML, but the high-fidelity mockup styles were successfully applied. The first version of the message system panel, integrating email, voice, and text notifications, was delivered for testing.

Login Screen
Onboarding
User Profile
Notifications Screen
Create new notification
yii2 framework example
Final Product
Final Mockups
Reflection

This project faced numerous challenges, including the absence of a project manager, a tight timeframe, and the impending departure of the project team. Despite these hurdles, the collaboration between the designer and developer proved crucial. Effective communication and a well-defined role for each team member were key to the project's success.

What was done right

The project's success can be attributed to a strong will and effective teamwork. Despite the small team and tight timeline, clear communication and well-defined roles contributed to overcoming challenges.

What could have be done differently

Due to time constraints, the opportunity for testing and iteration was limited. Given the chance, a more iterative approach with usability tests would have been preferable for refining the product further.

twitter linkedin behance

2020 - Designed by Nuno Viveiros