Case study

Reconnecting banks and small business through payments

Services

UI/UX
Design system
Visual design
Prototyping
Art direction
Brand development

Client
Pollinate International
Agency
Class35
Role
Lead Designer
Case study hero image
Client
Pollinate International
Agency
Class35
Role
Lead Designer
Deliverables
UI/UX, Design system, Art direction, Visual design, Brand development, Prototyping
A payments platform that helps merchants reach their goals

Small businesses play a vital role in our communities. They form the backbone of local and national commerce and serve vital needs of their end users. Pollinates mission is to reconnect banks and small businesses through a payments platform that enables them to thrive.

Our approach needed to flexible and agile and encompass both initial merchant needs and allow for future scaling and ultimately moving towards Pollinates long term ‘White label’ strategy.

Challenge

We were tasked with designing a platform that met the evolving and diverse needs of these SME’s while simultaneously creating a seamless user experience. This would form the foundation of the Tyl product.

Outcome

We designed and launched the ‘Tyl’ platform with Pollinates UK based partner NatWest. This has established Tyl as a prominent payments provider in the UK market while building out the core MVP of the product.

Design systems thinking

Key to both the MVP and future iterations of the product was the need for an established design system. This needed to establish the core interaction, design and visual components of the product for the launch of ‘Tyl by NatWest’ in the UK. However critically it also needed to reflect a number of other core requirements. The most important of these was to design the system in a way which would allow it to flex, evolve and be iterated on as Pollinate engage and partner with banks in other markets.

Tyl Design system structure
The design system
An atomic approach

An exhaustive list of core components was created by adopting an ‘atomic’ approach to the system. This in turn allowed the establishing of core atoms, molecules and organisms.

Examples of modules that make up the Tyl design system
Examples of data modules that make up the Tyl design system with a focus on data visualisation
Atoms, molecules & organisms

Designing the Tyl portal

At the heart of the experience is the intuitive Tyl portal with the key tools to understand, manage and grow a business. Designed to be broadly self service it aimed to minimise the need for call centre contact. That meant giving merchants the means to understand their transactions and settlements, apply for finance or manage a digital loyalty program.

The Tyl portal
Expanding the merchant base

After the success of the initial launch of Tyl by NatWest we continued to iterate on our designs, work through the product roadmap and design new features. One of these was ‘Non-banked’ which would allow our partner bank NatWest to onboard merchants outside their immediate customer base.

Prototype

Document upload

This prototype shows a basic upload for Non-banked merchants. It is intended to show the basic mechanic, design layouts and give a feel for the various interactions. This would then be repeated should the user be required to upload multiple sets of documents.

View Prototype
Exploring merchant insights

One of Pollinates core goals is to provide merchants with the services and insights to manage and ultimately allow their business to flourish. As part of this feature we developed a proof of concept for on the go insights which we then tested with merchants. These were then iterated based on feedback and an MVP version was pushed live for merchants to use.

Tyl Insights proof of concept mobile designs
Insights (Proof of concept)
Complex business structures

It seems like an obvious thing to say but SME's vary wildly in both the way they are set up and consequently how they are run. This could be down to preference, necessity or a bit of both. So with this in mind another core feature we have been working through is dealing with more complex business structures that go beyond a single store or settlement. This is aimed at allowing the merchant flexibility in how they set up their account.

Examples of complex business scenarios
An animation exploring the design of different combinations of settlements components
A modular approach to settlements
Example screens

Developing visual assets

As part of our ongoing design work we were also responsible for developing the overall Tyl brand assets and postioning. Deliverables such as custom iconography sets were developed from scratch to sit alongside other assets such as illustrations and brand photography.

Design of the map icon as part of the custom Tyl icon set
Design of an insight icon as part of the custom Tyl icon set
Design of a secure browser icon as part of the custom Tyl icon set

The approach was to design a set of clear, identifiable and unified icons that shared a consistent style. We opted for a clean, lightweight and precise approach with outline shapes and sparing use of fills.

Pixel grid for the design of the iconsTyl icon set icon
Pixel grid for the design of the iconsTyl icon set icon
Pixel grid for the design of the iconsTyl icon set icon
Pixel grid for the design of the iconsTyl icon set icon
Pixel grid for the design of the iconsTyl icon set icon
Pixel grid for the design of the iconsTyl icon set icon
Pixel grid for the design of the iconsTyl icon set icon
Pixel grid for the design of the iconsTyl icon set icon
Pixel grid for the design of the iconsTyl icon set icon
Pixel grid for the design of the iconsTyl icon set icon
Pixel grid for the design of the iconsTyl icon set icon
Pixel grid for the design of the iconsTyl icon set icon
Pixel grid for the design of the iconsTyl icon set icon
Pixel grid for the design of the iconsTyl icon set icon
Pixel grid for the design of the iconsTyl icon set icon
Pixel grid for the design of the iconsTyl icon set icon
Pixel grid for the design of the iconsTyl icon set icon
Pixel grid for the design of the iconsTyl icon set icon
Pixel grid for the design of the iconsTyl icon set icon
Pixel grid for the design of the iconsTyl icon set icon
Pixel grid for the design of the iconsTyl icon set icon
Pixel grid for the design of the iconsTyl icon set icon
Pixel grid for the design of the iconsTyl icon set icon
Pixel grid for the design of the iconsTyl icon set icon
Suite of brand assets

Additionally a whole suite of brand assets were developed to really flesh out the brand executions and create a well rounded brand. These included deliverables such as decks, legal documents, letterheads, and business cards.

A visual showing visual assets such as branding decks, printed collateral and Emails
Building out a full suite of assets

White label thinking

With the success of Tyl by NatWest in the UK, Pollinate plan to expand and launch Tyl in other markets. This required us to focus our design approach on an adaptable design that can be tailored and customised to a specific context and brand.

White label applications