Structuring and designing

Schematizing concepts

Shaping your vision is a key step in creating a new product. What will the interfaces look like? How will the interactions take place? This is the point where we design visual representations (wireframes and mock-ups) and solution prototypes.

01

Wireframes

When are they used?

Mainly at the beginning of the design process, during the needs exploration.

Objective

Design wireframes of the project at several possible levels of fidelity.

Creating wireframes allows us to visualize the interfaces and imagine the user experience.

What does it involve?

Wireframes are a great way to give form to certain concepts or steps of the service. They’re part of an iterative approach (optimizing wireframes following feedback from actual users).

A valuable communication tool

Wireframes will help you not only come together around a common vision of certain services, but also present your ideas to external stakeholders. They are particularly useful during interviews with participants to help them project into the future or do some ideation.

Our method

Wireframes are used to create a visual representation of new user experience interfaces.

This visual design of the structure and hierarchy of content of the pages of a website, app or system is achieved through wireframing software. Wireframes can be created at a higher or lower level of fidelity, with some finishing and details.

The wireframes are built based on the research data previously collected. They can also be based on data obtained by the client.

02

Prototyping

When is it used?

Mainly at the beginning of the design process, during the needs exploration.

Objective

Test the value and usability of the product before developing it.

Test and improve the experience before finalizing it.

What does it involve?

Prototyping takes wireframes to the next level. We animate them to get a realistic idea of the interactions and features of a product or digital experience.

Prototyping also allows users to test a version closer to the final product before programming begins.

03

Functional specifications

When are they used?

At the end of the design phase, before programming.

Objective

Provide information to the developers to guide and inform them in their programming.

Functional specifications minimize ambiguities between designers and developers.

What does it involve?

Functional specifications can include several components:

Clear and specific annotations

Models are annotated to give precise instructions to specialists who will apply them and program the screens later.

Technical specifications document

To make it easier for the selected partner to program the solution, a document specifying the various technical aspects of the solution is produced. The UX technical specifications can take different forms: documentation of interactions, diagrams, or types of content produced for the design of a system.

Class diagram

This tool provides a solid foundation for a functional, sustainable and efficient structure. Much like a skeleton, the class diagram is the internal, fixed structure of a representation of information. The relationships between the different elements are also highlighted in this exercise.

Ready to get started?

Request a quote

Digital by nature

About us

Subscribe to our electronic communications.