caraer
A UX/UI, design system, repositioning, and product development project for Caraer. I rebuilt the design-file foundation while developing the product, creating reusable components that improved consistency, enabled whitelabeling, and reduced development time.
Client
Caraer
Year
2025
Project type
UX/UI, Design Systems & Product Development
Credits
Elliot Matti
UX / UI
Design System
Repositioning
Product Development
Problem
Caraer grew without a shared design system. After moving from Adobe XD to Figma, the lack of structure became clear: components were difficult to organize, new elements caused errors, and the same icon button could look different across features.
Role & Scope
I shaped the UX/UI direction and built the system alongside the product, covering foundations, style guides, reusable components, component levels, whitelabel logic, and collaboration with development.
Outcome
We created a complete design system while developing the product. It improved consistency, reduced development time, supported developers, and enabled client rebranding through controlled changes.
Context & Constraints
The challenge was to create a coherent system for an evolving product without slowing down its development.
◉
Without a shared system, existing components were difficult to maintain and new ones easy to misinterpret.
◉
The move from Adobe XD to Figma exposed inconsistencies in components, styles, and interactions.
◉
Components needed to work across different product levels and feature requirements.
◉
The system needed to support client branding without rebuilding the platform.
Process
01
Discovery & Problem
We mapped poor components, recurring errors, and visual inconsistencies. The same icon button could look different across features, making the missing foundation a product risk.
02
Research & Principles
I studied established design systems, focusing on foundations, naming, component logic, and reuse. This gave Caraer a clearer and more maintainable direction.
03
Ideation & Creation
We rebuilt the design file around real product needs. Style guides could be replaced easily, allowing the platform to be whitelabeled through controlled changes.
04
Development Collaboration
I worked with development to understand how components would be reused in different conditions. This helped us anticipate errors instead of fixing them after implementation.
05
Iteration & Refinement
The system evolved with the product. We refined components around new edge cases, improved usability, and kept design and development aligned.
Design Decision
System First vs Direct Migration
We could move the existing project from XD to Figma and build on top of it, or establish the system first and let product work strengthen it.
Option A
Move the project from XD to Figma as-is
Option B
Build the design system first, then design through it
Chose: Transfer the project into Figma
We unfortunately made the wrong decision here as we moved the files first instead of starting from a clean slate.
Design Decision
Design Priority vs Development Priority
The product needed to balance visual quality with reliable reuse and implementation.
Option A
Prioritize design direction first
Option B
Prioritize development feasibility and reuse
Chose: Development priority
Development priority guided the decisions, with design following through regular collaboration. This kept the system practical and grounded in real product conditions.
Learnings
◉
Establish the product foundation before expanding the design system. It clarifies what should be reusable and what should remain specific.
◉
Systems become stronger when built with development. Shared decisions reveal constraints early and prevent inconsistencies.
◉
Whitelabeling works best when planned from the beginning. Strong foundations allow major visual changes without rebuilding the experience.
◉
Component levels matter. Different degrees of complexity make the system more useful across features. Especially if design is tackled in the right order.
What I'd do differently
◉
I would map the product foundation earlier in FigJam, including its structure, key flows, and future opportunities.
◉
I would use that map to identify future components, prepare current design files and anticipate more edge cases before implementation.
◉
I would define the relationship between product and component decisions earlier to reduce rework.
◉
I would establish clearer governance with development around reusing, extending, and introducing patterns.
Next project
