Product Design @ Backbone PLM

Overview

Backbone is the only product development platform built for the direct-to-consumer economy. Their suite of connected features emphasize speed, flexibility, and connectivity for modern product teams.

Jump to:

Utilization Reports

The majority of Backbone's clients are apparel companies. Our users needed a way to display a selected set of components — the building blocks of products, such as buttons, zippers, and fabrics — in a dynamic, exportable report to help with Purchase Orders and product planning.

1. Report Library

The report library serves as the landing page for this feature and houses all utilization reports created by or shared with the current user.

2. Report Creation

Here, the user decides which components to include in the report, using both component- and product-level attributes. I reimagined our (admittedly bug-riddled) filtering UI/UX to implement a simple, section-based filtering system with informative tooltips to let the user know how the report is generated in the back-end.

3. Report Generation

Reports are generated with a set of features to give the user ultimate control over the data displayed. These features include searching, sorting, filtering, and column management. While many of these patterns are reusable components found elsewhere in the app, I developed the column manager specifically for this reporting module.

Activity Feed

Backbone users are generally one of many from a single company. They have different roles — Technical Designer, Merchandise Planner, etc. — and interact with different parts of the app accordingly. As our app grew, we increasingly heard and saw a need for some sort of database housing the activities our users were taking — whether creating a product or deleting a color library, our clients needed visibility on what their employees were doing.

1. The Feed

The Activity Feed is housed within our main navigation panel, meaning it is immediately accessible from any part of the app. By default, it displays a continually updating list of all activities taken by fellow employees. The associated date, user, profile picture, app module, and specific activity taken are included with each list item.

2. The Feed, Filtered

While a running list of activities is nice, the real power of this feature is in its filtering system. Whether you're looking for a specific user, date, or even brand (for multi-brand companies), the filter drawer is here to help. Applied filters are shown both within their individual sections and in aggregate at the top of the drawer.

3. Dates Are Hard

No one really likes a datepicker dropdown. I provided a functional workaround with Quick Select options within the date range section.

Wireframe Kit

In addition to my management of our Design System, I was asked to develop a bespoke wireframe kit for the design team as we began to implement more formal UX practices. We noticed our stakeholders getting caught up in the colors and specifics of our designs even though they were only in the conceptual stage. The wireframe kit solved this problem by allowing us to focus on the content and ignore the aesthetics until a later design stage.

1. The Audit

My first step was to audit the current UI kit, which was implemented as a linked library in Sketch. I noticed some inconsistencies in this initial audit that I was able to iron out after discussion with the team.


>> These inconsistencies led me to create our Design System, Vertebrae; check it out here!


I then decided on a course of action for the kit -- I would need to define a number of gray hues and then convert our most-used patterns into this new muted aesthetic.

2. Development

Once the building blocks were in place, I developed the wireframe kit by copying elements from our UI kit and simplifying: removing colors and border-radii, replacing icons with ambiguous squares, and converting text elements into gray boxes.

3. The Kit In Action!

With everything in place, it is now a breeze to quickly mock up wireframes for early feature development and concepting. After development of the kit, wireframing as a step in the design process was solidified and we saw our early meetings move much more efficiently.