TELEGRAPH STYLE GUIDE
User Experience Design Intern
THE BRIEF
This was my first project whilst at the Telegraph Media Group. The Deputy Head of UX had a vision to create an in-house experience library with the following goals.
- Promote awareness and education of the toolkits available.
- Promote consistency and reuse of the toolkits available.
- Provide access to assets and code references.
- Encourage a modular design approach.
There was a lot of flexibility with this project as long as it was lightweight, maintainable and useful to people across the business.
THE PROCESS
Research
Ideate
Build
Research
An in-depth review of 12 world-leading style guides was conducted first to understand some key features and existing designs. It was soon apparent that well maintained style guides are live, code-based documents that are easily updated (by many people) or are automatically updated as components change.
As a relatively new starter at the company and joining halfway through a total site migration, bringing myself up to speed on the way the new site had been constructed was critical - these were the components and tools that would be featured in the library. To gain an overview of the content, all components were gathered and categorised.
The final categorisation of components used an adapted version of the renowned atomic model. This was due to the unique spatial containers that The Telegraph had made, adding an extra step to the widely adopted atomic principles by Brad Frost.
Ideate
A range of concepts were drawn up, taking into account what individuals from around the business would find useful. A simple navigation was implemented on the left of the browser allowing you to move between multiple atomic stages quickly. These stages were tailored according to which departments would be using them. For example, with 'colour' primarily for use by UI Designers and front end developers, hexcodes and code references were included for each item.
Interactive Page Builder 'Sandbox'
One unique addition to the Style Guide was an interactive page builder, allowing any member of any team to try designing their own page whilst conforming to the design rules laid out by the design teams. This was especially useful for new starters and contractors who were brought in, needing to construct pages using the existing toolkit available.
All 'lists' (larger blocks of content) were laid out, with rules then applied to each. This was then fed into the Sandbox. Users could drag and drop components onto a page template being guided by the rules. They could then switch from a prototying view to a high fidelity view, choosing to populate the page with content from any section (sport, business, latest news etc).
Build
The style guide was built in the prototyping code environment. This allowed components to be added as soon as they were signed off, not having to wait until they were built in the production code base. This was then shared across teams via a URL.
The assets and information was updated by editing a Google Sheets document. This meant that any team member could edit the information and images/diagrams, spreading the workload in a lightweight manner.
OUTCOME
Live, maintainable and useful style guide created.
Interactive page builder 'sandbox' created, allowing anyone to prototype new pages whilst conforming to component rules and design intent.
Helped new starters and designers build pages using components in the way they were intended.
Components were consolidated, resulting in greater consistency across the website.
SEE MORE WORK
