Rasayel Reporting 2.0

Tackled many small and big issues from first principles, helping support managers better understand their agents' performance.

Design System2023 - 2024View Live →

Overview

Linear needed a comprehensive design system to maintain consistency across their rapidly growing product suite. I led the creation of a scalable component library that would serve as the foundation for all future design and development work.

Problem

Business Goal

Rasayel is a vital communication tool for businesses to support and sell, so giving our customers clear insights into their communication is crucial. For sales teams, we were mainly covered reporting wise by data logged in to the team's CRMs (i.e. Hubspot), but for support teams, clear metrics were a blockers customers voiced increasingly, as well as a blocker closing deals for our sales team.

User Pain

We started getting more and more emails like that; many overlapping problems, some central to reporting, others just related issues. It was chaotic, customers were highlighting many gaps in our current reports & adjacent workflows — we urgently needed to discover what was valuable for us to build, and why.

Problem Discovery

After aligning with our CEO and sales team on the demand for better reports for support team for which we got clear signals. From there, I figured I needed a full picture of the problems

  1. 1. What were the key JTBDs for our customers? (e.g. why do they want reports at the first place?)
  2. 2. What were preventing them to get value out our current reports? (e.g. gaps in our reports or missing operational features?)

As a consequence, I did proceed to look at all insights we got, attempting to find patterns between whom was asking for the feedback and why.

Solution

I developed a comprehensive design system that included foundational elements, reusable components, and clear documentation. The system was built with both designers and developers in mind, ensuring seamless handoff and implementation.

Design Tokens

Established consistent color palettes, typography scales, spacing systems, and elevation patterns.

Component Library

Created 50+ reusable components with variants, states, and comprehensive documentation.

Documentation

Built interactive documentation with usage guidelines, code examples, and design principles.

Tooling

Developed Figma plugins and development tools to streamline the design-to-code workflow.

Impact

40%
Faster development cycles
85%
Component reusability
100%
Design-dev alignment

Process

1

Audit & Research

Conducted comprehensive audit of existing UI patterns and interviewed stakeholders to understand pain points.

2

Foundation

Established design tokens and foundational elements including color, typography, and spacing systems.

3

Components

Built component library starting with atomic elements and progressing to complex patterns.

4

Documentation

Created comprehensive documentation with usage guidelines, examples, and implementation details.

5

Adoption

Rolled out system across teams with training sessions and ongoing support for implementation.

Key Learnings

  • • Early stakeholder buy-in is crucial for successful design system adoption
  • • Documentation quality directly impacts system usage and consistency
  • • Regular maintenance and updates are essential for long-term success
  • • Cross-functional collaboration improves both design and technical outcomes