0%

Tile Design System

ProjectDesign System
Year2022 - 2023
EmployerMosaic Buildings
LocationPhonix, AZ
Description

Design system for Mosaic Hub, an internal tool to help General Contractors to manage the construction process

Consultório ID Mobile Mockup

Problem

Mosaic, a fast-paced construction startup, was constantly launching new projects. As the company scaled, they struggled to rapidly build or iterate on new features, which led to errors, higher costs, and low adoption of Mosaic Hub, their internal management tool.

Solution

Developed a robust design system to accelerate the engineering process, enhance user experience, and drive company-wide adoption.

Impact

co_present

+ 35%

faster engineering speed when building new features

trending_up

+ 70%

consistency and speed improved with the documents design system

autorenew

21% increase

in Mosaic Hub's adoption after redesign with Tile

auto_awesome_motion

More than 30 components

designed and coded

Key achievements

  • Successfully established a scalable and robust Design System.
  • Streamlined the design process, enabling faster iteration and delivery of projects.
  • Enhanced user experience by providing a cohesive and consistent interface.
  • Improved collaboration across teams through clear guidelines and documentation.
  • Implemented patterns for office documents that are used by the entire company, increasing the consistency and efficiency when creating new documents.
  • As a designer who can code, I could bridge the gap between design and engineering, streamline the process, and ensure visual quality and speed up the development process.
Schedule Before
Check out some examples of the components and patterns I've designed and coded and also my approach to building them.

Development Process

1. Audit and planning
  • Conducted a detailed audit to identify essential components involving design, product and engineering teams.
  • The result of this phase was a list with all components that would be created and coded.
2. Setting the foundation

One of the problems we wanted to solve was the generic look and feel and the lack of consistency across the product.

To solve this, we created a nice foundation really connected to the brand without exaggerating on the amount of tokens. Keep it simple to avoid inconsistency.

Schedule Before
3. Component Design and testing
  • Designed components with scalability and reusability in mind following the list from the previous step.
  • Testing in Figma with real content. This helped to create components and patterns that would deliver the best experience.
Schedule Before
4. Documentation and implementation

Created detailed documentation and usage guidelines to support designers and developers within the product.

Schedule BeforeSchedule BeforeSchedule Before

Components and patterns coming alive!

Here are some examples of the components and patterns being used in some pages of the product.

Schedule BeforeSchedule BeforeSchedule BeforeSchedule BeforeSchedule Before

Conclusion and final thoughts

The development of the Tile Design System was a critical milestone for Mosaic, enabling the team to keep pace with rapid product iterations and deliver a polished user experience.

The strategic approach to component design and implementation ensured that the system was both scalable and user-friendly, laying a solid foundation for future growth and innovation.