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

Client: London Office for Technology & Innovation

Sector: Local Council/Government

Responsibilities:
Brand articulation, UX and UI Design, Wordpress development

The challenge

• Host all relevant information about LOTI’s central team, members and projects, reports and deliverables in a coherent and engaging way.
• Increase brand awareness.
• Ensure accessibility and improve online presence with a modern, and mobile responsive website.
• Reduce public ambiguity with regards to LOTI subject matter expertise and projects by acting as a source of information through resources and blogs.

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.

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.

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.

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.

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.