In 2014, the introduction of EMV payments across London’s public transport network simplified the customer experience and created a watershed moment for the transit industry.
Littlepay saw an opportunity and was founded with the aim of becoming the world’s leading specialist payment service provider for transit, promising to simplify the complexities of transit payments. Their flexible, open, API-based platform simplifies the normally complex adoption of contactless payments for transit operators everywhere; they just had to get the word out.
This fast-growing and agile start-up has gained serious traction in the industry, delivering for some impressive brands in Europe, including the Go-Ahead Group, First-Group UK Bus, and Arriva, and has been generating significant interest across the globe in the process. To take advantage of the interest, Littlepay decided to refresh their brand and website to better reflect the capabilities of their team and what they offer.
We were very happy to be brought on board to help them realise their vision for a fresh, new Littlepay.
Mapping the user journeys
Simplicity was a core consideration from day one, forming a pillar of Littlepay’s brand strategy and, indeed, the brand and product's key promise. This need for simplicity was further supported by our competitor research, where the best-practice examples all boasted powerfully simple yet focussed brands, messaging and navigation.
But simplicity is hard earned. The technology is complex, and although Littlepay's primary audience is transit operators, it was important that anyone from passengers to potential employees could understand and navigate the website and its content. So, how do you make one website speak to multiple audiences, all with varying levels of understanding? Mapping user journeys is a good start.
We began by creating an initial site map; a proposed layout of Littlepay's website including primary and tertiary pages, links and calls-to-action. Together with Littlepay, we then added, subtracted and consolidated pages until we felt we had the simplest and most effective information architecture.
We then set out to embody some of the key audiences, exploring the site map and asking ourselves "If I were a potential employee, where would I go?", "If I were a device partner, what kind of information would I be looking for?". By putting ourselves in the shoes of the people we're communicating with, we were able to map their journey across key pages and pinpoint critical messages and calls-to-action for each, colour-coding them for future reference.
Using our newly coded site map, we were able to plan the content, messaging and visual assets for each page, with clear goals in mind for every audience.
Green means go
"All a traveller wants to see is the flash of green light on the ticket reader when they touch their bankcards. It's our job to handle everything that's happening behind that frictionless payment experience to make it possible in a fraction of a second." - Amin Shayan, Littlepay CEO
This simple but powerful insight from Littlepay's CEO Amin Shayan was a lightning bolt moment in the design process. We expressed the power and simplicity of Littlepay's offering through this green light in the 'i" of the brandmark, and this concept informed much of the subsequent brand, such as illustration, icons, diagrams and animation.
Pairing some of the tech-heavy text and diagram content with more approachable illustrations helped to explain complex concepts to potential customers with limited technological knowledge. By repurposing a combination of stock illustrations from various sources, we were able to create a unique set of key brand illustrations that tell the story of Littlepay's potential use cases, and still deliver them on time and on budget.
Considering content
A site must balance form and function, be beautiful and work hard. To achieve this, it's critical that the design and content work hand-in-hand, each informing the other.
Our digital designer, Pete, and our copywriter, Madeleine, worked side-by-side, sharing design and content updates and refining the site from all angles until it was ready to be built. This co-operative, tandem approach to the site was especially helpful when it came to producing diagrams. Explaining complex systems and processes in one simple visual was a challenge, but by considering design and copy together, we were able to create a concise and approachable outcome neither could achieve alone.
From the very beginning, the project process was very important to us. Working with Liquorice was both a transparent and integrated experience, involving everyone from the very beginning. By being embedded into the Liquorice project team, we were able to see the bigger picture sooner and this prevented any pitfalls. This way of working directly contributed to us making our delivery timelines and ultimately, the overall success of the finished product.
Leaving the station
With the new brand identity, content and site design complete and a deadline fast approaching, our superstar developers got to work building the new Littlepay site, utilising a Django-driven Wagtail CMS. Technical Director, Hammy, has written about our love for the ever-impressive CMS software, Wagtail, and this project saw it put to good use.