A tailored webshop redesign for Bel&Bo

User Experience

User Interface Design

Several devices showcasing the new falk & ross site

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

Strategic UX/UI support

Customer journey mapping

User research

Information architecture

Wireframing

Digital styling & UI design

Dev support

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. Quickly it became clear we were their ideal UX/UI partner that brought expertise, solutions and strategic value to the table, to help them shape their digital identity.

Wireframing to support quick iterations

Based on the valuable insights we gathered during the first phase, our UX designer was ready to start drawing critical flows and screens. First up, decluttering the mega menu and unstructured navigation of the webshop. 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. The biggest deal was designing the shopping basket and checkout flow to fully support conversion. Because buying a new outfit should be 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. Our job: translate the branding into great-looking digital styling and guidelines. Our UI designer turned the wireframes into pixel-perfect designed flows, that reflected Bel&Bo’s new branding and core values. Passion, people and pop of color were translated into a playful yet professional looking webshop.

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 webshop 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.