Think design systems are only for large teams with plenty of time? Our experience proves otherwise. While redesigning WorkflowMax under pressure, we built a lean system that supercharged our efficiency and collaboration. Let me share how you can reap similar benefits, no matter your project constraints.
Lead Product Designer
Workflow Max by BlueRock
May ‘23 - Jan ‘24
This case study explores the process of integrating a design system into the redesign and rebuild of WorkflowMax by BlueRock. As lead designer, I aimed to reap the benefits of a design system – a single source of truth, communication streamlining, and process efficiency.
However, building a comprehensive design system requires significant time and resources. Larger companies dedicate entire teams to this task, a luxury we couldn't afford. Despite these constraints, our redesign provided the unique opportunity to lay the foundation for a design system that would evolve with our team's growth.
For more information about the product redesign and rebuild check out that case study here
Our review of WorkflowMax by Xero exposed inconsistencies in the designs, such as similar page layouts with unexplained variations. These inconsistencies, combined with our tight timeline, highlighted the need for a design system to streamline both design and development processes.
Our aim was not perfection, but rather, continual progress and iterative improvement. This proactive approach would allow us to document design elements as they were created, minimise rework, and prevent the challenges associated with retrofitting a design system onto an existing product – challenges that are time-consuming, offer delayed benefits, and make it difficult to secure buy-in due to competing priorities.
Our ultimate goal was to create a practical and efficient design system. It would be a centralised hub for documentation, design decisions, and answers to common questions, promoting consistency and collaboration. We recognised that the complex design systems utilised by large corporations, while impressive, were built for different needs. Our focus was on practicality and functionality for our own team's workflow.
We did have our work cut out for us, however we were confident in the teams ability. We had vast existing knowledge of the platform from being implementation partners and we had constant feedback from customers over the years so we understood their pain points. We approached the project strategically, first conducting a thorough audit of the existing UI. Then, user interviews and implementation partner interviews helped us identify critical user journeys and essential features for improvement. A priority that immediately stood out was a UI refresh. WorkflowMax's dated interface, unchanged for 15 years, suffered from usability issues and cumbersome navigation. Some users perceived this as a sign that the product itself was outdated.
We began with a comprehensive product audit. This was essential for understanding the existing landscape and creating a detailed catalog of all the components used throughout WorkflowMax.
Product Audit: screenshots of every section of the product
Component Audit: Screenshots of all the different table variations in the existing product
After completing the audit and gaining a deep understanding of the product, we began laying the groundwork for our design system. This involved establishing colours, spacing, font sizes, and other foundational elements.
Spacing Guidelines
Font Sizings
Colours
Building a design system alongside redesigning WorkflowMax required a strategic approach to component creation and documentation. To maximise efficiency within our tight timeframe, we focused on high-impact components. Frequency of use across the product, component complexity, and the number of variations were all factors considered. This ensured that we spent our time wisely by covering the most critical components, while elements like buttons, despite being frequently used, required less complex documentation.
Table Component
Our documentation focused on essential behaviours and specifications, outlining when and why to use specific components. We integrated insights from Q&A sessions with developers and the product team, along with usability testing feedback. This created a valuable log of design decisions, justifying our choices and informing the development of similar patterns. Embracing an iterative process, we prioritised progress over perfection, moving quickly to document the necessary information at each stage.
We chose Zeroheight as our design system platform due to its speed, ease of use, and ability to store all essential information.
Input variations in zeroheight
Modal documentation in zeroheight
Within Figma, we focused on spec'd out component designs and high-level contextual usage guidelines. This provided immediate reference for designers. Each component included a link to its full, comprehensive documentation within Zeroheight. This approach balanced in-context support within Figma with our centralised design system documentation.
EightShapes Specs used on a component
Documentation in the component descriptions
We integrated dedicated design system sessions into our standard agile workflow. These sessions focused on component discussions, documentation updates, and design implementation. This allowed us to collaboratively address questions from developers and product managers, ensuring our documentation remained clear and useful.
The design system proved crucial in enabling developers to work effectively within our tight project timeline. With a centralised source of UI components and clear usage guidelines, they could rapidly and confidently implement designs. This reduced the need for time-consuming clarifications and rework, streamlining communication and minimising misinterpretations. The system fostered greater predictability and efficiency throughout the development process, empowering developers to focus on delivering quality code on schedule.
The design system served as a valuable asset for both myself as the lead designer and my junior teammate. It fostered a consistent design language, reducing time spent on design decisions and explorations. This freed us to focus on more strategic design thinking and problem-solving for complex features. The centralised documentation provided readily accessible information, empowering my junior designer to independently implement components and make informed design choices.
Consistency: The design system established a shared visual language, ensuring a cohesive user experience across the entire product.
Efficiency: Readily available components, guidelines, and documentation streamlined workflows for both designers and developers.
Collaboration: The centralised system facilitated communication and reduced the need for constant clarification, enabling better teamwork.
Scalability: The design system provided a solid foundation for future growth, allowing easy addition of new components and features.
Faster Development: The increased efficiency and reduced rework contributed to faster development cycles.
Improved Quality: The consistency and documentation helped deliver a polished product aligned with design standards.
User Experience: A cohesive design system ultimately enhanced the user experience, promoting product usability and satisfaction.
While this design system process wasn't perfect, and maintaining up-to-date documentation was a challenge within our fast-paced project timeline, it was a valuable learning experience. It demonstrated how design systems can be tailored to provide key benefits, like improved efficiency and streamlined communication, regardless of team size or project constrain
