Dabedan
Web redesign to drive a new digital strategy
Background
Dabedan is a brand dedicated to the manufacture and distribution of flame retardant fabrics with 40 years of experience, which is in the process of transformation and renewal. One of the key points is a new digital strategy to improve its online positioning.
Type of project
Professional
Year
2022-2023
My rol
UX/UI Designer
Problem
Team
UX/UI, Creative strategist
The current website is not aligned with the transformation and evolution of the brand. It does'n’t reflect the values towards which the brand has been moving in recent years and does not show all the services and products currently available, thus losing opportunities for positioning and lead generation.
Solution
Work on a new website that will enhance the brand's online presence and position it among its main competitors with a relevant and attractive product for its audience, taking into account the following established points:
Adaptation to the market reality: Create a product that aligns with the current situation of the sector within the digital environment, drawing inspiration from some success stories of the competition.
Reflection of the new identity: Unify the tone with a visually appealing UI and include valuable content that resonates with users and aligns with the brand.
Improved usability: Incorporate functionalities and interactions that enhance the user experience, fostering loyalty and lead acquisition.
Mobile & tablet optimization: Although the primary audience originates from desktop, it is essential to optimize the website for all devices.
Starting point for the new digital strategy: The website redesign will mark the beginning of a new strategy that encompasses SEO, SEM, and social networks.
First steps
Analyzing the sector
We benchmarked the direct competitors in the flame retardant fabrics sector to assess the digital landscape and determine Dabedan's position. This analysis helped us identify key factors that needed consideration.
Analyzing the current website
We analyzed Dabedan's current website to understand how we could improve the product and take into account the do's and don'ts. For example, some of the points for improvement that were identified included a lack of coherent architecture, absence of valuable content about the company, product organization, and automation of the sample request process.
Design process
Functionality and content ideas
The departments involved in the project gathered ideas that could be applied to the project. We considered those that could be implemented in the first phase of the product and those that should be deferred to later phases.
One of the ideas we decided to postpone was the addition of a section showcasing projects carried out with Dabedan materials. We believed that this aspect would enhance the brand's credibility and trust, as well as inspire potential projects or validate the use of their fabrics. Ultimately, the idea was deferred to a second phase because the client required extensive resource preparation to implement this section.
Architecture
The definition of the architecture was a collaborative process with the client, who shared their expertise about their product. Together, we translated this vision into a structure and content that made sense to the user.
As an example, the client suggested dividing the fabrics into two main categories: flame retardant and non-flammable fabrics. This concerned us, as there were only 2 non-flammable fabrics out of a total of 37. We didn't see the need to create a single category for just 2 fabrics of this type. Instead, we proposed dividing the fabrics into several categories based on their most representative characteristics and visually highlighting on each category and fabric page which ones were flame retardant and which ones were not.
Another example was the proposal we made to create a page dedicated to the company's work on sustainability. We considered it an added value that was worth highlighting for its social impact, dedicating a single page to it with examples of how the company works in this area.
Mid-fi wireframes
Once the site's architecture was defined, we started planning the content distribution and interactions on the pages, considering the needs we had identified earlier in both the original design and the ideas slated for the first phase of the product.
In these two example wireframes, different hierarchies were proposed. The first one prioritized the product presentation image over the information, while the second one gave equal prominence to both the image and the information, both appearing before the first scroll. Additionally, the first wireframe included a module showcasing decoration projects made with the displayed fabric, whereas in the second one, more emphasis was placed on discovering fabrics within the same category.
Prototyping and UI design iteration
The visual design was developed and iterated through two-week sprints to assess the project's overall progress with the client and receive specific feedback for design validation.
New functionalities
One of the most relevant functionalities included in the new design was the sample request form. On the original site, the user had to write an email to request the sample and include the fabric and color reference. With the form, the user can request the sample in 5 steps:
Step 1 - Select Category
The user chooses a fabric category. By default, the first option is displayed.
Step 2 - Select a Fabric
Fabrics belonging to the selected category are displayed.
Step 3 - Select a Color
Available colors for that fabric are automatically shown.
Step 4 - Add Sample
By clicking the "Añadir muestra" button, the sample is added to the form, even if it is closed.
Step 5 - Fill out the Form and Confirm
By completing the form and clicking "Solicitar muestra", the user submits the request and receives an email with the data.
Responsive design
The project requirements stated to start working on the desktop version first and then adapt it to tablet and mobile. This was done in parallel across phases.
UI Kit and design components
As the project was concluding, we started documenting the UI Kit and design components in all their adaptations and variants. This documentation was created to help the development team understand the structure of the modules and their functionalities. It also served the purpose of making the project accessible to anyone taking it over.
Implementation
Handoff and implementation review
The development team began working on the project while the design was validated by the client. Both departments continued working in parallel; in the design team, we focused on refining the last details while simultaneously validating the implementation. The entire review process was documented in Figma.
Conclusions
As of today, it's not possible to extract concrete data on the impact of the project on the client's business since the product has been implemented but is pending publication.
On a personal note, I consider this project to be one of the most significant challenges I've faced as a UX/UI designer to date. My role as UX/UI designer made me responsible for the various phases of the project, including decision-making and communication with the client.
This experience made me evaluate the necessity of using the appropriate approach tailored to the project, taking into account its unique characteristics and constraints, in order to determine the best design process for the product.