Client Node4 Ltd. United Kingdom | Timeline March 2021 - February 2023 | Industry Information Technology |
Introduction
Picture a blank canvas, a new software project in its early stages, full of potential but lacking visual harmony and consistency. This article tells the story of my experience of creating a design system from scratch when I joined my previous company, Node4, illustrating how it transformed our software and set the stage for a remarkable user experience.
To add more depth to this story, it's important to note that this software was a special project initiated by the CEO, separate from the company's existing software development team. They hired a new team of architects, engineers, developers, and a UX designer as contractors, exclusively dedicated to the Nexus project, with a clear mission to follow its unique roadmap.
Nexus aimed to become the organization's primary source of truth, replacing costly and outdated legacy software frameworks.
User interface before I joined the team |  |
User interface after I developed the design system |  |
💆The Challenge
When I first joined the company, I was met with a unique challenge - we had a new software project in the early stages of development. It was a fantastic opportunity, but it lacked a cohesive design. Each page and feature had its own look and feel, causing confusion for users and inefficiencies in development. The team was using unattractive UI library from Github repositories.
Building the Design System
1. Research and Discovery
Starting fresh, I began a thorough research phase. I talked to users within the company and ran interviews to understand what they needed and what problems they faced. I also checked out what our competitors were doing to see what's standard in the industry. I also checked how accessible our current product is by using the WCAG 2.1 checklist and looked for places where we can improve usability using basic UX design heuristics.
2. Creating the Foundations
I was inspired to use Brad Frost's Atomic Design System, as I found his methodology effective for organising UI components in Figma.
What is atomic design? Atomic design is methodology for creating design systems. There are five distinct levels in atomic design: Atoms, Molecules, Organisms, Templates and Pages.
The screenshots below from Figma are the actual list of my UI components organised using 'atomic design'.
 |  |  |
I developed the visual identity of the design system, aligning it with our existing company brand guidelines. I carefully chose a versatile font system that suits the web application. I collaborated with the company's Marketing department to select appropriate imagery for the portal. In terms of the colour palette, I made a few adjustments to the company's original palette to ensure it met general accessibility standards effectively.
Colour System
Font System
Grid and Spacing System
As someone with over a decade of experience as a Graphic Designer, achieving pixel-perfection is an obsession. I introduced an 8pt Grid System to the team. I had to explain to the developers the significance of this system for maintaining consistency in the overall look of the web portal and how it would benefit them by seamlessly integrating the same system into their coding process.
Iconography
My team uses 'FontAwesome' font icons for the iconography.
Button System
I designed a button system that differs significantly from the company website because I felt the aesthetics didn't align with the web portal's design system. I opted for a simpler button style without unnecessary decorations.
3. Components and Patterns
Creating a library of reusable components was a pivotal step. These building blocks would ensure a consistent and efficient design process as we developed the software. We also established clear guidelines for their usage.
Table System
The most crucial aspect of the software is the data table components, which keep data organised and simplify the lives of end users. I've created a couple of data table types to accommodate various data formats. First, there's the basic list table, as shown in the screenshot below:
Second type of data table below is an accordion with mini inspect:
Another version below is an accordion tree table:
I designed the centrepiece of the data table system below and named it the 'Modular Toolbar.' The name reflects its adaptability – we can easily add or remove features from the toolbar depending on the type of data in the list. Our research revealed that users demand an efficient and fast way to find data in the table, including the ability to display the number of search results and the option to sort and filter data according to their preferences. As a result, I developed this design and made it a top priority to ensure it was developed and released as soon as possible.
4. Documentation and Updates
Comprehensive documentation was crucial. It facilitated seamless collaboration between our design and development teams. Just like in previous product design teams I've worked with, everyone was required to document every detail. It's not anyone's favorite task, but it's a necessity. We used Confluence to document updates, team meetings, job requests, design discoveries, coding guidelines, design guidelines, research, and studies. My design system was no exception. I had to make it accessible to the entire team and ensure they knew where to find UI components whenever they needed them. The design system is an ongoing development that never ends. It evolves to meet user needs and demands, just as my role as a Product Designer requires me to stay up-to-date with the latest trends and innovations in UX design.
Implementation and Results
The design system was a breath of fresh air for our software project. It unified the visual identity and streamlined the development process. As we implemented the system, we observed measurable improvements in design consistency, efficiency, and user satisfaction.
User Feedback and Iteration
User feedback played a critical role in refining our design system. With each release, we welcomed feedback and made iterative updates, ensuring that the system evolved alongside our users and the ever-changing industry standards.
Benefits
Consistency: The design system transformed our software into a cohesive and user-friendly experience.
Efficiency: Design and development teams operated more efficiently, saving time and resources.
Scalability: The system allowed us to scale our software as it gained popularity.
User Satisfaction: Users were happier and more engaged, leading to positive word-of-mouth.
Conclusion
Creating a design system from scratch is a journey of transformation and growth. It takes a vision, meticulous planning, and a commitment to putting the user experience first. For our software project, it was a pivotal moment that set the stage for long-term success.
Let's Work Together
I am passionate about helping new software projects and businesses embark on their own design system journeys. If you're looking for a UX designer to craft a design system that elevates your software project, please feel free to get in touch.
Final Thoughts
The experience of building a design system from scratch is a rewarding one. It not only enhances the user experience but also simplifies the design and development processes, creating a foundation for a bright and consistent digital future.
End of post
Commenti