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.

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.

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.

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.

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.

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.

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.

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

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.

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.