Creating an accessible home to inspire digital collaboration

Project: Brand vision, digital design principles, UX and UI design

Client: London Office for Technology & Innovation

Sector: Local Council/Government

Brand articulation, UX and UI Design, Wordpress development

The challenge

Our Approach

LOTI operates within the structure of London Councils and has an audience spanning local authority officers & elected members, tech-for-good organisations, technology companies as well as the general public. In order to really get to know the LOTI team and understand their vision, we kicked the project off with a series of remote workshops.

Usually, our workshops would be face-to-face and involve a lot of post-it notes, sketching, cups of tea and snacks, but due to the COVID-19 pandemic we instead used tools like Zoom, Miro and the humble spreadsheet to help flesh out the brief. We could tell right away that, although LOTI wanted a website that would adhere to government accessibility guidelines, they were not your traditional public sector organisation.

A series of remote workshops informed the UX
A series of remote workshops informed the UX

Visual Design

The main take-away from our workshops was that the website had to be inspiring and reflect that LOTI do things differently. They are quite unique in the way they work - they are all about collaboration, sharing knowledge and getting things done. The website had to demonstrate this impact, bring about a greater awareness of local government work and help people understand who they are and how they can help.

LOTI already had a logo and brand guideline that worked beautifully for printed brochures, PowerPoint Presentations and PDFs, however there were some elements that didn’t work so well on-screen. For example, the primary brand colour with white text was not high contrast enough to meet accessibility guidelines! We wanted to keep the bright rainbow palette that LOTI had already become well recognised for, so we introduced lots of white space and expanded the palette to include more tones and combinations with higher contrast.

A selection from our design system: clear underlying principals to guide the design process
A selection from our design system: clear underlying principals to guide the design process

We used shapes from the LOTI wordmark itself throughout the site to add more personality and help it look more energetic and fun, and we designed blog post and project modules to visually represent their in-real-life collaboration process, which, like here at Furthermore, involves a lot of post-it note and white-board action.

The LOTI homepage that we designed.

LOTI has loads of amazing resources and useful tools, and we wanted to make sure they were easy to find and access without being a boring list of text links. We created a visual identity for resources using the “kinetic element” from the core brand guideline. The bright and bold patterns help to differentiate these modules easily from other content on the site.

Screens from our detailed UI designs for LOTI.

We found that at the heart of LOTI was it’s amazing team, so it was also really important to feature Onyeka, Eddie, Genta and Jay and the people they work with through the imagery on the site. By using real images from their workshops, events and projects, the people and culture shines through and show that they are approachable.

“May I say a huge thank you to you and all the team for a really excellent job on our website - we’re delighted with it and really enjoyed the process of working with you. We could tell just how much thought and consideration went into it every aspect.” — Eddie Copeland, Director, London Office of Technology & Innovation
Next Up:

More case studies:

Get in touch with the team to discuss your idea, project or business.

workshop session for a service design project
service design workshop with Furthermore teamLarge Furthermore logo in white
The Telegraph App
Providing news on the go