ITRS Uptrends

A BIT ABOUT THE PROJECT

ITRS Uptrends powers teams running web services in production, offering website, API, web-application, and real-user monitoring from 233 cities worldwide. They reached a point of organisational growth where their digital ecosystem, spanning a marketing site, landing pages, and platform UIs, had outgrown its fragmented design approach.

The objective: develop a shared digital component library that would deliver:
– Consistent brand expression across all digital touchpoints
– Scalable UI architecture enabling faster build and iteration
– Tight integration between design, development and marketing teams

uptrends.com

DESIGN FOUNDATION

Since the library underpins the entire digital ecosystem, I grounded the work in ITRS Uptrends’ core brand values: intuitive, reliable, high‑performing, and future‑facing. Within the platform’s offering, UX clarity and technical robustness are critical.

From there I defined design‑tokens (colours, typography, spacing), atomic components, patterns (cards, grids, forms), and extended to page‑level templates.

Key foundations included:
– A colour palette derived from the brand
– Typography scale for responsive use (desktop, tablet, mobile)
– Spacing and layout system (8px base, modular grid)
– Usage guidance to ensure consistency and ease of use

DESIGN PROCESS

01 DISCOVERY & AUDIT

We began by auditing all current UI assets; marketing site templates, product screens, dashboard flows, campaign components. This revealed duplication of similar components, gaps in responsiveness and new conversion opportunities.



02 STRUCTURE & ARCHITECTURE

Next I defined the component library architecture:
– Atoms (buttons, form inputs, colour swatches, typographic headings)
– Molecules (input groups, cards, lists)
– Organisms (navigation bar, hero sections, dashboards)
– Templates & page layouts

03 UI KIT & FIGMA LIBRARY

I built a shared Figma Library with components and variants. The library included usage guidelines, responsive variants (mobile/tablet/desktop), and interactive prototypes.



04 HAND-OVER & ROLL-OUT

I collaborated closely with the front‑end team to ensure components could map directly into code (React/Storybook, or equivalent) and set the components up for development-ready inspection. I also ran onboarding sessions for design, product and marketing teams so all stakeholders understood and adopted the system.

THE SOLUTION

The result is a centralised, modular component library enabling ITRS Uptrends to build new digital assets with speed and consistency.

Highlights include:
– 50 distinct UI components covering marketing, product and campaign use‑cases
– Responsive design built‑in: every component adapts for mobile, tablet and desktop
– Clear variant states: colour, size, iconography, content‑variation
– Brand tokens implemented across colour, typography, spacing

Efficiency gains:
– Design‑to‑development handoff time reduced by 40% (estimate)
– Marketing and campaign builds now reuse modular library components
– Consistent UX across the product and marketing site, reinforcing brand trust
– Developers benefit from cleaner architecture and fewer ad‑hoc UI builds