Shapes of Life

Roca's personality test

Shapes of Life is a project based on an interactive personality test for Roca, a responsive web focused in a group of questions that define your personality, with the objective of discovering which is your ideal bathroom.

  • AI
  • UI / UX
  • IxD
  • Web Development
  • Interactive Totem
  • Web App

Product design

The test is designed prioritizing mobile devices and centered on user experience. It’s based on 12 A/B questions that generate a personality associated to a specific bathroom, depending on each choice. The questions are focused so the project is agile and fast, using visual elements such as representative images and texts that clearly define each option.

The result is divided in several sections that make part of the campaign. First, the promotional video of each personality. Then, the personality’s description, which defines the result, followed by the bathroom that belongs to it. Finally, we find the list of products of your ideal bathroom that offers the possibility to purchase them. We complete the result with the option to see all other bathrooms and possibilities that the company offers.

Creative Process

We see this project as a constantly growing campaign, in which there’re always new demands and needs from the client. For this, we’ve proposed a flexible design, adaptable to every format, with the vision to be able to implement new improvements.

Web development

This project has two phases. A standard website with client/server technology based in WordPress and modern development tools and also, the development of a Progressive Web App with a totally offline functionality to be installed as an App in mobile devices. For this particular development, we’ve used Gatsby/React.

Agile and efficient

Our WordPress development method uses a Laravel Blade template system, composer dependencies management and sofisticated frontend development tools. With all this, we acomplish an agile and efficient process with a great result in performance and speed.


For the Progressive Web App development, we proposed to our client a change in the development model and bet for modern JAMStack web development techniques. The group of modern tools for web apps (WebApps/SPA), progressive web apps and desktop apps allowed us to take the project to quality levels unreachable with any other tool.

Interactive screens adaptation for fairs

As a part of Roca’s global campaign, the test had to be a key element at brand stands at the fairs they participate around the world. From this need, we generated the test in autonomous systems without the need to connect to the internet so the visitors of the fair could do it at touch screens in situ. This way, the test becomes in a full experience, as the result given shows the customer, not only the ideal bathroom for their personality, but also the module where they can find it so they can go visit it at the stand.

Tell us about your project