With Forma you can design, customize and adapt a product (in this case furniture) to the user's needs, space or use, via parametric design. Then you can download the blueprint and get a woodworker to do it for you or go to Fab Lab and build it yourself. This project aims to democratise design and technology in order to solve common problems and contribute to greater resiliency of citizens. Forma is an award-winning project of the "La Ciutat Proactiva 2021" call, organized by the BIT Habitat Foundation to find solutions to the challenges of urban inclusion and sustainability.

Design a visual configurator to complete step-by-step product configuration.

Because of the complexity of the service, the interface needs to be as simple as possible and take ease of use very seriously. As the catalogue of products that will be on the platform will grow, a design that can be reproduced and that works for all different types of furniture is necessary. Additionally, the project must fit the timeline established by the collaborators, so it must be a system that can be programmed without too many complications.

The platform aims to be used by all kinds of users and institutions such as kids, libraries, adults, social centers, workshops, manufacturers...Consequently, the interface has to be intuitive and clear. Whether it's for an audience that understands furniture construction or for anyone who doesn't participate in the process.

First of all, we spoke with Barcelona city council entities to learn more about how our company's services benefited them. Then we investigate the needs of potential users. Co-creation workshops are held with both users and interested institutions to discover what kind of furniture could be offered by the service and what needs should be solved. Once we are clearly aware of the problems that users have with the non-configurable furniture we begin to create parameters for solving these problems.

In the next stage of the project, we define what furniture we will use as a test to launch the project. After the research we consider that the best option to start with is a table. The team of industrial designers is in charge of designing and creating the furniture, the fittings and the prototypes. Everything is built from a single material: laminated birch plywood. Their manufacturing process uses a single machine (CNC) that reads in a digital description of the piece to be built and cuts a plywood board to the exact dimensions required. Because of the low tolerances involved, furniture can then be assembled without tools, screws, or glue by the end user.

In parallel and after the research, we set the parameters that we want to be configurable and decide how to communicate them visually in an interface. To better understand the benefits and pain points of similar applications, I conducted a competitor analysis of different online configurators. Throughout the analysis, I identified the strengths and weaknesses of our competitors. The best product configurators emphasized presentation, using well-illustrated icons and extremely realistic product images. These visuals were accompanied by educational content, such as descriptions and statistics that aid the user in making decisions. I also noticed that many product configurators are likely to overwhelm their user by displaying too many options at once.

After going over a couple of sketch works, I got started on the wireframe. This phase took me some time as I did more wireframes, got into newer problems so I had to redo the wireframe again a couple of times. Once I had a wireframe that I believe would work, I created a prototype for it and tested it among the team internally.

⚠️ Problem Users may have no knowledge of ergonomics.

✅ Solution Users are informed of the optimal measurements for each use by break points in the configuration slider. This way we prevent users from ending up with designs that are useless and problematic for their needs. The user is guided through steps to configure all parameters. Each step addresses a key aspect of the configuration. These are simple and intuitive to understand. In addition, an informative window on ergonomics is provided, thus helping the user to make informed decisions.



⚠️ Problem Users may not understand what each parameter does.

✅ Solution All customization options are represented by large icons or sliders, which feature clear illustrations or labels. This ensures that the user always understands what they choose before changing the settings. The description of the customization option is displayed beneath the icons. These descriptions educate users about why they might pick one option over another, helping them to make more confident decisions.



⚠️ Problem Users may not understand the relationship between the configuration menu and the 3D model of the product.

✅  Solution Instant Visual Feedback. The product is represented by a 3D-model that is representing the actual configuration. As the parameters are related to some dimension of the design, the design automation solution can then alter this parameter and generate an updated model based on the new dimension. By doing so, the model is immediately updated to reflect the user's selections. This confirms that a selection has been made, and gives the user a realistic representation of their final product.

In response to the challenges outlined above, I created a design where the interface is flexible enough to allow for the adding, removing, or replacing of elements without impact across the site. Changes must be isolated to the element, without causing indirect changes to surrounding elements.

For this reason, the interface is a modular grid in which each parameter is encapsulated in individual modules.This allows one module, or variants of one module, to be changed while still fitting the interface, without changing any other module. The more modular the product is, the easier to configure and replicate.