Changing the way we work and pay

Screen designed



Brand awareness

Acquired by


The Challenge

Traditionally, payroll isn’t a fun or glamorous industry. KeyPay intended to change that.


We aimed to help KeyPay find the right balance between the complexity of the payroll world as well as the fun and ease their customers were seeking. Moreover, we intended to communicate KeyPay’s vision through a new fun and thought-provoking brand experience.

Image showing Keypay's UI

The Proposal

Raw.Studio created an experience where all of the processes required for payroll would be combined in one place. This solution would let KeyPay’s customers save hours of work and remove the manual human work.

  • Competitor Analysis
  • User Interviews
  • Branding workshop
  • UX Design
  • Project Management
  • Web development
  • Brand identity
  • Brand Guidelines
  • Design System
  • Wireframes
  • User Interfaces
  • Prototypes
  • Responsive Web Design
  • Motion Design
Web iOS Android
ServicesProduct Strategy at Raw.Studio

Product Strategy

ServicesMarket/User Research at Raw.Studio

Market/User Research

ServicesUI Design at Raw.Studio

UI Design

ServicesUX Design at Raw.Studio

UX Design

ServicesBranding at Raw.Studio


ServicesDesign Workshop at Raw.Studio

Design Workshop

ServicesWeb Development at Raw.Studio

Web Development

ServicesConversion Rate Optimisation at Raw.Studio

Conversion Rate Optimisation

Services Product Strategy at Raw.Studio

Setting the foundation

Research & strategy

We’ve completed a series of exercises to establish the company’s values and mission. KeyPay wanted to differentiate themselves from their competitors, introducing a new and exciting way to payroll. Identifying the resemblance among KeyPay’s competitors has let us on the path of pushing the brand to new heights.


In order to identify the areas we could improve in the product, we conducted a series of UX practices such as product audit, user journeys, interviews and more. These practices set a clear vision of taking the payroll process to a new, advanced level.

image showing kaypay branding positioning matrix
Services Branding at Raw.Studio

Brand renovation

Conceptualising the brand

KeyPay wanted a symbol that visually communicated that they provided a streamlined payroll experience that was fun and easy.


In Chinese Feng Shui, the money frog attracts wealth and prosperity. This aligns with KeyPay’s purpose of facilitating money flow and helping people get paid. The frog’s foot in the logo also doubles up as the letter ‘K’, which stands for KeyPay.

image showing the keypay logo upgrade

Designed for scalability

KeyPay’s new identity needed to be scalable with its family of brands. Using the same font allowed us to maintain the fun & approachable look and feel, and applying the same logo composition helped create cohesiveness in the family of brands.

image showing the multi brand of keypay

Giving the brand a new face

There’s no better way to give the brand a new face but to give them new faces! The primary mascot, Bertie the frog, was introduced to humanise the brand and align with their new fun and approachable look & feel. The secondary mascot, KeyBot was designed to illustrate KeyPay’s tech and automation capabilities. Together, these characters form an easy, smart and efficient offering with a fun-loving attitude

image showing the brand mascots

Bringing the mascots to life

In order to accommodate various communication channels, we brought KeyPay’s characters to life. We animated each mascot, giving them purposeful movements as well as facial animation that can synchronise with any voice over.

Connecting with KeyPay’s customers

We designed an engaging educational video that breaks down KeyPay’s services, showcases brand values through visual language and illustrates all of our newly designed mascots.

KeyPay UK Intro

Play Video
video thumb keypay - Raw.Studio
Services UI Design at Raw.Studio

New user-focused interface

User interviews revealed that existing customers found the old software clunky and hard to use. It was missing the fun element KeyPay was all about. We’ve applied the insights discovered in the research phase and developed an exciting product that made users feel empowered.

New Dashboard

KeyPay New - Raw.Studio

Old Dashboard

KeyPay Old - Raw.Studio
KeyPay Dashboard New vs Old
Frame 5990 - Raw.Studio Frame 5992 - Raw.Studio

Our systematic approach

One of the challenges KeyPay wanted to address was reducing design and tech debts. To ensure that internal dev and design teams are efficient, we needed to re-structure how they approached work. We worked closely with the client’s internal teams to create a well-organised system that can be applied throughout all product areas in a structured way that eliminates errors and improves loading times.

KeyPay Brand 01 - Raw.Studio
KeyPay Brand 03 - Raw.Studio
KeyPay Brand 02 - Raw.Studio
KeyPay Brand 04 - Raw.Studio

The result

I worked with Raw.Studio for a little over 2 years and in this time, was inspired by their design tenacity and curious nature. They have a unique ability to understand the personality of a brand and translate this into an impactful design that truly represents the nature of the organisation – a skill that is extremely rare and highly valued. Their thirst for learning new things and challenging the norm is also something that inspires the broader team, with no task too great or too big for them to tackle. I highly recommend Raw.Studio for any organisation in need of design expertise and solid branding, and also as a great contributor across broader marketing areas and thinking outside the box.

Read the full story →
profile keypay - Raw.Studio

Sarah Yancey

Head of Marketing @ KeyPay

Next case studies

Maqro - Disrupting how we invest

Mobile App Portal Responsive Website Web App

Investment platform set for success


UX Design
UI Design
Web Development
Design System
Conversion Rate Optimisation
Screens Designed1000+
View case study

Soho - Find the right home match

Desktop App Mobile App Responsive Website

Find the right home match


Design System
Design Documentation
Sample Collateral
Visual Assets