planet payment
Planet Payment site & design system
10 months
•
London & remote
Planet Payment was a newly formed celestial formation, requiring a new site to bring together recent acquisitions in the payments, hospitality and retail sectors. As a UX and UI designer, I joined the project following the initial MVP to lead the continuing discovery, design and development of new pages. Eventually, I played an instrumental role in pushing for and creating a scalable, more responsive design system that allowed for better consistency, quality and speed of delivery.
UX design
UI design
Design systems
Design ops
Key bits
Aims
Migrate online services from newly acquired satellite business into one place.
Decrease drop-off between landing and contacting sales team.
Increase recognition of new Planet brand with coherent and cohesive design.
Pains
Planet Payment has acquired a huge number of services that may be difficult to reconcile in the mind of potential customers.
Until now, website has received very few visits, and even fewer completions.
Limiting factors
Must be CMS-able within Drupal for reusability and scalable use.
Only a short engagement for the amount of functionality required.
Deliverables
A full set of designs for the pages that would comprise the core website.
CMS-friendly components in Drupal with which the client can expand their offering.
Documentation for new pages and components to support proper use.
The
Design
the goal
Bring together Planet's new aquisitions in one single, scaleable site.
Big
Outcomes
What am I most proud of?
Faster outputs, better design
Moving to a responsive design system model early on in the project allowed us to create more responsive, more accessible designs faster with greater consistency.
New accessible brand colours
Building enough trust with the client and creative director to propose an adjustment to the brand colours, to allow for digital accessibility, felt huge.
Scaling a client team
When starting the project, our ways of communicating information were disparate and disjointed. I set up new design operations that the client could later take forward to scale their own team.
The
Process
Design
Audit
Coming into the project my first port of call was a design audit to asses the maturity and readiness of the team's product, process and capabilities. What I found were some very actionable areas of opportunity:
Design gaps
Paragraph text
No design specs
No mobile specs
No reusable components
Limited foundation guidelines - colours, typography, spacing tokens etc
Process gaps
Paragraph text
No formalised design handover
No design review, QA etc
Colour palette
New typography system
Spacing tokens
Download colour palette specs
Magic
Moment
I made the case to adjust the client’s primary brand colour in order to meet AA accessible contrast on pure black #000000, white #ffffff and also the darkest and lightest gray tones (#202020 & #F9F9F9 respectively) in our palette. After making the case, the client’s creative director was happy to adjust their primary colour across the business to accommodate this.
1. Collated elements of existing designs
I first took all existing designed elements and brought them together to make sense of them, grouping and arranging them into what could eventually become atoms, molecules, patterns etc...
Point 1
Point 2
Point 3
Point 4
Point 5
Point 6
Point 7
Point 8
2. Identified current breakpoints
I first took all existing designed elements and brought them together to make sense of them, grouping and arranging them into what could eventually become atoms, molecules, patterns etc...
Point 1
Point 2
Point 3
Point 4
Point 5
Point 6
Point 7
Point 8
3. Fill in the gaps
I then identified which basic components were missing from the existing designs and thus had to be made from scratch, creating a backlog of refactored components and new components.
Point 1
Point 2
Point 3
Point 4
Point 5
Point 6
Point 7
Point 8
03
New responsive grid
The current responsive grid chosen had significant room for improvement. Breakpoints were at 320, 1180 and 1600px, with no tablet view. We adjusted to 320, 768, 1024 and 1280px, with the specs illustrated.
Paragraph text
4 breakpoints
Light & dark background
Mobile vs desktop behaviours
Reuse of new foundations including spacing, colour and type tokens
Download new grid spec sheet
Magic
Moment
The client had decided to remove the tablet breakpoint, based on data indicating that ~0.5% of users were browsing from a tablet device. Going back into the data, I was able to illustrate that actually the percentage of users browsing from a vw size of between 600-1100px was upwards of 35%! All of these users were getting a mobile experience, shoehorned into a tablet or small desktop-sized display. This allowed us to confidently make the case for new breakpoints.
The
Challenge
Handoff
Design to dev handoff was disjointed. A sole designer was given minimal time to create non-smart pages in Figma, while handover looked like developers eyeballing Figma wireframes and building them ad-hoc in Drupal.
Communication
Connection between design and development teams was heavily stifled. Direct communication was replaced by over-the-wall handover based on best interpretation and no cross-pollinated sessions existed to bridge the gap.
Case notes are a pain
The client was given free reign over individual instances of the design. For example, they may request to resize a single title in one section of a page based on ad-hoc preferences without considering adjacent components.
01
Three new workstreams
Page & site
Performing a similar role to the current UX design team - committed to the research of new features and wireframing new pages. On the development side, pages would be created in Drupal using the component library.
Component
Dedicated to the design and creation of a new component library, either recreating existing (non-responsive) components or new components in response to demands from the page & site team.
Refactor
A dev-majority team committed to refactoring existing pages using the new responsive grid system and designated break points.
02
A new workflow
I created a new workflow structured around the 3 new workstreams above, introducing the following:
01
Daily design collab
Time would be committed each day to collaborative wireframe design in a new shared ‘Sandbox’ file, drawing on research & metric data to create new early-stage designs.
02
Wireframe review
[]
03
New component specs & estimates
[]
04
Collaborative triage & estimation
[]
05
Design handover
[]
06
Playback & design QA
[]
03
Reimagined team principles
.svg){kind=icon}
Drupal friendly design
Time would be committed each day to collaborative wireframe design in a new shared ‘Sandbox’ file, drawing on research & metric data to create new early-stage designs.
Direct communication
[]
[]
[]
Make it do
CMS
Working with Drupal meant producing CMS-able components, adapting the atomic component model to the following:
Paragraph text
Foundations - within Drupal config
Atoms
Molecules
Organisms - complete piece of page functionality
Templates - fully CMS-able page sections
Pages - handed over to page team as a combination of templates
01
Buttons and inputs
I redesigned, rebuilt and re-spec'd the foundations of our most basic components, that included:
Buttons
Chips
Tabs
Input fields
02
Page Sections
Hero
50:50
Testimonial banner
FAQ
Tab panel
Contact form
Publications section
Mega menu
03
Cards
Before the redesign and component model, cards were disparate and inconsistent across the site, with undefined use cases, conflicting font hierarchies and a lack of design cohesion. The full list of cards was also undocumented, making it a necessary overhead to locate all cards designed across the site and streamline accordingly, redesigning them in the processes. I also integrated them into the component library, adding general specs, interaction states, transitions and responsive specs.
From
12+
Card types before
To
6
Card types after
6 new card types
Publication cards
Event cards
Feature cards
Partner cards
Product cards
Testimonial cards
See publication card specs
Defining a new
Hierarchy
Informing the design of the Megamenu, Product pages and various card components was a reimagined information architecture for Planet’s new product acquisitions. The sheer range and breadth of new products and features made this a workstream of significant impact, and would create the foundation for guidelines in both content creation and content management.
New hierarchy
Industries
-
Hospitality
•
Retail
•
Payments
Type
-
Platforms
•
Products
•
Solutions
Product group
Products
Features
01
Product page
The product page was completely redesigned to make use of new components, new content types and Planet’s new products overall, As part of this work, I reimagined what might be poignant to see for key audience segments we identified in our research, as well as how they might best understand the structure of Planet’s product map in their mind.
Hero
Paragraph text
Capture my interest with a large visual display.
Show me the key details of the product. What are the tags & parameters and where does it sit in the Planet universe?
1/9
01
Product page
The product page was completely redesigned to make use of new components, new content types and Planet’s new products overall, As part of this work, I reimagined what might be poignant to see for key audience segments we identified in our research, as well as how they might best understand the structure of Planet’s product map in their mind.
Select a page
Paragraph text
Capture my interest with a large visual display.
Show me the key details of the product. What are the tags & parameters and where does it sit in the Planet universe?
Leveraging
Quick cards
The solution we decided on to best facilitate this was the use of a SF lighting design system component known as “quick cards.” These were highly flexible card-type components that enabled us to elegantly reorganise, categorise and display key data for agents.
Balance
A simplified IDV process that allows agents to instantly look up a customer in SF and choose the best following action.
Cases
A refined case structure and object hierarchy that provides a more coherent approach to opening and solving cases.
Leveraging quick cards
The solution we decided on to best facilitate this was the use of a SF lighting design system component known as “quick cards.” These were highly flexible card-type components that enabled us to elegantly reorganise, categorise and display key data for agents.
Balance
Paragraph text
Show me:
Help me:
Leveraging
Smart actions
Surfacing actionable tasks when they were needed formed a crucial part of the billing and metering journeys. We wanted an effective way to distill all available situational data into an associated recommended follow on, surfaced on two consistent reference points they could look to to streamline their next action.
On quick cards
The first of these reference points, more specific to these billing and metering journeys, was on the quick cards themselves, as static actions that would always be associated with a specific card.
On the magical toolbar
The second, was as a more dynamic and journey-agnostic ‘next best action’ (NBA) on the Einstein-powered actions and tasks toolbar.
Unpacking
The flow
We used the following three forms of research as sources of knowledge to create a ‘Next Best Actions map’ for the billing issues and meter readings journeys:
User (agent) interviews
What do agents do currently to reach each solution for customers? How do they decide the best course of action?
Exploration of the current taxonomy
What information exists currently in the system? How are tasks, case types and solutions mapped?
Interviews with industry SMEs
What is the optimal path to solving each customer’s problem? How should agents optimise their decisions?
User driven
Data input - Utterance
What is the user saying coming into the call that we can use for early or even pre-call triage?
Gain deep understanding of the users and the challenges they face.
Identify specific journeys to focus on.
Create a shared understanding of success.
Map end-to-end process.
Identify enablers of and blockers to accelerate from here.
System driven
Data input - Agent
What is the user saying coming into the call that we can use for early triage?
Gain deep understanding of the users and the challenges they face.
Identify specific journeys to focus on.
Create a shared understanding of success.
Map end-to-end process.
Identify enablers of and blockers to accelerate from here.
Paragraph text
Customer details
Previous/recent cases
Latest bill reading
Current balance
Agent driven
Triage
What gaps does the agent have to close to refine the potential solution?
Gain deep understanding of the users and the challenges they face.
Identify specific journeys to focus on.
Create a shared understanding of success.
Map end-to-end process.
Identify enablers of and blockers to accelerate from here.
System driven
Identify problem
What problem can we then ascertain from the combination of?
Gain deep understanding of the users and the challenges they face.
Identify specific journeys to focus on.
Create a shared understanding of success.
Map end-to-end process.
Identify enablers of and blockers to accelerate from here.
System driven
Propose
What is the solution directly derived (usually 1:1) from the problem?
Gain deep understanding of the users and the challenges they face.
Identify specific journeys to focus on.
Create a shared understanding of success.
Map end-to-end process.
Identify enablers of and blockers to accelerate from here.
Agent driven
Solve
What now needs to be done to action this on the agent’s side?
Gain deep understanding of the users and the challenges they face.
Identify specific journeys to focus on.
Create a shared understanding of success.
Map end-to-end process.
Identify enablers of and blockers to accelerate from here.
Magic
Moment
To better understand the Triage step of this [map], we mapped out a full decision diagram to represent the manual ways agents would reach a solution to a customer’s problem, based on every input they might receive. This exercise had never been done in British Gas before and took over 20 hours of interviews with agents and SMEs, but proved invaluable.
A Next Best Action for
Everything
The result of all this was the blueprint for a much improved NBA sidebar that would go on to enrich the overall agent experience, not only for the billing and metering journeys, but throughout all tasks.Other examples of NBAs we introduced included:
Adjusting vulnerability status
Triggers:
Paragraph text
The customer was new to British Gas (agents were already encouraged to ask all new customers)
Certain parameters including passing a certain age threshold
Adding a new customer to the system
Triggers:
Paragraph text
Always suggested pre-ID&V completion in case of a call from a new customer
Opening an existing case
Triggers:
Paragraph text
Agent has ID&V’d a customer and an open case matches the customer’s utterance
Customer has called in to British Gas within the past ‘x’ days and case is not closed
Upload a file
Triggers:
Paragraph text
Agent has opened a metering case under specific sub-categories that require attachments such as photos but has not yet uploaded any
Agent has received communications from customer with files attached
Workflow
Pains
A major pain point we encountered in our research that was not foreseen in our brief surrounded the case workflow. Cases would occasionally be opened by one agent but picked up by another, who would have little context besides the notes they were given.
Minimal incentive
Ultimately there was no real reason for agents to want to take notes. The process was usually enforced by management where possible.
Arduous overheads
Taking notes was a long and arduous process, requiring agents to perform significant overheads at the end of every customer engagement.
Room for variance
Notes are not snowflakes. They do not thrive and blossom in their uniqueness. Even so, there was a lot of room for differentiation in quality and structure.
Design
Changes
Based on this we updated the design of the opening and closing case journey to work in the following ways:
01
Autopopulate case details
New cases, when opened, would auto-populate as many case detail fields as possible based on incoming data, and prompt the agent to manually fill in any remaining fields.
02
Easy complete
The case close button was moved to the toolbar of any case tab, so that the agent could close it easily.
03
Quick closure notes
On closing a case OR exiting a case tab, Salesforce would trigger a smart modal to prompt the agent to create at least basic notes. This would be pre-populated if possible.
SME reviews
We embarked on a series of review sessions with the aim of finessing the information structure of our key components, cards and pages to ensure we were displaying the correct data points where agents needed them most. This involved over 30 hours of review sessions, presenting visual reference points either in a 1-on-1 or focus group settings.
4 object cards
3 toolbars
8 billing & metering cards
5 insight cards
7 action modals
Moderated testing
We also conducted 6 x 40 min testing sessions, each asking agents to complete 1-2 tasks in a mid-fidelity prototype. The aim was to test the true impact of our design on those who will be using them, agents, with the aim of getting accurate and actionable feedback and thus make improvements.
The result was a refinement of:
Paragraph text
A new case creation journey
Core information architecture
69%
Decrease in time to completion
100%
Of agents preferred the new method
83%
Fewer clicks
"
Andrew’s contributions were critical to the success of an important initiative with Centrica. His expertise in UX and User Research ensured our designs met the needs of the end user and client goals. The project had significant challenges as we had to balance the constraints of Salesforce, with reported desires of call centre staff, needs of the end customer and the business goals of our key stakeholders.
Andrew demonstrated strong leadership skills, leading client presentations and building their trust in our ability to provide impactful solutions. He also provided mentorship and guidance to more junior designers, creating a supportive team environment.
His proficiency in wireframing and prototyping enhanced our project deliverables, ensuring they were both feasible and functional. Andrew will approach any project at CI&T with positivity and a solution led attitude.
Andrew's collaborative nature and commitment to delivering great work make him a valuable team member. I look forward to working with him again the future.
Andrew demonstrated strong leadership skills, leading client presentations and building their trust in our ability to provide impactful solutions. He also provided mentorship and guidance to more junior designers, creating a supportive team environment.
His proficiency in wireframing and prototyping enhanced our project deliverables, ensuring they were both feasible and functional. Andrew will approach any project at CI&T with positivity and a solution led attitude.
Andrew's collaborative nature and commitment to delivering great work make him a valuable team member. I look forward to working with him again the future.
"
