Flow_edited.jpg

How We Design Stuff

The main steps of our digital design process

 

The Winning Match Plan

Through the following steps, we create detailed usable documentation the UI (aesthetics) designers, programmers, integrators and quality insurance team can work from.


That documentation accelerates and orients the work of every parties around a shared vision.


It also makes planning the next steps a piece of cake.

A few steps that make a solid difference

 
CompetitiveReasearch-01_edited.jpg

1.  Competiton Analysis

Optimizing Our Design Time

We compare similar projects and ideas and confront them to the best practices in order to come out with a strong understanding of the challenges other faced and their potential solutions.

 
whiteboard-sketching-design-planning-7366_edited.jpg

2.  Information Architecture

Making Sure The Structure Is Rock Solid

As the new structure becomes clearer in our mind, we start mapping out what content, sections and screens will be found in the product and how they will relate to each other.

In the case of a redesign, this includes the preliminary step of determining which content of the previous site we will keep.

 
Portfolio-Enhanced-MCA-20190217_edited.jpg

3.  Wireframes

The Architect's Plans Of The Rooms

From the previous work and ideas, we sketch every key pages of the product.


This step allows us to iterate rapidly until the team and stakeholders are aligned with the UX vision, layouts and functionalities. 

Wireframes are also good to build early interactive prototypes.

 
Flow_edited_edited_edited.jpg

4.  Navigation Flow Charts

Making The Invisible Visible

Every pages, screens and steps involved in the product is placed in a chart presenting the entire navigational relations between them.

The flow chart makes it super easy to understand how the screen relates to each other and the sequence through which the user will go.

 
Screen%2520Shot%252002-06-19%2520at%252006_edited_edited.jpg

5.  Functional Requirements

The Implementation Bible

Our functional requirement documents list every screen's interaction information in a way that allows to make sure everything required is implemented. 

The Spreadsheet template acts just like a shared production follow-up software where all coding tasks can be prioritized and tracked.

 
mca_9_1_0_0-screen-flow_edited_edited_ed

Wanna taste?

Let's get in touch!

 
xn-quebec-en-logo525%25402x_edited_edite

Member of Xn Quebec

The Digital Experiences Producers Association