A tailored web shop redesign for Bel&Bo

User Experience

User Interface Design

The client

Bel&Bo, a warm family business, has been an established fashion brand in the Belgian clothing industry for about 30 years. They create fashion with passion, have a heart for people and aren’t shy of using a pop of color in their collections. Their webshop, however, did not yet reflect these values towards their customers.

The goal

The core values (passion, people and pop of color, as mentioned earlier) were already defined. Right up our alley! Yet, redesigning an e-commerce website often goes hand in hand with optimizing conversion. The main goal of for Bel&Bo’s web shop: create a great user experience, that results in more customers shopping online and eventually an increase of total revenue.

What we did

Mapped customer journeys based on user research and data

Redesigned the user experience for the most essential e-commerce features

Translated the new branding into fresh user interfaces

Our approach

Mapping client needs and customer behavior

We started by diving into the web shop’s analytics. This helped us understand the most important pages and the current behavior of Bel&Bo’s customers on the site. Complementary, we organized two insightful workshops with key stakeholders from Bel&Bo. Together, we set clear project goals, uncovered their main values to apply with the redesign and mapped out ideal customer journeys for different personas.

Wireframing to support quick iterations

Based on the valuable insights we gathered during the first phase, our UX designer was ready to start drawing the flow and screens. First up, decluttering the mega menu and unstructured navigation of the web shop. Supported by a full information architecture exercise, a whole new way of navigating was designed.

We continued by designing the most essential screens and features, based on user data. Think product listing pages, with easy filtering functionalities and creative ways to implement ad banners. The product detail pages received a whole facelift as well. A new look and feel, including the right product information in the relevant sections on the page. Finally, the shopping basket and checkout flow were designed to make sure buying a new outfit was as easy and intuitive as possible.

Wireframing to support quick iterations

Mobile-first design of wireframes, based on user data

Turning new branding into user interfaces

Next to its website design, Bel&Bo created a bold and colorful new branding. One our UI designer happily translated into digital styling and guidelines. It turned our wireframes into pixel-perfect designed flows, that reflected Bel&Bo’s new branding and core values.

Rapid feedback loop between design and development

While creating wireframes and final designs, we made sure to have a short communication loop with the development team at PHPro. The web shop got built on Magento 2, with Hyvä front-end, which meant our UI design needed to be based on Hyvä as well. We discussed components and their behavior early on in the design process, to avoid unpleasant surprises when moving to the development phase. The result of the collaboration is a beautiful looking web shop, with development perfectly matching the final designs and foreseen customer behavior of components and features.