Cookbook Design System
Cookbook Design System
Cookbook Design System for Olo
Building a complex design system to connect teams on a common design language foundation for Olo's B2B and B2C product offerings.
Olo is a New York City-based B2B SaaS company that develops digital ordering and delivery programs for restaurants, via holistic store logistics services, partnerships for 3rd party delivery service providers, and more.
Role
Product Design, UX Researcher, Design System Management and Documentation, Accessibility Design
Focus
Olo B2B & B2C Products
Team Credits
Senior Product Designer (Self)
Senior UX Developer
Interim Product Manager
Problem
Through 2021, Olo’s design systems existed in a fairly rudimentary fashion– and without strategic processes to help ensure successful cross-organization adoption and facilitation.
Products existed as separate identities with individual teams creating their own source of standards for UI elements, components, or interaction patterns. Some teams had adopted the Cookbook design system in full, and some had abandoned the concept of adoption in favor of other priorities.
What we discovered during initial research:
Conflicting guidelines and direction
Duplication of common components
Inconsistencies and legacy frameworks across B2B platforms
Pressure for agile solutions without discovery and research
Siloed teams working with disjointed communication
Goal:
Modernize Olo’s offerings by providing a shared language, tools, and best practices that facilitate high quality product design work and implementation at scale.
Additionally, support simultaneous team collaboration, give development teams ownership in the product's direction and lifecycle, and play a key role in imparting a high-quality user experience to our product.
Aligning the design system with Olo's top-most OKRs made evangelizing the system easier by helping the design team focus on high-priority goals, establish accountability, and measure its impact. By demonstrating how the design system could help Olo achieve its strategic goals, the design team was able to begin building support and enthusiasm for the system among stakeholders and other teams.
Deliverables
Consistency–for visual design and experience:
Creating a consistent visual language across Olo’s products and platforms was key to developing a high quality, seamless user experience. Considering the B2B offering relied heavily on legacy frameworks, improving perceived quality, consistency, and overall experience were some of Olo’s top priorities.
element Scalability:
We wanted Cookbook to be able to accommodate the needs of multiple products and platforms, as well as changes and updates over time. As the organization headed toward supporting a fully responsive experience and sunsetting legacy frameworks, this meant refactoring many existing foundational components to support scalability and a flexible, adaptable framework.
intentional Accessibility:
Design systems should be fully accessible to all users–both DS consumers and end users/clients– regardless of their abilities. This required attention to accessibility guidelines and standards (using WCAG 2.1 as a guiding light), as well as testing and user feedback to ensure that the system is usable and inclusive for everyone.
holistic Usability:
A good design system is intentional in its overall ease of use and clear navigation, with straightforward guidelines and documentation– ensuring primary user groups are able to work within the system without confusion or frustration. Additionally, the design system designers acute awareness of craft and technique within Figma are crucial: matters such as shapes vs. frames, or use of AutoLayout, for example, have serious impacts on or implications for both components and feature files if not applied accurately.
Guidance, Governance, and Process
Persona Development
Persona development for design systems is valuable because it helps designers understand the needs, preferences, and behaviors of their target users. By creating detailed and realistic user personas, designers can ensure that their design system is tailored to the specific needs of their users, leading to a more user-centered and effective design. Personas can also help designers communicate with stakeholders and team members, aligning everyone's understanding of who the design system is for and its goals.
design-side testing processes
Design-side QA and regression testing within Figma helps ensure that the components, styles, and interactions within the design system are consistent and functional across different screens and use cases. By testing design system elements in a controlled environment, designers can catch and fix issues before they are implemented, reducing the risk of errors and inconsistencies in the final product. This helped us save time, improve the user experience, and help maintain the integrity of the design system.
Design system Consultation process
Research sessions began with our business unit teams, and a common thread began to develop: there was ambiguity around A.) when and how to reach out to the Design System team and B.) use the design system during feature development. A formal consultation process was established, and domain teams were given a clear picture of what successful and efficient facilitation with our Design System team would look like. This was an instant adoption booster; the team was able to deliver an objective trail for successful engagement with our team, while simultaneously offering a clear pathway to more efficient work.
Accessibility
Contrast Ratios
Our system’s colors and combinations are compliant with WCAG contrast ratio guidelines, which specify a minimum contrast ratio between text and background colors. Additionally, color guidelines and ratio standards were documented to ensure consistency across the design system, and were tested with accessibility tools such as color contrast checkers and simulators to ensure it is accessible to users with color vision deficiencies.
Alternative controls
Our team aimed to ensure accessibility for alternative controls (such as keyboard navigation) by designing and documenting clear and consistent keyboard shortcuts, using semantic HTML to allow screen readers to parse content effectively, and testing the design with assistive technology (such as screen readers) to ensure accessibility.
Assistive tech & feedback
Intentionally crafting accessible feedback within system elements was a considerable piece of moving towards rich accessibility efforts. Accessible feedback for tasks and data input is ensured by designing and documenting feedback mechanisms that are clear, timely, and easily perceivable. Including, but not limited to: using accessible color contrast and visual cues, providing concise and actionable error messages, and testing the design with assistive technology to ensure it is accessible to all users.
Results & Impact
reduced overall team spend by ~%60
reduced tooling cost by $30K/YR
Increased avg. deployment speed by 17%
Aside from more efficient planning, positive results were starting to be felt in other tangential areas. Hi-fidelity designs and prototypes were only taking several weeks to craft from wireframes and low-fidelity assets, which had previously taken months, resulting in an average velocity boost of 300%.
During the Figma tooling migration, I directed an audit of all design-relevant tools, and began to look for streamlining opportunities. Ultimately, our team was able to successfully sunset five (5) tools, resulting in a 60% cost savings on annual tooling and licensing– boosting over $30k saved with this initiative alone.
Next Steps
After releasing the first major system version and completing the tooling migration and onboarding, the design team had plans around wireframe process and velocity improvement. Previously, the team used Whimsical to create wireframes, which were then tested using Marvel. However, this process was time-consuming and involved a lot of manual work.
After conducting a tooling audit following the release of Cookbook v1, we recognized an opportunity to streamline our process using Figma and FigJam. This would reduce resource time and make it easier to move from low to high fidelity wireframes, which previously took several days or even weeks with Whimsical.
Explore the Stickersheet file* here.
*Password is required.