— Research, definition, ideation, prototyping and UI design.
Cantoria is the name of the town where Cosentino has its main headquarters in Spain. The place where it all started to get serious. This system was the first version created to generate a common, scalable and consistent language for the main digital products of the company.
The case study explained bellow is the first approach – like an MVP – to make the diferent teams daily work a little easier.
A design system to rule them all
Background.
Cosentino is a leading multinational company in architectural and design surfaces with headquarters in Almería (Spain) and Miami (United States), with more than 5,000 employees distributed all over the world.
We were involved in the digital transformation process and we have to update too many different websites. On one hand we had two separated platforms (one for B2C and another to B2B) and on the other hand we have a site per each brand: Silestone, Dekton and Sensa. The B2B platform had two parts: the public area and the private one, with services and differents features to each kind of professional.
In adition to that the marketing dept started a new redesign for the Cosentino brand and look & feel. The goal was to get all the brands under the Cosentino brand, so it was the perfect time to start a design system.
The challenge.
Despite of being a great company, by the time we built this design system, the digital design team have only 2 UX designers. It was a great challenge to create a Design System for 2 big digital platforms that had to be scalable for more than 16 languages in more than 30 different countries.
The challenge was not only to build the design system, but to make it in six months. Three months to design and the next three months to development, test and improve. After the first months finally we could add an external visual designer to help us go faster.
Have you ever saw a pile of work and didn’t know where to start?
We do, and we believed in our process. First of all we had the two different platforms so we begun analysing the problem and the goals of the project in short and in long terms. We had to be smart because it had to be scalable. An above our heads there was a question: Could we make a system that unifies the platforms? and if we could, can we unified in one unified platform in mid-long term?
Creating the System
1 — Analysing the problem.
The first stage of the project involved the comprehension of the size of the project and why Cosentino needed a design system, the current state of the situation and how far we had to go with its development. To do this, we held a kick-off meeting with the corresponding stakeholders so that they could tell us information about the 2 Cosentino platforms.
B2C Platform
Cosentino.com is a website aimed to consumers, people who want to build or renovate their homes with Cosentino’s brands products. Here, the brands offer information for customer but most of all wants to inspire them to choose the best material for their dream homes. It was built in wordpress but needs a big update to improve perfomance and functionalities.
B2B Platform
Aimed for professionals (fabricators, kitchen stores, architects and designers…). Technical documentation an all the information about materials that professionals may need is offered here with a clear goal: service and attention to professionals by professionals. This website was built in other type of framework that didn’t work that well, so it was time to improve it and change to a better one.
The challenge: Create a design system in 6 months, which would reduce time in design and development and which merges all the company’s digital products, which is scalable and with a common language for all work teams.
2 — Matching audiences and purposes
After the initial meeting, like all digital products, we had to meet the users who were going to use the Design System. In this case there were three types: the B2C and B2B development team, the UX Designers and the Content team. The last one (Content team) was the main group because they were the users, responsible of building the most of the pages.
As Product Designers we created a meeting with the entire development team to analyze their needs and requirements, they were going to be a fundamental part of bringing the system and both platforms to life. From this meeting, we learned that they should both be using WordPress as a CMS with the Visual Composer builder and the Bootstrap 4 framework to make it work easy and fast.
This information was extremely important before put in to work, beacuse everything we created had to work and be adapted to the technical part. On the plus point, we could reuse Bootstrap’s UI Frameworks and redesign them to our style guide.
Then we created a work team through Microsoft Teams with the content team. They are the team that will use the Design System to build on a large scale, optimizing time and resources. We collected all the information about the problems they currently had to work with, what would help them go faster, and other important issues.
3 — Methodology and design of the ‘Cantoria UI Kit’
After knowing all the requirements and knowing how the different users are going to use the product, we began to analyze the best way to make up the project to achieve all the objectives.
To create our Design System from scratch, we based on Brad Frost’s’Atomic Design’ methodology, as it allows us to create a consistent system for designers and developers starting from the smallest parts (atoms) and scaling until all the necessary components are created.
To create our Design System from scratch, we based on Brad Frost’s’Atomic Design’ methodology, as it allows us to create a consistent system for designers and developers starting from the smallest parts (atoms) and scaling until all the necessary components are created.
«Atomic design is atoms, molecules, organisms, templates, and pages concurrently working together to create effective interface design systems»
The first step was to create a UI Kit of our Cantoria Design System. It contains all the elements of our system and its functionality, the pillars that will be put together and from all the components, pages and templates will emerge. To document everything, we use the Invision DSM, which allows us to access and consult the documentation to the entire team in the cloud.
Once all the elements have been defined, we create the web architecture categorizing everything by type or specific actions that users can easily identify when applying it to other components or making any chain modification.
4 — Inventory and components design
Once the base was created, the next step was to put the pieces together to create all the necessary elements. To do this, we made a list of all the components that had been developed in recent years, and we took screenshots on the web to make an inventory and find out which components could be reused, what could be eliminated and which were feasible to redesign.
Then we categorized all of them in a canvas of priority and effort to know which components we had to design first and which were secondary. In this way, we could establish a delivery schedule and adjust team resources.
5 — Testing phase
Once we were creating components, in parallel we subjected them to tests on wireframes created for this task, structures that would potentially be used in the new platforms. We check the consistency of the elements, the responsive behavior, visual coherence and scalability.
Using sketch, we designed complete templates for all devices (desktop, tablet and mobile) in a way that allowed us to fit and move pieces to discover errors to correct them before sending to development.
6 — Development & Design Tokens.
The Design Tokens are the key for the project to be versatile and scalable, since they will allow to modify cascading variables of any element in a safe way.
When each component has been designed and tested, the entire nomenclature of all the elements is reviewed so that the development team can identify them. Once everything has been documented, Invision’s Design System Manager allows us to export the Design Tokens of our entire design system in CSS, Sass, XML, Android or iOS.
Summary & learnings
It is very difficult to built a system that fits any situation, you have to accept that sometimes there is going to be some unexpected gaps. The good thing is that this project is nothing but the first iteration. The company needed it to be ready the sooner we could, and we made as faster as we could.
Other interesting thing was shadowing the users while they were building pages, component after component. We learnt that a design system always needs a designer to assure coherence and consistency and make it fit the easiest way. Plus, the importance of collaboration between departments is capital. The armony between UX, performance and content is key.
— Next steps
- Análisis del uso en las nuevas páginas
- Detección de oportunidades y mejoras
- Ampliación de la librería de componentes
- Unificación de .com y PRO
- Cambio de CMS
- Componentes 100% dinámicos
