FT Design Basics #1: Why we finally built a UI Kit

Photograph by Robin Glauser on Unsplash

We never set out to make a design system per se—we kind-of already had one. Did you ever hear that joke: How many designers does it take to make a design system? The punchline is eternally unclear, but currently around four, or five, give or take, plus engineering…

Note: this post will only provide a brief update of our Sketch UI Kit, at a later date I will run you through the history of design system thinking at the FT, what Origami is, and why it both is, and isn’t, a Design System proper.

We recently decided to review the fundamental efficiencies in our design processes. We knew we had a beautiful product and a strong brand — our pink pages an example of brand recognisability since 1893 (when we introduced the famous salmon coloured paper—at the time to save money 💷). However, we also knew that our designers in 2019 were pulling their hair out not being able to find assets to make an article page to match our registries.

To tackle this problem we formed a team of product designers, with various backgrounds: both from UX and UI; from product and the newsroom; not forgetting an amicable engineer from our Origami team. For most, this was a side project formed from need — the greater portion of their time being dedicated to stream work (or squad work depending on your choice of terminology). To keep it from being too unruly, we declared ourselves the “Design Basics”, not an unintentional reference to Mean Girls, tasked with tackling foundational problems first, based on what our designers were actually calling out for. Think colour palettes, typography, and fundamental components like buttons and headers. We came to the realisation that this project wouldn’t be a reinvention of what we already have, it would be a streamlining of what is already in existence.

Help us, help you (we asked some questions)

Talking to our designers (dare I say Users), through good-old-fashioned casual 1–2–1's, plus an official google form, some predictably common themes arose:

• Our existing tooling was too abstract and lacking in context.
• Designers would often be working into or iterating existing pages or features.
• The team spends too much time recreating the same design elements for prototypes. Often times resorting to screenshots.
• There is a lack of understanding or agreement of how our grid and breakpoints work.
• Not knowing what is the truth, or what is the reality.

With this in mind we decided to start simple, to get our house in order, and fix our internal tooling, at this point based in Sketch, the software of choice for the Financial Times at this moment.

Note: The term Design System is unbelievably subjective, and whilst definitions do return in google searches, mine is as follows: An approach to managing a team’s design workflow, that can be as big or as small as necessary to streamline the process and help with things such as: bringing design closer to development, also known as reality; to create a space for real creativity (as opposed to eternal hacking and inspecting of existing design assets); to provide truth and confidence for designers working on our product to produce great prototypes.

So what did we actually build? A Sketch library, and a downloadable grid file — No wheels were reinvented.

Imagine yourselves in the shoes of a classical painter, think yourself a Rembrandt, or Basquiat, O’Keefe, even Bob Ross 😅. To get to work, you require two basic things:

• Your palette aka a Sketch Library (your paint & pencils). For us this currently includes: Typography (based on our pre-existing type-scale), the Colour palette, Spacing, Icons, and a few components such as Buttons, Headers and Footers.

Photo by Robby McCullough on Unsplash

• Your canvas aka the UI Kit (The thing on which you apply your design). For us this is our grid and our breakpoints to which you can apply styles and components for a library.

Photo by Nikola Johnny Mirkovic on Unsplash

Try it yourself

We released our new UI Kit to the world in our Show and Tell session a few weeks ago, and the adoption rate from designers seems healthy: it is being used and we are receiving feedback ideas for features and bugs alike. We plan to keep adding new features to it as time progresses, and build new things as they are recommended. If you would like to try it yourself the Origami team has given us some real estate to download directly from their homepage. If you have a sketch cloud license (no matter who you are, or where you work) you can test it out here.

That’s all folks!

Team: Mark Limb, Simon Coxon, Caroline Nevitt, Lee Moody and myself.

p.s. If you have a question about our design system, pragmatic or philosophical, please email me at luke.griffiths@ft.com and I may feature it here on our very own P&T blog. If you’d like to submit a definition of the word Design System for our next post, do so in under 100 words, from your perspective. Please attach your name, job title & company, and location.