Client

Bryco

Services

UX/UI Design

Design System Management

Documentation

Year

2023

Visit

Visit URL

UX/UI Design

Design System & Accelerator Components for Bryco

An adaptable design system and component library built in tandem with the OutSystems UI platform to accelerate and streamline solution development for agency clients at Bryco.

Overview

Bryco, a software development agency, needed a scalable design system along with a library of reusable, high-quality components, templates, and widgets to accelerate its development process. The goal was to create a foundation that would give project teams a head start by providing pre-configured, tested, and optimized assets easily integrated into final products. Internally referred to as “Accelerators,” these resources were designed to significantly reduce development time, ensure design and code consistency, and improve the overall quality of the agency’s software deliverables.

‍

The Problem

Bryco faced recurring challenges across client projects:

Inconsistent design patterns due to improvised UI implementation.
Repeated effort spent building the same components from scratch.
Slower development cycles, especially during project onboarding.
Quality issues caused by a lack of centralized design standards.

The absence of a unified design system meant teams often reinvented solutions, resulting in fragmented user experiences and reduced development efficiency.

‍

My Role

Lead UI/UX Designer

Collaborated closely with project managers, developers, and QA teams.
Responsible for system architecture, component design, documentation, and team enablement.

‍

Process

Phase 1: Discovery & Audit

Conducted a visual audit of past and current projects to identify recurring patterns and inconsistencies.
Consulted with internal stakeholders (Agency Owner, Tech Leads, Developers, PMs) to understand pain points and expectations.
Reviewed the agency’s existing OutSystems-based UI framework to ensure alignment.

Sample of design audit conducted on existing elements and styles being used

‍

Phase 2: Design System Foundation

Defined foundational elements: color palettes, typography, spacing, iconography, and interaction patterns.
Established a set of core UI patterns (buttons, inputs, cards, modals, etc.) using Figma with accessibility in mind.
Outlined naming conventions and a scalable structure for future growth.

‍

Newly defined and updated color styles for consistency

‍

Newly defined, updated and expanded typography specifications

‍

Established spacing conventions for additional consistency

‍

Phase 3: Accelerator Components

Designed complex reusable components, such as data tables, dashboards, filters, and forms.
Built templates and widgets with real use cases in mind to reduce development setup time.
Collaborated with developers to implement components using the OutSystems platform, ensuring alignment between design and code.

Sample wireframes from design ideations on the "Advanced Filters" reusable component.

‍

Version 1 of the "Advanced Filters" component for Desktop, Tablet & Mobile

‍

Phase 4: Documentation & Handoff

Created a living design documentation system using Figma, Confluence and Scribe.
Provided usage guidelines, edge case examples, and accessibility notes.
Facilitated design touch-base sessions to help agency stakeholders and developers understand and adopt the system smoothly.

Documentation on Accelerators organized in Confluence

‍

Documentation on Detail Page layout and structure in Figma

‍

Documentation on Accelerator components and page layouts in Scribe

‍

The Solution

A robust, agency-wide Design System and Accelerator Library, including:

80+ reusable UI components across desktop and mobile layouts.
Pre-set templates and widgets that can be tailored to client use cases.
Documentation hub with design guidelines, references, and usage patterns.
Polished ready-to-use assets for faster internal design concepting and developer implementation.

Sample of the final design for the "Advanced Filters" reusable component

‍

Outcomes & Impact

Bryco saw a 30–40% reduction in design and development time for new projects.
Improved consistency and UX quality across all client-facing products.
Higher team efficiency through clear handoff processes and shared design language.
Positive feedback from developers who reported smoother implementation and fewer UI bugs.
The system became a standard foundation for all future projects at the agency.

‍

Reflection & Learnings

This project highlighted the importance of scalability and strong collaboration efforts in system design. Beyond creating a set of reusable visual components, this project was about building trust, aligning teams, and solving workflow inefficiencies. I found that this project really grew me as a designer and allowed me the chance to be a leader and a guiding light for the agency in a time of restructuring.

‍