Skip to main content

Navigation

  • Client impact
  • Writing

AI Solutions

  • AI Systems
  • AI Development

Software teams

  • Design Systems
  • Product Design & Engineering
  • API Platforms
  • View all services for software teams
Get in touch
  • AI Systems

    Model-agnostic AI systems and agents that do real work

    AI Development

    Custom apps and tools built with AI-enabled engineering

  • Design Systems

    Depth of experience that few can match

    Product Design & Engineering

    Experts in cross-functional collaboration

    API Platforms

    Node.js, React, & GraphQL at scale


    View all services for software teams
  • Client impact
  • Writing
  • Contact

Writing · Mar 20th, 2023 · 4 min read

Boris Bozic avatarBoris Bozic avatar
Boris Bozic

Route Map - a lightweight schema for defining a UX blueprint

A Route Map is essentially a lightweight URL schema for an app or experience. This is how we use it.

Services discussed

  • UX & UI Design

Tagged in

  • Method

Let’s talk process and methods.

We recently published our basic methodology for making good and compelling software, and alongside the principles, we have an extensive playbook/toolbox for tackling different kinds of problems when making software.

We’ll be publishing these as we go, but for today, here’s a quick look at one of these tools – a Route Map.

A Route Map is essentially a lightweight URL schema for an app or experience. We think of them like a UX blueprint.

An example to illustrate: say we sell a suite or products to professional service companies who themselves have clients – eg. law firms or similar. Consider the administration needs of this setup:

  1. Account administration – management of the relationship between software provider and the prof. services company.
  2. Org administration – management of organisation matters by eg staff members
  3. Client experience – the app used by clients of the prof. services company.

First, we need to describe this conceptually – that is, what are the jobs that fall under each of these three top level concerns.

How might we draw the product lines? Account Administration: admin-centric management of account level concerns. Org Administration: Staff-centric management of Org-level concerns. Makes org admin easy. Client experience: Client-user-centric. Simple, polished. Makes the client org look good.How might we draw the product lines? Account Administration: admin-centric management of account level concerns. Org Administration: Staff-centric management of Org-level concerns. Makes org admin easy. Client experience: Client-user-centric. Simple, polished. Makes the client org look good.
Mind map diagram of Administration with branches of Account Admin, Customer Org Admin, Client Experience, Emails.Mind map diagram of Administration with branches of Account Admin, Customer Org Admin, Client Experience, Emails.

That’s useful ☝️ Now we can start to categorise related jobs and start inferring an IA and UX. But this conceptual view lacks opinions about UX, UI or technical design concerns.

So we can articulate this same thing in a route map to start to express some of these opinions – not to lock them in, but to facilitate the conversation and help make trade-offs between the UX / engineering / business perspective which are in a (hopefully healthy) tension.

A route map – a light-weight URL schema – is a bit special because it’s accessible enough to all practices in a cross functional team. To create it, we use a small set of basic concepts...

Route map legend displaying icons for Page/Scene/Route, Overlay, User action, Display of information, External linkRoute map legend displaying icons for Page/Scene/Route, Overlay, User action, Display of information, External link

With that, we build up a picture that looks like this:

This is an example of a Route Map ☝️This is an example of a Route Map ☝️

This is an example of a Route Map ☝️

Now we are beginning to express initial opinions about the UX and IA of this system.

We’re also starting to think about UI functionality by addressing CRUD patterns. Eg. we think a user should view a list of contacts on the Contacts page. And perform bulk actions on it in the same page. But should edit the details of the contact on a separate page.

Subset of the route map diagram showing individual items and their associated concept type (Overlay, User Action, etc)Subset of the route map diagram showing individual items and their associated concept type (Overlay, User Action, etc)

The cross functional team can shape these opinions and iterate on it together, bringing in their respective perspectives.

Like most artefacts, a route map is a point-in-time artefact. It takes forward the shared understanding of a cross-functional team that is designing a new product or experience.

Related: @GiselleStidston wrote a piece on this topic titled All about artefacts. Worth a read.

A fleshed out route map becomes a UX blueprint for:

  • interface prototyping
  • app scaffolding and draft APIs
  • product and business stakeholders, who can more easily picture the product and refine the ambition and scope

Finally – why not just draw a typical IA diagram? You can if that’s your jam. Our view is that defining an IA is a process best informed by synthesising multiple takes on a problem – conceptual, route-based, flows, etc. But that’s another thread.

That’s all on Route Maps. Thanks for reading. We’re publishing our ways of working and how we build shared understanding in our Method page ✌️

Services discussed

  • UX & UI Design

Tagged in

  • Method
Boris Bozic avatarBoris Bozic avatar
Boris Bozic

Co-founder and Head of Design at Thinkmill. Product designer. Swimmer. Runner.

Related content

  • Your agent believes that docs folder

    article

    September 2026·8 min read
  • Designing beyond the median user

    article

    June 2026·10 min read
  • A behavioural framework for the monsters in your team

    article

    May 2026·5 min read
  • Designing with APIs: A practical guide for beginners

    article

    May 2025·
    (opens in new tab)
  • Storybook and Mock APIs: A Powerful Prototyping Combo

    article

    May 2024·12 min read
  • Unleashing Designers with Tailwind CSS

    talk

    April 2024

Have an idea to explore?

Get in touch

Footer

Thinkmill is a member of the Tech Council of Australia(opens in new tab).

AI Solutions

  • AI Systems
  • AI Development

Software teams

  • Design Systems
  • Product Design & Engineering
  • API Platforms
  • View all software teams

Client impact

  • ELMO
  • Tiimely
  • Atlassian
  • Reckon
  • AnywhereWorks
  • View all client impact

Open Source

  • Keystone (opens in new tab)
  • Keystatic (opens in new tab)
  • React Select (opens in new tab)
  • Classnames (opens in new tab)
  • Manypkg (opens in new tab)
  • Changesets (opens in new tab)