Design System —
Sergeant DS for BuildOps
A comprehensive design language for web, mobile, and print.
At the beginning of 2021, BuildOps was at an inflection point. New users and customer tenant accounts were being added rapidly. The platform was growing in scope and complexity, with more challenges ahead. Big things were on the horizon.
The design team was about to grow, and Sketch was no longer the right choice for us. To stay ahead of the expansion, I quickly rebuilt the design system in Figma. I also got our CEO to bless its name, Sergeant, inspired by our founders' veteran history. Figma allowed us to prototype and do light version control in one environment, enabling us to phase out Abstract and InVision. With additions to the design team, particularly the incomparable Dan Guerra, we refined that early version.
Over the ensuing quarter, the team banged on v1, gathering designer feedback. This drove the team's migration to a v2 of Sergeant, which resolved limitations and usability issues and took advantage of powerful changes to Figma’s component capabilities.
Looking back, it was the right decision at the right time. We refined the core design language and created reusable components, modules, and layouts, accelerating our design work. All this was accomplished while maintaining an intense cadence of product design work.
Scope
This was a multi-year cooperative project to organize, codify, and share a comprehensive set of tokens, components, modules, and screen layouts to support the BuildOps platform. The impact of this initiative was deep and widespread, read more on the specific ways this initiative paid off.
Design
Sean Locke, Product Design Manager
Daniel Guerra, Senior Product Designer
Hannah McTavish Stroud, Product Designer
Hillary Carter, Product Designer
Design System Documentation —
Documentation: Contents
Documentation: Color
Documentation: Color (cont'd)
Documentation: Typography
Documentation: Typography (cont'd)
Impact —
1
Consistency
→ brought a unified look and feel to web, mobile, and print interfaces
→ promotes a brand identity and trust through consistent visual and interaction patterns
2
Efficiency
→ reduced the repetitive task of creating local components
→ streamlining the work of the product designers
3
Collaboration
→ design alignment amongst a remote design team
→ providing clear standards and documentation to developers for better handoffs
→ allowing the design team to focus on innovation that solved user pain points
4
Scalability
→ eased the process of extending the platform into new features
5
Quality
→ ensured an high-quality accessibility-first approach to the user interface
6
UX
→ enhanced usability and satisfaction to the user's platform experience
7
Efficiency
→ reduced long-term costs for design and development
→ minimized the need for extensive design overhauls
8
Innovation
→ provided a solid base upon which to adjust existing components and introduce new ones
Design Tokens —
Color
Color Tokens: for Brand, Neutral, and Supporting Colors
Design Tokens —
Typography
Typography: Regular, Caps, and Numerics Text Styles
Typography: Links, Numeric Links, and Comfortable Text Styles
Design Tokens —
Iconography
Iconography: Features
MODULES —
Secondary Navigation
Secondary Navigation
MODULES —
Data Tables
Datagrid Tables
More Work
CASE STUDY — Project Management Software for Commercial ContractorsCASE STUDY — Educators Empowering EducatorsDESIGN NOTES — AI for BuildOpsDESIGN SYSTEM — Sergeant DSMOBILE DESIGN — Time Tracking for California WorkersCOLLATERAL DESIGN — Forge ConferenceWORK IN PROGRESS — Unbound AgentsSURVEY — Identity DesignARCHIVE — Earthquake Safe