Component structure

UI COMPONENTS

Created a library of reusable components, such as buttons, forms, modals, and navigation elements. Each component was designed to be flexible and scalable,

PATTERNS

Identified interaction patterns and consistently referenced drawers, navigation patterns, lockout flows, and ways of getting users from point A to point B.

A Design System Reimagined

Evolving a system for new needs

Azibo, a property management platform, had an existing design system that had been in place for over two years. While it served as a solid foundation, it became apparent that the system needed to evolve to meet the growing needs of the product and the increasing complexity of user interactions.

Team: Senior Manager of Product Design, Julie Froelich;
Team of Product Designers; Product Management and Front-end Development.

Timeline to develop and release:
Phase 1 Design : 3 weeks
Phase 2 Implement : Iterative over the course of 9 months


Using input from the existing design system and design team, I worked with Product Managers, Designers, and Developers to align stakeholders on a new vision that included flexible systems and scalability of components.

System Goals

Enhance Consistency

Ensure a unified look and feel across all products and platforms.

Improve Flexibility

Allow for quicker adaptation to new design trends and user needs.

Increase Efficiency

Streamline the design and development process to reduce time-to-market.

“How did you do that so fast?”

— An amazed lead of Product Management watching designers use components to adjust a design on the fly

Approach

  • Assessment and Audit

    Conducted a comprehensive audit of the existing design system.

    Identified inconsistencies, redundancies, and areas lacking scalability.

  • Iterative Design and Testing

    Created prototypes of the updated design components.

    Conducted usability testing with internal and external users to gather feedback.

  • Documentation and Implementation

    Developed detailed documentation to guide the use of the new design system.

    Collaborated closely with the development team to implement the changes.

Output

Enhanced Consistency The updated design system significantly improved the consistency of the user interface across different products and platforms, leading to a more cohesive user experience. Notably the instances of detached components was reduced to almost none.

Increased Efficiency 20% Design Lead Time Reduction The streamlined design and development process reduced the time required to bring new features to market by 20%, meaning the small team could now strategically think through UX without needing long lead times to put together UI.

Improved Flexibility and Scalability The new system allowed for easier adaptation to new design trends and user requirements, ensuring the product could evolve with the market. Changing global variants and updating hundreds of screens across source of truth files became a simple operation.