The Fractal Design system

Confusion

When I joined the team, there was no single source of truth for design. The lack of clear tools, guidelines, and structure resulted in an inconsistent app experience and a frustrated design team. Without a unified system, designers struggled to maintain cohesion, build efficiently, or scale their work.

Key issues

• Lack of cohesion: UI elements varied across the app, creating a fragmented experience.

• No efficient way to build screens: Designers were recreating components from scratch instead of working with reusable elements.

• Disorganized team workflows: Without clear design direction, collaboration suffered.

Step 1: Auditing the Design Landscape

To identify inconsistencies, I conducted a design audit, breaking the app into sections and documenting areas of misalignment. This audit served as the starting point for a design debt backlog—a prioritized list of UI inconsistencies that we could tackle incrementally or incorporate into future feature work.

Key takeaways

• The audit defined the scope of work and allowed us to prioritize updates.

• A holistic view helped spotlight problem areas needing immediate attention.

• The backlog provided a structured checklist for improvements.

Step 2: Establishing Brand Consistency

To ensure our design system aligned with Hilton’s identity, I reviewed the Enterprise Brand Guidelines. By dissecting these guidelines, I was able to extract foundational elements that would shape the system’s core.

Key takeaways

• Color palette—ensuring consistency in accent colors across iOS.

• Typography—defining a scalable typographic hierarchy.

• Design language—capturing the essence of the brand in digital form.

Step 3: Standardizing Typography & Color

Scalability and accessibility were top priorities when developing the typographic scale and color system. I ensured our type hierarchy adhered to iOS-native text styles, making it easier for developers to implement.

Step 4: Aligning Icons to a System

Icons played a key role in the app’s visual identity, so I created guidelines to ensure consistency across the system. Each icon was aligned with iOS standards while maintaining Hilton’s distinct style.

Creating guides

• Keylines ensured icons were visually balanced.

• Consistent stroke thickness helped unify the set.

• Rules for shape and curves ensured scalability across different sizes.

Step 5: Building the Component Library

With typography, color, and icons in place, I started developing the component library using Atomic Design principles.

Atoms: Core elements like buttons, inputs, and labels.
Molecules: Small UI patterns like cards, form fields, and table views.
Organisms: Larger structures like navigation bars and grouped lists.

By structuring components in this way, we ensured reusability, scalability, and clarity across the design team.

Sticker Sheets & Templates: Designing with Speed & Quality

To speed up the design process, I created sticker sheets and templates for commonly used UI elements. This allowed designers to drag-and-drop components into their screens instead of building from scratch, freeing up time for more strategic design work.

How this helped:

• A centralized resource—designers could quickly find UI elements they needed.

• Clear usage guidelines—ensured consistency across screens.

• Faster prototyping—teams could iterate quickly without sacrificing quality.

Uniting the Team: Fostering a Collaborative Culture

Creating a Shared Design Language

The design system became more than just a toolkit—it was a bridge between designers, developers, and stakeholders. By adopting semantic naming conventions and using terminology familiar to engineers, we eliminated confusion and streamlined communication.

Weekly Syncs: Keeping the Team Aligned

To maintain momentum and adoption, I introduced a weekly design sync where I shared system updates, new components, and best practices. These meetings ensured the entire team stayed aligned and had a say in how the system evolved.

Design Critiques: Encouraging Collaboration

I also introduced weekly peer reviews, providing a space for designers to share work, discuss emerging mobile patterns, and align on best practices. These sessions reinforced the value of design consistency and collective ownership of the system.

The Launch: Bringing the System to Life

As I refined and expanded the component library, I rolled out the system in a phased approach. This allowed for gradual adoption, real-world testing, and continuous iteration.

The immediate impact:

• A more cohesive brand and app experience—UI elements felt unified across screens.

• Faster feature development—teams could build quality features quicker.

• Alignment on design goals and patterns—eliminating the inconsistencies of the past.

Ongoing Evolution: A System That Grows with Us

A design system is never truly finished—it evolves with the product and the team. To ensure Fractal remained a living, adaptable system, I implemented ongoing processes:

Regular team syncs—to discuss feedback and improvements.
Adding & updating components—to support new product features.
Optimizing for flexibility—adapting to new technologies and platform updates.

Fractal transformed the way our team designed, developed, and collaborated. By creating a system that was both structured and flexible, we built a foundation that could scale with the product—empowering designers and developers to create high-quality experiences with confidence.