Back home

Overview

Refine data organization in fashion product development

Backbone PLM is a platform for managing fashion product development. To help customers manage their expanding product libraries and the increasing complexity of their products, we designed a new, more efficient experience for organizing different types of product data.

Role

User research, prototyping, product design, QA, user testing

team

2 designers, 1 product manager, 5 engineers

timeline

6+ months
Dec 2021 - May 2022

tools

Figma, Productboard, Coda

Context

What is Backbone?

Backbone is a product development platform that automates workflow and manages data for consumer goods companies. Our platform helps companies design and publish products to the market with speed and efficiency.

Problem

Due to limited variant management features, users spent excessive time searching and editing their data, resulting in decreased platform usage :(

Outcome

A centralized platform that manages product and variant data with efficiency and flexibility

Users can now manage variant data on Backbone. Our updated tool offers more intuitive data editing and features a more up-to-date spreadsheet pattern. It significantly accelerates the workflow for managing over 300 rows of data.

My design impact:

79,000+ Products created over 2022

Reduced users’ manual data entry time by 70%

Develop products 44% faster with Backbone

Research

Understanding the problem

I mapped out the process to better understand how users use Backbone to manage their products. From my research, I realized users had the most complaints about product page and item view table.

Pain points:

Unable to manage product variant data. Had to use an external CSV

Lack of basic spreadsheet functions to efficiently work with our table

External CSV for variants can't be managed on Backbone

Platform audit

I audited the UX of the product page and item view table, improving user flow, interactions, and visual design. I also consulted customer service for insights on user behavior.

Design goals

To make sure we address all the user pain points, we set up the following goals for each page:

product page

Summary page for reviewing and creating product and variant-level data

- Redesign layout to be concise.
- Display both product and variant data.
- Edit information with intuitive design.

Item view

Spreadsheet tool for managing and editing product and variant data

- Include common spreadsheet patterns.
- Display both product and variant data.
- Update filtering tools for variant data.
- Improve user navigation through complex data.

Plan of action

We considered the opportunity areas in requirements, based on their effort and impact, and decided to execute this project in two phases. The senior designer created most of the phase 1 designs, while I helped on refining the interface and prototyping. I created all the design in phase 2.

Phase 1

Update existing UX

Design decision

Variant display in product page

After trying several ways of displaying product variants and conducting internal reviews and user tests, we concluded that the table view is the most efficient way to view and edit datasets since it can accommodate a large number of variants.

Variant display in item view

We want users to be able to look at product and variant data altogether. Using tabs to separate the dataset made it look like they are two different tables. Nested row made editing difficult. I decided to keep both data in the same table and include two edit modes. Based on the edit mode, users can choose to see more of the product or variant data.

Phase 2 final design

Product page

We allow users to create variants on the product page. Editing variant data is easier now through hovering and clicking instead of using full-screen overlay mode.

Item view

We introduced two edit views that allow users to compare product level and variant level data. The purple highlight in column header indicates editable fields. We don’t allow users to edit all fields in both views  to prevent them overwrite important product data.

Filters in item view

I added dividers and icons to distinguish product and variant level fields in filters and display panels. To help users find filters faster in the growing filter options, I decided to include search bars.

Feedback

User testing

We interviewed 4 users and received very positive overall feedback. However, they did not like the new lazy loading table because they prefer using pagination to find their data, as it is currently available in the web app. Therefore, we have decided to incorporate pagination back into the new design.

Handoff

Prepare design for development

I organized the Figma file in a way easier for engineers to find the screens they need. I also screen recorded certain interactions just to better document and communicate how the design should work. We had a weekly meeting for the dev team to update us on their progress alongside a Slack channel in case they had any questions.

Takeaways

What did I learn

Always document past user interviews: 
‍By watching past interview recordings, I have learned a lot about user behaviors and pain points. These insights are very helpful in onboarding me to this new project.

Make use of the customer success team: 
Usually, the customer success team at B2B companies has a deep understanding of users. When we cannot frequently contact users, the team can be an excellent resource for conducting research and testing design.

Resume
Email
LinkedIn