Work

Sunrise

Dev
Design System

A design system that streamlined the development process across teams, reduced UI inconsistencies, and allowed for faster iterations on the LivelyLink app.

A design system style guide featuring various UI elements, including iconography, color palettes, illustrations, spacing guidelines, and typography styles. The iconography section showcases a collection of simple black icons representing actions like search, phone, settings, and navigation. The color section displays multiple shades of blue, pink, green, orange, red, and gray, each labeled with corresponding hex codes and contrast values. The illustration section contains three circular vector-style graphics, including a stylized female avatar, a navigation arrow, and a padlock. The spacing section presents a range of rectangular blocks with different pixel values, indicating a baseline grid system. The typography section demonstrates different text sizes with sample headlines labeled as Extra Large, Large, Medium, and Small.

As a core developer on the LivelyLink Design System, my role involved shaping the technical foundation for an organization-wide UI library that would seamlessly integrate with the workflows of the LivelyLink app. This design system served as a crucial part of standardizing user interface components and enhancing design consistency across the application.

The Challenge

The LivelyLink app’s user interface was in need of a more cohesive design approach. Our goal was to create a scalable, reusable set of components that could be integrated across the entire product suite while maintaining both visual consistency and flexibility for future iterations.

My Contributions

  • Technical Planning: I spearheaded the creation of a detailed technical plan for the UI library, outlining key milestones, requirements gathering, and repository setup. This plan ensured a structured, scalable development process that aligned with the overall design vision.

  • Repository & Infrastructure Setup: I was responsible for setting up the technical infrastructure for the repository, ensuring a smooth integration with the LivelyLink app’s workflows. This included configuring Artifactory for seamless publication of the software package repository and ensuring that components could be easily shared across teams.

  • Component Development: In collaboration with designers, I developed the initial set of components that would form the backbone of the design system. These components were engineered with flexibility in mind, allowing for efficient use in multiple contexts while maintaining the integrity of the design vision.

  • Publishing & Integration: Once the components were finalized, I led the effort to publish them to the software package repository, making it easy for both developers and designers to access and integrate the components into their workflows. The system was designed to minimize friction, enabling teams to work more efficiently and effectively.

Outcome

The design system significantly streamlined the development process across teams, reduced UI inconsistencies, and allowed for faster iterations on the LivelyLink app. By creating a centralized, reusable set of components, we were able to empower both design and development teams with tools that fostered innovation while adhering to best practices in UI design.

This project also helped lay the foundation for ongoing improvements to the LivelyLink app, enabling it to scale more efficiently as new features were introduced.