monospace.studio
Telanto — brand refresh and design system

Case 04 · Telanto · 2022 — 2023

Lead UX, content, brand and design system as a team of two

As a team of two — me plus one engineer — I shipped a design system, a marketing-brand refresh and the full marketing site for Telanto, holding content, brand, and product design under a single hand.

Role

Lead UX

Team

2 (Derry + 1 engineer)

Scope

Content workshop · Brand & marketing language · Design system · Marketing site · Supporting material

Status

shipped

Context

Telanto needed a coherent design language across product and market-facing surfaces. The brand was undefined where it touched product, and the marketing site was carrying the load of explaining a complex business model.

Role & team

Lead UX. Team of 2 (Derry + 1 engineer). Reported to the Telanto founders.

What I led

Three threads, intertwined:

  • Content Workshop for business framing — used to surface the messaging hierarchy and the customer language, then re-cast into product copy.
  • Marketing and brand language refresh — type, tone, identity moves that worked across product and marketing.
  • Design system and full marketing pages website + supporting material — built and shipped.

Process — three acts

Act I — Content workshop

Ran a structured workshop to land the company narrative; produced a content map that drove both the marketing site and the product copy. The method is now public — see Content Workshops, with the Figma file free.
Telanto business-model map — the workshop output that anchored the content architecture
Audience and proposition framing — the messaging hierarchy

The workshop produced a content architecture that let us empathise with the target audience and explain Telanto's value clearly, then guide them into a lead-generation funnel for the sales team.

Act II — UX, art direction, design system

From site UX flow wireframes through art direction and style guides to a full UI design system. Particular attention to typography — Telanto is a global company that will need many language sets, so the type stack had to cover wide character coverage without losing voice.

Telanto site wireframes — UX flows for the marketing surface
Typography studies — selecting a type stack with global script coverage
Type tests — characters, weights, and rhythm in context
Imagery direction — the brand's visual register
Composition placeholders — recurring block patterns the system can compose
Telanto Design System — components and tokens in Figma
Dark-mode treatment — the system carried into a second theme
Dynamic header and banner system — for A/B testing and audience targeting

Attention also went into A/B testing and audience targeting through dynamic header and text content based on user profile, so the thread from media campaigns through to lead gen stayed coherent.

Act III — Ship

Using the Telanto product content plus the art direction and design system, the website took shape — a JAMStack site with a content-block CMS so Telanto could mix-and-match dynamic content and target audiences more precisely. The backend connects to the front end for live updates and promotions tied to their Challenges and customer experience stories. Responsive throughout.

Final artboards — the marketing site shipped
Responsive — the same layout system across breakpoints
Executive page — audience-specific landing
Careers page — recruitment surface using the same system
Coaching page — programme listing
How it works page — explainer flow
Challenges page — the lead-gen funnel for the sales team
The live site is at telanto.com.

Outcome

  • Shipped: brand refresh + full marketing site + design system + content language + supporting material.
  • Operating signal: a 2-person team carried what is normally a 5–7 person scope, because content + brand + product + system were under one author.

What I'd do differently

I would package the content workshop as a reusable artefact earlier: a named offer, a cleaner handover deck, and a repeatable decision log that founders could keep using after the site shipped. The workshop was already doing more than copywriting; it was turning a complex product story into operating language. I would now make that method explicit from day one, so the design system, marketing site, and product language all inherit the same strategic spine.

Next case

bikesoup →