Arrive Logistics

Increasing content visibility by 30% with a new design system component

Creating a design component to save screen real estate

My Role:
Product Design Lead (Design Systems)
Arrive's design team needed a more robust design component to meet it's complex content needs. I collaborated with 11 other designers and their ongoing projects to create a design system component that will fit all their project needs. New designs using the data row component provided 30% more content visibility.

Arrive is a freight logistics company where users ingest a lot of data to make a decision.

Arrive Logistics connects customers (e.g., Home Depot) who need to ship products with carriers (e.g., FedEx) providing truck services. Our sales reps decide whether to accept customer loads based on factors like market conditions, spread, contractual commitments, and more.

New users had trouble navigating and working in our content-filled screens.

On average, it took 6-8 months for Arrive’s new sales reps to onboard. Training and management were a significant expense exacerbated by the company’s high turnover rate. Reps who finally learned the ins and outs were so burned out that they would leave before they even hit 1 year.

New users are expected to understand and utilitize Arrive's overwhelming load board in the first few months on the job

Stakeholders wanted more content, but the Design team struggled to fit them on the screen.

Arrive's user interface had a lot of tables. Stakeholders kept requesting more content in smaller viewports, leading to oversized tables. This resulted in screens with too much information, little white space, odd overflow issues, and a lack of data prioritization for our sales reps.

Design needed a component to fit a lot of content and prioritize essential information.

As part of a larger initiative to re-imagine how freight can be managed, the design team wanted a way to display content with more flexibility. We were looking to move beyond a table’s rigid structure and fixed cell sizes.

I created Data Row, merging design elements across different external and internal pages.

The Data Row component was a group effort, named and created based on different projects piloted by individual designers. I merged similar design patterns into a single component with its own set of behaviors and interaction states.

Initially, everyone hated it. We couldn’t agree on how interactions should work for specific use cases.

Our conversations on data row were so heated that we escalated this discussion to a smaller group of design leaders + me. As Data Row was intended to be a key component in our design system, it had to accommodate several use cases. It could display content, act as a to-do list item, function as a navigation tool, handle bulk actions, and more.

We kept cooking- focusing on interaction states and behaviors.

I turned my focus on interaction states and behaviors that fit everyone’s needs. We also weighed our options based on engineer feasibility and ease of update. Engineering input was vital for making our final decision.

We experimented with elevation, but it would not scale.

While this was a low level of engineering effort, we ran into issues with our colors clashing. This solution required changes to our design system and made our designs look dated.

Then explored novel interactions, but it required too much engineering effort.

This solution looked modern and did not clash with our current colors. However, the engineers could not create the conditional corner radius within our timeline.

Finally, we found a solution that satisfied all our requirements.

Our new Data Row checked all the boxes, minimizing the engineering level of effort while being able to scale and fit well with different types of content.

Now, Data Row serves all future data display needs, allowing designers to better prioritize information and reduce cognitive load.

The team integrated the data row into all upcoming projects. New designs fit all required content without horizontal scrolling. Stakeholders and sales reps preferred newer designs featuring Data Row to the older tables.