Project Overview

Connexall is a company and software that controls and manages notifications from different types of hardware, like health monitors in hospitals. Because of that, it's no surprise that it is mostly used by hospitals in Canada and the United States and overall it helps nurses, doctors and management personnel to manage critical alerts and notifications.

I was hired by Connexall in order to work on a new idea and project that would be mostly focused on a social area instead of the healthcare industry. The goal was to build a social network that would allow its users to share news, ideas, photos and more while using everyday apps in the same environment.

Role
Product Designer

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


Team of 2 designers and 3 developers


Feb 2015 - Jul 2017

Challenge

Connexall is already a brand with strong roots in the healthcare industry, building a new platform that would have a bigger focus on social components and everyday applications was a great challenge, more, having in mind the tight deadline and multiple apps, each one with different user targets and personas.

The Process

Starting the project as the ONLY Product Designer for more than half a year, I was responsible for outlining the following design process.

Development cycle
1 - Product Discovery
Brainstorming

The first thing I needed to do when I joined Connexall in 2015 was to understand the idea and what was intended by the project owner, so we had regular Skype meetings with the project owner that was based on Canada.  

From the brainstorming we came up with the idea of having a global top menu with basic navigation. On the right side a profile area plus an area that would suggest apps depending on the user interaction with the platform. On the left side a list of apps. The central area would depend on content, but on the landing/dashboard page we would have a special app notification feed on top while having other news/post feed down below.

Sketches done during the brainstorm sessions

It took awhile for the basic idea to take shape. After many hours of brainstorming with the development team and the project owner, we were able to build up a requirements list and product architecture for the platform.

Product architecture sketches

The platform would be divided in 2 sections. The base social platform and other applications. They would all share the same backend and keep a similar product structure regardless of the app content or user target.

2 - User Research
SWOT Analysis

Due to the limited amount of time and budget, it was decided by the product owner and manager not to spend too much time on user research. Still, due to the fact that I had a MBA, I was able to convince the management team to at least perform a market research with a SWOT analysis to understand the competition and possible stress points by looking at online resources available to everyone.

Basic SWOT analysis for the platform

If we had enough time and budget I would have done a user target survey to learn more about our users and what we could have improved on the overall user experience.

3 - Sketching & Prototyping
Building the idea

With the platform requirements in mind, I've started to come up with a few ideas drawn on paper. Then I presented some of the best ideas, in my opinion, to the development and management team using a whiteboard and together we found a direction that the management team believed that could work.

Paper sketch for the basic UI

In short, a user would be able to build his own apps without having to worry about coding since he could activate a pre-made app and just customize it to his own settings. He could also join other apps activated and customized by his friends, if allowed, while using the social network to share his thoughts and chat with his friends.

To explore various visualization ideas, I had to use wireframes on Photoshop and Ninjamock to outline the basic composition of the user interface. This way it was easier to modify and simplify the interface structure to better fill the potential user demands.

Wireframe from the dashboard

But wireframes are limited when you want users to test your work because some can't invision how the interface works just with wireframes and sketches. For that reason and also to showcase how the platform would look to the project owner and potential investors, I've built an HTML/CSS prototype using mockups refined on Photoshop. This would allow me and the team to study and understand what would be required to change, improve and simplify.

HMTL Prototype
4 - User Testing
Validation and testing undone

Unfortunately, I couldn't convince the project owner and management team to allocate some important time to perform user testing, using the prototypes developed above, with a group of people that would have a similar profile to the target users. Time, budget and secrecy were the main reasons for that.

If we had used the HTML/CSS prototype, it would have given us better insight to what our target users were really looking for and the process for user testing was simple. We would have shown a group users the prototype and asked them to complete a few tasks that we believed were key functionalities, like activating an app, joining a friends app, chatting with your friend, posting something like a picture or just your thoughts, etc.

The importance of this step shouldn't have been underestimated and if we had performed it, it would have given us insight on main stress points and lacks regarding user experience. But more importantly it would have validated the idea with a group of users that had the same profile of our target users.

5 - Production and Development
From sketches and wireframes into high-fidelity

It was on this stage that a new designer joined the team and together we mockup up the product from the sketches and wireframes into high-fidelity mockups and prototypes.

As the main theme colors we choose the dark blue "Catalina Blue" used on the branding logo and to contrast with it a lighter "Havelock Blue" with a Green "Mantis" for very specific interactions like buttons.

Color palette

Regarding typography we choose "Lato" family as the main font, using a combination of regular for normal text and bold for titles and highlights.

Lato Regular

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

0123456789

Lato Bold

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

0123456789

By the end of the process, we had completed all the mockups and it was now time to work on deliverable assets and template implementation on Phalcon PHP and AngularJS using HTML and SASS.

Paper sketch for the basic UI
6 - Quality Assurance
Importance of quality assurance and quality control

For the development team, quality assurance is a fundamental step that cannot be left behind. This step allows the developers to clean code and increase performance, but for the Product Designer it's also a good stage to perform user testing and get more feedback not only regarding performance but also usability.

On the entire project, user testing and quality assurance were always left behind as not important on the many stages of the project. That decision eventually had a huge impact on the project outcome.

Final Product
Final Mockups
Reflection
What was done right

As a team with tight deadlines, we felt that we were successful in developing and implementing a social network platform that was used as a base environment for other apps.

Also, having in mind that the scope of the project changed multiple times since it started, we were able to incorporate many desired features including activating apps, user chat, social feed, gamifications and others.

What could have be done differently

In the end the project failed due to lack of investment and high expectations for a small team with a very tight budget.

I believe that if we had done proper user testing and quality assurance, many of the latter issues would have been addressed in time and we would have had a more solid project.

twitter linkedin behance

2020 Designed by Nuno Viveiros