📍 Fit Analytics | Germany 🇩🇪

Sizefox Playground, a Machine-Learning B2B feature

Product Design | B2B

Oct - Dec 2022

Project Overview

Outcome

While working at Fit Analytics GmbH, I also worked for the Sizefox team. Given the exciting expansion of the product roadmap, I joined Sizefox to help developing a new Sizefox feature: Widget Playground & Calibration.

Timeline:

  • From conception to the first user test: 1 month

  • User testing and iterations: 2 months

My role:

  • Designing the new Machine Learning feature

  • Collaborating in the User Research

The team:

  • Zahra Mhamaldi (Product Owner), Renata Perito (UX Researcher), Andrii Zacharov (Data Scientist), Nicolas Juarez (Engineering Lead), Joni (Graphic & UI Designer)

A fully interactive high-fidelity prototype of the new feature

Due to confidentiality, I'm not able to show high-quality working prototypes or any information not publicly accessible.

Sizefox Playground: main screen with data

Problem Statement

Just like the mother product Fit Finder, Sizefox is also a size recommendation widget. Instead of large apparel e-commerce enterprises, Sizefox targets SME merchants such as Shopify apparel sellers who want to boost their sales and to reduce the return rate at the same time. Therefore, the widget is much more simple with no-code integration and fewer questions because the product range is less diverse.

However, this approach comes with a caveat: the size recommendation is less personalised to online shoppers. That’s why the Data Scientist came up with Widget Playground & Calibration . This is not in the B2C widget that online shoppers would see on the merchant’s website. This new feature using Machine Learning is meant to be in the Sizefox management app for Shopify merchants.

Process

In this project, I worked closely with the Product Owner, Data Scientist, UX Researcher and Engineering Lead. Since the Sizefox widget was already launched in the Shopify App Store in 2021, the stakeholders required me to follow the existing user interface in order to gain time.

The goal of this new feature is two-fold:

  1. Product-wise: improves the widget’s machine learning algorithm, making its recommendations results more accurate to the merchants’ audience (online shoppers).

  2. Acquisition-wise: helps merchants sell more while also reduce the return rate at the same time.

After aligning with stakeholders on the scope, the project plan is as follows:

Phase 1: Research & Prototyping

  • Design user flow and low-fidelity prototype

  • Assist UX Researcher with user research and interviews

Phase 2: Iteration & User Testing

  • Incorporate iterations into user flow and interfaces

  • Create high-fidelity prototype for a second round of user testing

Phase 3: Iteration, User Testing, Development

Final: Internal Test & Launch

Image credit: Unsplash

Execution

Before designing, it is crucial for me to fully understand the new feature as well as the actual user interface. The first step I took is to work closely with the Data Scientist to break down the Machine Learning mechanism of Sizefox.

  • What data input Sizefox requires

  • How those data is used and calculated in order to provide a size recommendation as accurate as possible

Then I studied the functionalities of the new feature designed by the stakeholders.

How the new feature Widget Playground & Calibration works:

  1. After setting up the Sizefox app and added a size chart in the Sizefox merchant app, the user is led to a new testing page.

  2. The user can enter inputs and get a size recommendation like a real shopper when shopping online.

  3. The user can adjust the size recommendation result prior so that Sizefox algorithm can improve.

The user flow that I created proved to be useful by the UX Researcher, the Sizefox team as well as the rest of the company.

Confidential

Sizefox Playground User Flow: New User

Confidential

Sizefox Playground User Flow: Return User

I designed a low fidelity prototype following the guidelines of the existing Sizefox user interface. I had to create new components by combining existing ones together into new organisms. These new organisms such as the testing tool and the result table are needed for the Widget Playground & Calibration feature.

My goal here is to illustrate as fast as possible how the Sizefox merchant interface would look like for both the users and the engineers.

In parallel, I also helped the UX Researcher with user interviews.

After the first round of user interviews, we learned that:

  • Most merchants are keen on this feature because they think it is helpful

  • They didn’t understand how to adjust the test results because:

    • The tooltips were too fast

    • The table was not shown enough

The UX Researcher recommended to make the interface more user-friendly by adding more screens and changing content.

Therefore, I came up with these iterations that were validated by engineers:

  • Design information box to be more readable

  • Reduce information on the screen to avoid overwhelming users

  • Change the one-column layout to a two-column layout for more visibility

Sizefox end-user user interface

Confidential

Sizefox Playground Calibration Flow

Sizefox Playground: User Interfaces

What happened after Phase 1?

I incorporated all the aforementioned iterations in high-fidelity user interfaces. The new interactive prototype received positive feedback from the Sizefox team and was ready for a second round of user testing. I successfully manage to:

  • Make the data-focus interfaces clearer and more user-friendly

  • Design the onboarding steps more accessible

  • Reduce mental cognitive load for merchant users

Together with the UX Researcher, we divided the second round of user testing into 2 parts: qualitative with a handful of interviews with existing Sizefox users and quantitative by using Maze. While working on the test prototypes, we were transitioned to the Snap AR Enterprise department. This Widget Playground and Calibration project was then put on hold.

Sizefox Playground: User Interfaces

Learning & Takeaways

Prior to this project, I was familiar with the Sizefox team and product. Despite my focus on Fit Finder User Acquisition, I frequently consulted the Sizefox team to understand their product better. My enthusiasm and curiosity paid off during organizational transitions, allowing me to quickly adapt my design approach to the new project.

Working on a Machine Learning product presented challenges. I had to look beyond the simple UIs to understand the Sizefox widget algorithm. With support from skilled the Data Scientists and the UX Researcher, I translated the Widget Playground & Calibration into a widely used user flow at Sizefox and Fit Analytics.

My ability to design quickly and integrate new interface components without complicating developers' tasks was notable throughout the organisation. This experience reinforced my belief in collaborative design approaches with cross-functional stakeholders, facilitating seamless project progression. Hence, I aim to continue focusing on B2B projects involving diverse stakeholders.

Key practices I will bring to future projects include:

  • Ensuring transparent and effective communication from the project's kickoff with various stakeholders.

  • Maintaining concise and organized notes using simple tables to track communication.

  • Understanding each team's collaboration style and design processes to enhance project efficiency.

Other Projects