Introducing Latitude
Flexport’s Design System
Design systems are so hot right now we’d be remiss if we didn’t talk about our very own: Latitude. Two years in the making, Latitude has grown from a simple folder of React components to a dedicated team staffed with 4 full-time contributors (and counting). Like most design systems, ours began out of necessity and evolved with our product and organization.
Building a design system is mostly about people and process rather than design and development. Any team setting out to build a design system will have their own unique set of challenges and solutions. Although we have no plans to open source Latitude we hope that sharing our journey and process will shed some light on how our team has come to prioritize, use, and discuss our design system. In this post, I unpack Latitude’s development and cover how our design systems team works with Flexport’s product teams.
Background
Flexport is a freight forwarding and logistics company with a rapidly expanding software org composed of 150 people. Our products range from warehousing tools to automated software and even a mobile app for truckers — our design system serves all of them. We’re moving fast and need to ensure every product team can stay focused on solving problems for the users— that’s where Latitude comes into play.
Mission
We named our design system Latitude, not just for the nod to geography (latitude is the angular measurement north or south of the equator) but mainly for its secondary meaning: the scope for freedom of action or thought. Design systems are many things to many people — it’s important to establish that we’ve built ours according to our company’s needs. Flexport’s design system has a simple mission: to empower product teams to build great user experiences with speed and cohesion.
Fixing the user experience in global trade is a monumental task; our designers often tackle experiences that have never existed in digital workflows. We’ve built our design system to be flexible, and at the same time specialized, for the varying needs of our products.
Strategy
At Flexport, our design system is a product that serves our product teams. Latitude is user focused and impact driven; all decisions are rooted in user needs and all milestones tie into our company roadmap. Our quarterly team roadmap is determined from a balance of our backlog and understanding user needs. We always try to optimize for the most impactful projects, therefore, we gauge user needs from a mixture of understanding product team roadmaps and regular check-ins with designers. Our design system is most successful when all teams use it, plain and simple. For us, success starts with getting buy-in and building trust, but long-term success requires scalability and flexibility.
Principles
We want to make sure our system allows product teams to focus their efforts on the user experience and build within our design language. Setting clear expectations has helped our team communicate our work and grow a culture of collaboration around the development of our design system. Designers and engineers rely on Latitude to stay aligned and ship quickly. We have three principles which we use as beacons in our decision making.
1. Build Community
Flexport’s design system must empower all team members to collaborate and communicate. We fail when we’re seen as a controlling power. From weekly office hours to our slack channel, we try to be as available and open as possible. We’ve found that just being in on the conversations and critiques opens our design systems team to a deeper understanding of our product and our user’s needs.
2. Bridge the Gap
A design system has split priorities by default — there are simultaneous design and engineering tasks with separate workflows and end-users. Our team must be flexible enough to approach both types of problems with consistent and reliable solutions. Building a team with product designers and full-stack engineers means we have different perspectives in every conversation.
3. Optimize for Impact
Latitude’s mission is most achievable when our efforts are focused and align with our user’s needs. A design system is a challenging thing to build anytime, but with a growing company and a quickly evolving product, it can feel like we’re trying to hit a moving target. We always try to prioritize projects that will be most impactful across our organization.
Looking ahead
The future is bright for Flexport and Latitude. We have a packed roadmap for 2019 and we’re stoked for the improvements and additions that are in the pipeline. We’re hiring frontend engineers, apply today! If you want to see our work in the flesh, check it out at flexport.com/design.
Special thanks
to Randall Hom, Suzanne Ginsburg and Bryan Manuele (Fermi Dirak) for their helpful feedback on this post!
