Component Library

Design to deployment in half the time

Shippo Navigation

Client
Shippo

Design Role
UX Design, UI Design

Timeline
Dec 2021–Jan 2022

Deliverables
Figma Prototype

Problem

Each time a new page or feature needed to be added to the website, the designers and developers had to create it from scratch. That slowed down the process of shipping new features.

In addition, the website was lacking visual coherence due to the use of too many different kinds of typography and other visual elements important to the UI.

Solution

Design a component library based on Shippo’s branding containing reusable elements that can be combined to create visual harmony and speed up the design and development process.

Impact

The amount of time needed to develop new pages was reduced by half. We were able to launch new features quickly by implementing reusable components for the design and development

Increase organic traffic by creating a keyword-rich glossary

A page comprised of a variety of resources was reworked as a glossary. It contains a list of terms that link out to child pages that contain the term’s definition. The design was kept clean and minimal in order to optimize page load speed. Care was taken in making sure the tags were ordered in an SEO-friendly format.

Improvements to Shippo’s carriers page

The new cards were used to update the carriers page. The rounded corners softened the look and made it more polished-looking. The carrier’s name was added to the text element of the card component to make the page more accessible.