top of page
Top

Commerce Manager Table Component

In a world where efficiency is the backbone of better productivity for quicker product shipouts, design systems need to fall inline with better and more flexible component designs.

Contents

The case study is broken down into categories listed below. Feel free to follow along each topic of discussion (organized by number), or simply teleport to the desired listed category title of your choice.

01  Project Overview

Project type

Component Design

Industry

Commerce 

User / Audience

Sellers

Duration

1 Months

Design Tools

Figma

Role & Responsibilities

UX Designer:​​​

  • Research

  • Align with Product Designers from various departments and document painpoints and needs 

  • Create solutions

  • Test & review results

  • Document learnings 

Project Overview

02  Problem

Commerce Manger Table Component

About an existing table component with limited functionality 

Commerce Manager (CM) is found in Facebook, and is a widely used Meta product known within commercial brands and small business. This product allows businesses to manage their brand offerings, ads, tags, and promotions, as well as data details like product engagement, and effectiveness on both Facebook and Instagram platforms. However, during product and feature revisions some components were not revised or added to existing design systems in order to keep consistency across Meta. For example, the existing table design component found in the CPS library (a Geodesic supporting design system) was lacking important elements that would further it’s application reach within Commerce Manager (CM) and possibly other locations within Meta products.

  • Limited table features

  • Limited table applications

Problem
Discovery

03  Discovery

Limited features

The table component lacked a proper header option with no indication of title and description or CTA to follow. In addition, the footer was left as a blank empty space.

Header

  • No optional title and description

  • No optional CTA button

Footer

  • Blank / Empty 

OldTableDesign.png

Limited applications

Further learnings revealed due to limited features it could not be applied in all instances. Meaning, the table component could only be featured in limited locations throughout the Commerce Manager space regardless of its demand in other locations.

Pain Points

04  Pain Points

Limited Options

Component isn't flexable, customizable, or swap-able

Limited Applications

Component is limited and therefore has limited usage

Not Available

The component is not available in the internal design system

In light of some limitations found in an existing table component, the component failed in functionality and multi-application within the Commerce Manager suite in Facebook. In order to comply with the goals of Commerce Manager, the table component must provide optional elements, like a header and footer to be applied in multiple areas throughout Commerce Manager.

Problem Statement
Solutions

06  Solution

Pain points:

  1. Limited functionality 

  2. Limited applications

  3. Not available in the internal design system 

Solutions:

  1. Optional header, description, and pagination footer

  2. Component will have multi-use capability 

  3. Geodesic design system adoption

07  Rules & Limitations

Requirements:

  1. Elements must be optional (Figma toggle)

  2. Sub-components must come from the Geodesic component design system

  3. Design new table component for web only

Rules & Limitations

08   Sub-Components

About the sub-components

The sub-components are the missing pieces of the puzzle. These components are derived from the Geodesic design system and will be added to the existing table in order to satisfy the pain points mentioned.

Header:

  1. Geo-Card Header

  2. Geo-Button

Header_Component.png

Footer:

  1. Geo-Single Text

  2. Geo-Previous Button

  3. Geo-Next Button

  4. A top stroke effect was added to separate the footer form the top scroll body section

Footer_Component.png
Sub Components
New Table Design

09   New Table Component

About the new table component

The new table component reflects the visual idea and functionality of the new web experience. The table is comprised of many sub-components derived from the Geodesic component library system at Meta. Each component can be either toggled on or off, or swapped for another component within the Geodesic component library system. Below are a couple of examples of the table shown in different instances.

Default Table

The default table component reflects the final solution applied according to the new project goals and requirements. This table in its default state shows both the new header and footer.

NewDefaultTable.png

Table w/Detail Modal

This state shows the product detail modal triggered after an item row has been selected.

NewTableWithDetailModal.png

Table w/Empty State

In this state the table is empty. This means there are no rows of information to display, and consequently no footer to reflect information on this page, previous, or next.

NewTable_EmptyState.png
Application

10   Applications

New table applications 

Thanks to the new table component enhancements various commerce manager departments were able to adopt and utilize the new table experience according to their individual needs. Though I can not display all the ways the table was used throughout the Commerce Manager departments, below are a few instances where the new table was used successfully.

Overview - Top Products

In Commerce Manager, the Overview tab, provides a birds eye view of the account holders shop performance. Among many data features displayed here, the table was used to display the Top Product and data to review. In addition, to review the rest of the products a CTA (See catalog insights) is shown in the upper right corner of the table.

TopProducts_Table.png

Insights - Catalog 

In Commerce Manager, under the Insights tab, the Catalog table features both Product and Collection data.

InsightsCatalag_Table.png

Insights - Awareness 

In Commerce Manager, under the Insights tab, the Awareness feature shows a list of locations the accounts holders shop was found.

InsightsAwareness_Table.png

Payouts - Credit Card Charges 

In Commerce Manager, the Payouts tab, displayed all financial data regarding the shop and it’s transactions. The table was used to display all credit card charges within a date period.

Payouts_Table.png
Results & Learnings

11   Results & Learnings

Despite having to research all of Facebook’s Commerce Manger departments in order to understand the needs of each, the need to have consistency across all of the departments was even grater. Product Designers no longer had to piece components together in order to achieve the table they needed:

  • The new table component can easily be customized

  • The new table can be found in the local design system

  • The new table had multiple applications

In conclusion, we learned that because every department required different outputs the solution needed to be customizable, flexible, and yet consistent in delivery. The new table was able to be adopted by most departments, sparing one that required the table to have multiple sections within the header space. At the time we felt we would have a higher impact in adoption and our assumption was correct. The new table was used more than 15 times spread across the Commerce Manger suite.

bottom of page