It’s summer and it’s an opportunity for our Business & Design Collective series to share with you some introductory articles to the strategic areas of the fields of design and business which are becoming more and more important within companies. This article follows our last topic: “The art of companies to create the best possible experience or how to dissect the design of an experience”.
Definition of UX
User experience is an increasingly used term whose definitions may vary. Here is a fairly generic one, taken usable:
“The term UX (acronym for English: User eXperience), user experience in French, refers to the quality of the experience experienced by the user in any interaction situation. UX qualifies the overall experience felt by the user when using an interface, a digital device or more broadly when interacting with any device or service. UX is therefore to be differentiated from ergonomics and usability.
Following our article Introducing you to the different criteria for measuring an experience, this one aims to introduce you to a popular model for working step-by-step to define a digital user experience.
The Five Elements of UX
The five elements of user experience are taken from the book The elements of user experience written by Jesse James Garrett, one of the founders of Adaptive Path, a San Francisco-based user experience consultancy that eventually joined Capital One bank.
There are five dependent layers, with each level building on the level before it. The model starts with the abstract level to go to the concrete (from bottom to top).
The purpose of the model is to give a process for separating the steps to be worked on in a considered order, in order to provide a structured framework of collaboration for the project team and the managers. This clarifies the activities to be undertaken and the deliverables to be provided at each stage, avoiding mixing too many aspects.
We can therefore align more easily with the various parties involved in the project and ensure that the process is focused on user needs. We also avoid surprises and save time by validating each step.
We find the order of the steps that we will explain:
-
The strategy
-
The specifications (scope)
-
The structure
-
Skeleton
-
And finally the surface
The steps start at the bottom of the diagram and then go up (from the abstract to the concrete):

Diagram of the 5S model.
1- Strategy
The strategy is the most important aspect. It helps to answer the questions: “Why does the product/service exist?” ; “Who are the targets? » ; “What need(s) does it meet? “.
It’s about finding a balance between your goals and those of your users. To do this, the strategy phase allows for internal research with the various project stakeholders, as well as with future users.
These searches can be done with different techniques (such as the first 9 techniques of this article) user research, market analysis and stakeholder research.
2- Scope (specifications)
At this stage, it is necessary to define the functional requirements and those relating to the content that the site or application will meet. These elements will also be aligned with the strategic objectives established previously.
-
Functional requirements: these are the requirements for product features, and how they interact with each other to meet the user’s needs.
-
Content Requirements: this is the information needed by users. These are the texts, photos, videos, images used to meet the expectations of the user.
These requirements are generally proposed in a specification document with the various descriptions and diagrams.

Example of a use case for specific needs
Source
3-Structure
The structure defines how the user will interact with the site/platform/service and how information is integrated. There are two factors here: interaction design and information architecture.
-
The interaction design: taking into account the functional requirements defined upstream, the interaction design will define how the user will interact with the product/service and vice versa.

Example of a user journey with the sequence of screens.
Source
The goals of interaction design: help people achieve their goals; effectively communicate interactivity and functionality; informs users of status changes while they are interacting (eg file has been saved, comment is posted…); prevent user error or errors, such as the system asking the user to confirm a potentially harmful action (i.e. deletion)*.
*see UX — A Quick Look at the 5 Elements of User Experience (Part 2)
-
Information architecture: thisThe latter will take into account the requirements relating to the content, and will then arrange the various elements so that they are the easiest to understand for the user.

Example of information architecture for a website.
Source
The objectives of the information architecture: organize, highlight, prioritize information according to user needs and business objectives; facilitates understanding and movement in the information collected; flexible to accommodate growth and change; suitable for the public.
4- Skeleton (skeleton)
This is the stage of presentation and layout of all the interface elements of the site, platform or application. Here we define how the user interacts with the information, and how the information is presented to make it effective, clear and obvious.
We will use the Models (wireframe models) in order to obtain a visual format. The latter includes content, navigation and modes of interaction.
Three factors that make up the skeleton:
-
Interface design organize interface elements to allow users to interact with system functionality.
-
Navigation design defines how to navigate through information using the interface.
-
information design defines the presentation of information in a way that facilitates understanding.

Example wireframe
Source
The purposes of skeletons are: to define the visual form of all things on the screen; how the interactions will be presented and organized; user journey definition
5- Area
It’s the sum total of all the work and decisions we’ve made.
This step determines what the project interface will call for and prefer the right layout, typography, colors, etc. In the surface phase, we work on the visual design (webdesign, UI, graphics): it is a question of deciding the visual appearance of the content, the controls, what the users can do and how they interact with the interface.
The design should make the interface easier to understand and increase the cognitive ability to absorb what users see on the screen.
An architectural process
This approach is ultimately inspired in part by the world of architecture, which has existed for much longer, where a project goes through different stages (objectives/targets/needs/situation, specifications/study, plans, intermediate models, final models, etc. ).
Starting from the targets and objectives, each step will feed the next one to finally arrive at the models of all the interface screens of the site, platform or application project in question.
We approach the different elements in a constructive order: each layer depends on each other. When you make a bad decision at the beginning, at the level of the strategy for example, this has repercussions on the rest of the project which will follow the direction.

Diagram of the 5S model.
Again, this process allows you to focus on each layer of the project in a relevant order in order to be able to work in a defined way and validate each step feeding the next one. This creates better alignment between the parties involved.
This avoids having discussions that are shared in all directions by mixing questions of structure, graphics, functionalities, etc.
This model is a theoretical framework for organizing a user experience project. The content and activities in each phase may vary depending on the situation and the resources available to carry out the project. There may also be a bit of overlap between certain phases.
The main thing to remember is that there are different intermediate stages in order to validate and move forward in a step-by-step project before getting all the models and the prototype of a digital project. UN article existing presents a panorama of tools and methods in the toolbox of specialists in user experience.

Business & Design Collective, with from left to right: Peter Horvath, Daniel Boos and Dany Cerone.
You found an error ?Please let us know.
– User experience: an increasingly sought-after skill
In the digital age, it is essential to be able to count on a suitable model to work effectively on the user experience, which is becoming an ever more competitive advantage. Presentation.
Business&Design Collective