Brands For Less + Syte's Visual Search & Product Discovery

UX DESIGN | RESEARCH | PROTOTYPING

Revolutionizing e-commerce with visual AI solution

BFL Group is one of the world’s leading off-price retailers of fashion that is based in the United Arab Emirates and serves over three markets across the Middle East and Europe. Known for its unique “Treasure Hunt” model, Brands for Less ensures that there is always something new to explore, desire, and discover.

ROLE
TOOLS
PRODUCT DESIGNER
FIGMA

Overview

Retailers, marketplaces, and brands are already aware that most consumers jumpstart their product searches on the Internet. People are now taking advantage of the convenience of online shopping, saving time and money by avoiding the hassle of making trips to stores, browsing, and selecting items from the comfort of their homes.

With visual search, users can find products by taking pictures or uploading an image from their smartphones. The customers' desire to discover new brands and products fuels the rise of visual search in online stores.

The Shift from Brick-and-Mortar to Online

Increasing technological advancements have paved the way for the shift from retail to online. The deterioration of brick and mortar stores has been evident for over a decade but experienced a steep drop in the last year alone due to the COVID-19 pandemic. Governments around the world have enacted new measures. Over 100 countries worldwide had instituted either a full or partial lockdown by the end of March 2020, affecting billions of people and businesses. Consequently, this led to a shift towards online shopping, which meant businesses had to put all their efforts into e-commerce and their online presence to remain profitable and cut losses. Hence, companies and brands invest in improving online customer experiences to stay competitive and market their products.

The Challenge: Creating a Seamless Omnichannel Customer Experience

Knowing that flexibility and dependability are important factors to create a seamless omnichannel experience, we sought to deliver the same level of service and personalization online as it does in stores.

In order to provide a better customer experience, meet user expectations, and ensure the website adheres to the company's core values of beauty, functionality, and sustainability, how can we utilize design thinking?

Thus, we sought to deliver the following:

  1. Transform product search and discovery into an engaging and captivating experience
  2. Enhance online presence to increase brand awareness and cultivate loyalty
  3. Capture the momentum of its already-strong traffic
  4. Expand product search and discovery capabilities with visual AI

Bringing the core value of functionality to the forefront of the design process makes it possible to meet business needs.

Research Process

Competitive Studies

In order to analyze similar products on the market, we conducted competitive research and analyzed their UVP (Unique Value Proposition), features, and common customer complaints.

User Testing

I conducted a usability test with five users with the aim of learning:

  • What are people struggling with while searching for products they like?
  • How can we introduce shoppers to the right items and innovate product discovery more effectively?
  • How can we leverage visual search on our online platform?

Synthesis & Analysis

Throughout the analysis of my findings, I recognized some pain points that users experience when looking for similar products on our current mobile application. Knowing how people shop online has helped me understand how we can help improve the shopping experience when they are looking for the styles they want. As they browsed through the app, I asked them to think-out-loud and observed their behaviors when browsing through categories and using the search bar.

The main pain points identified from the findings were:

  • It is frustrating to go through a long list of categories when using navigation;
  • Many shoppers fail to take advantage of filter options;
  • Most shoppers already have an idea or inspiration of the style they want to buy, hence search is a go-to function for them;
  • Text search has failed to connect shoppers with the items they are looking for because describing the images they so desperately want to see is much harder than it seems.

Generation of Insights

Given the tight timeline for this project, I needed to understand what to focus on and how to leverage the visual AI's potential. I organized the user findings on an affinity map to determine their priorities and outlined three key categories in a typical e-commerce product search and discovery: 1. navigation menu; 2. search bar; 3. product filter.

Task Flow

Syte’s visual AI algorithm identifies items within an image, breaks them down to precise visual attributes, and suggests similar products. To help convey the structure and concept of the information, I created a task flow under three categories where we decided to implement the visual AI.

Homepage

Product Listing Page

Product Details Page

Ideation

After mapping out the task flows, I came up with sketch ideas based on the sampling work from Syte. In order to solve the challenges that were identified and avoid creating new ones inadvertently, it was essential for me to keep the research results I had collected in mind.

Solution

Lo-Fi Wireframe

I created three wireframes with different layouts. After careful consideration, we've decided to go with the last one because it provided more convenience to shoppers and performed better. I then developed a clickable prototype for validation testing. Focusing on how the camera search feature would allow shoppers to use augmented reality (AR) to preview a product or style around them creates opportunities to drive a higher conversion rate.

Hi-Fi Prototype

After a few iterations, we evaluated our Lo-Fi prototype and moved into the Hi-Fi phase. Understanding the essential features, I started the responsive design with mobile that has the most limitations, then translated it into larger devices.

Homepage

Product Listing Page

Product Details Page

Conclusion

Through these AI-powered solutions, presented a lot of e-commerce marketing opportunities.

Below is a summary of the findings:

  • Increased conversions and AOV by serving related and complementary products through visual AI-powered solutions
  • Allow shoppers to discover items by uploading any image or browsing curated inspiration galleries instead of using keywords.
  • Encourages user to interact with more product pages and ultimately drive a higher conversion rate.
  • Allows shoppers to easily search for multiple objects or products in a single image with multi-object detection, resulting in a more dynamic discovery journey and increased AOV.

I have omitted confidential information in this case study. The information presented here is my own and does not necessarily reflect the views of the company.