The Design System

Coadjute is at the forefront of transforming the property market with blockchain technology and data sharing. I led the development of their design system library, which is crucial as the company grows and speeds up product development.

Developing a product system library is a strategic move to enhance efficiency, quality, and scalability.

This initiative will not only speed up product development and improve system stability but also boost collaboration and secure Coadjute’s position as a leader in property market technology, delivering competitive and innovative solutions.

Insights & Lessons Learned

Here are some key lessons learned from developing a design system from the ground up:

Start Small and Scale Gradually

Begin by building a minimal viable product (MVP) of your design system. Focus on the most essential components and patterns that are frequently used across projects. This approach allows you to test and refine your system without overwhelming resources.

Establish Clear Guidelines Early

Develop clear, comprehensive guidelines right from the start. This includes not just design elements like colors and fonts, but also usage guidelines, accessibility standards, and design principles. Clear guidelines help ensure consistency and make the system easier to adopt.

Involve Stakeholders Throughout the Process

Engage with various stakeholders, including designers, developers, product managers, and marketing teams throughout the design system development. Their feedback is crucial as they will be the primary users of the system. This collaboration also helps in gaining their buy-in and ensures the system meets the needs of all.

Documentation is Key

Comprehensive documentation is crucial for the success of a design system. It should clearly articulate how and when to use specific components, along with code snippets and design assets. Well-documented systems reduce learning curves and increase adoption rates.

Prioritise Accessibility from the Start

Integrating accessibility at the beginning of the design system development is much more effective than trying to "patch" accessibility features later. Ensure that all components meet at least the WCAG 2.1 AA standards to make your products usable by as wide an audience as possible.

Iterate Based on Real Usage

Once the design system is in use, collect real user data and feedback to understand how it is being used and where improvements are needed. Regularly update the system based on this feedback to keep it relevant and useful.

Educate and Train Users

Provide training sessions, workshops, and resources to help teams understand how to use the design system. Education is vital for ensuring that the system is used as intended, which in turn helps in maintaining consistency across products.

Version Control and Updates

Treat the design system as a product in itself, requiring regular updates, maintenance, and version control. This approach helps manage changes systematically and keeps all users aligned with the latest version.

Measure Impact

Set metrics to evaluate the effectiveness of the design system. This could include the speed of design and development processes, the consistency of user interfaces, and user satisfaction. Measuring these metrics can demonstrate the value of the design system and guide further investments.

Adapt to Feedback and Evolve

Be prepared to adapt your design system as you receive feedback from users and as technology and brand needs evolve. A flexible, evolving system remains relevant and continues to provide value over time.

Define the goals

I set clear objectives and outlined the benefits of establishing a systems design library. Beginning with a top-level goal and an executive summary, I researched various design systems to inform my proposal.

Initial designs and review

I initiated the design system, soliciting feedback from colleagues early in the process. Collaboration with the marketing and product teams ensured alignment on product goals and brand voice. The design system was crafted to be accessible to all company personnel and our users.

Conduct the business proposal

After compiling the aims, facts, scope of work, and key advantages, I presented the proposal to Coadjute's key stakeholders and CEOs. The proposal received approval, setting the stage to develop the company's first systems design library, which would then undergo a company-wide review.

Launch and iterate

Following approval from broader teams and stakeholders, I transitioned the initial system design for development. I worked closely with the development team to provide comprehensive guidance on each component's various states, supporting them throughout the process.

Timeline

Discovering the problem

Many products without a cohesive systems library face unnecessary complexity, requiring extensive time and effort to design, build, and maintain. Upon joining Coadjute, I observed that different development teams were using inconsistent components and design rules, leading to a disjointed user interface post-launch.

Challenges

Passing Accessibility

Challenge:

Ensuring that all design components meet accessibility standards can be complex, particularly across different platforms and devices.

Solution:

Implement standardised accessibility guidelines and perform regular audits with tools that simulate various disabilities. Provide training for the design team on accessibility principles to integrate these standards from the beginning of the design process.

Navigating Figma File

Challenge:

Figma files can become cumbersome and difficult to navigate as the system scales, leading to inefficiencies.

Solution:

Organise Figma files using a clear, consistent naming convention and structure. Utilise Figma’s components and auto-layout features to streamline workflows. Regularly review and clean up the files to avoid clutter and ensure they remain user-friendly for all team members.

Defining the Company's Voice

Challenge:

Establishing a coherent and distinct voice across all design elements that aligns with the company’s brand can be challenging.

Solution:

Develop a comprehensive brand guideline that details voice, tone, and style. Involve key stakeholders from marketing, customer service, and product development in the creation process to ensure the voice is consistent and representative of all areas of the company.

Collaborating with Stakeholders

Challenge:

Effective collaboration across various departments and stakeholders can be difficult due to differing priorities and perspectives.

Solution:

Establish regular cross-departmental meetings to discuss the design system and gather feedback. Use collaborative tools and platforms that allow real-time feedback and updates. Educate stakeholders on the benefits of a unified design system to foster buy-in and cooperative participation.

These solutions aim to address the specific challenges of creating a design system by enhancing collaboration, maintaining clarity, and ensuring accessibility, ultimately leading to a more cohesive and efficient design process.