Overview
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.
Highlights
Weekly page visits
300%
Speed to dev output
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 4.52 0.293 L 1.32 2.073 C 0.6 2.473 0 3.483 0 4.313 L 0 7.703 C 0 8.533 0.59 9.543 1.32 9.943 L 4.52 11.723 C 5.2 12.103 6.32 12.103 7.01 11.723 L 10.21 9.943 C 10.93 9.543 11.53 8.533 11.53 7.703 L 11.53 4.313 C 11.53 3.483 10.94 2.473 10.21 2.073 L 7.01 0.293 C 6.32 -0.098 5.2 -0.098 4.52 0.293 Z" fill="transparent" height="12.007540000000002px" id="pD2dMzV_e" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="rgba(33, 33, 33, 0)" transform="translate(6.24 5.998)" width="11.53001px"/></svg>)
x2
User journey completion
500%
Project summary
Deliverables
Final
the goal
Bring together Planet's new acquisitions in one single, scaleable site.
Chapter 1
Addressing design gaps
An immediate revamp
Following my onboarding onto the project, my assessment of the existing build and workflow turned up some major holes. Seeing these, I requested to extend my onboarding by 1 week to further my exploration and set up ways to mitigate any gaps.
01
New foundations
I began by creating a new workflow structured around the 3 new workstreams above, introducing the following:
02
Component library
With large amounts of duplication and inconsistency in the early designs, I took the following steps to begin aggregating existing work and organise them into a component library:
03
New responsive layout
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.
Chapter 2
A reinvented workflow
Key challenges
Handoff
Design to dev handoff was disjointed. A sole designer was given limited time to create non-smart pages in Figma, while for handover, developers eyeballed Figma wireframes and built them ad-hoc in Drupal.
The solution
01
Three new workstreams
I suggested building out what was a largely unstructured team structure to accommodate new core functions and a new way of working.
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.
02
A new worfklow
I created a new workflow structured around the 3 new workstreams above, introducing the following:
03
New team principles
With a new came of working, came subtle new principles that would inform and empower a more successful overall project.
Drupal friendly design
The aim was to shift from an ad-hoc workflow where designs were created agnostically and shifted to Drupal, to one in which designers and devs agreed on how designs would be spec'd and translated.
Chapter 3
Design system & components
Play nice with CMS
Working with Drupal meant producing CMS-able components, adapting the atomic component model to the following:
01
Buttons & inputs
02
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. I located all cards across the designs and streamline accordingly, redesigning them and integrating them into the component library, adding general specs, interaction states, transitions and responsive specs.
03
Page sections
During this project, I designed and refined over 15 CMS-able section templates, including the following shortlisted:
Chapter 4
UX & Feature discovery
New product hierarchy
We first reimagined a completely new 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 lay the foundation for several new pages, content creation and content management.
5 new features
Based on this new hierarchy, we set out to research, map and produce a number of new feature pages, which included:
Products
Chapter 5
Products
Chapter 6
Partners
Chapter 7
Case studies
Revamping case studies
Our research showed that the way content existed on the site was confusing to users, as articles were indistinguishable from other kinds of content, and spread disparately across the site.
The other issue was that having acquired several new services, Planet needed a way to scale its content strategy to accommodate its new industries.
We decided to better sort Planet’s learning content, into the following primary content types:
Case studies
Intended for the prospective audience segment, case studies have the purpose of convincing potential customers that Planet have experience in their specific field, and with similar use cases.
Chapter 8
tax free
Jobs to be done
As part of a project extension, we worked to redesign an external portal for shoppers, a new audience segment, to allow them to manage their tax refunds upon returning to their home country.
To tackle this I began by locating the 4 disparate pages that already existed, mapping the repeat functionality and redundant information. From this I identified the following core jobs to be done by users:
Track the status of my tax refund.
Better understand what the tax refund process looks like.
Identify brands where I can shop tax free and know their locations.
Understand the different ways I can receive a refund.
Find out where I can go to start my refund process.
See which countries support tax free shopping.
Find out what the refund landscape looks like for the country I’m travelling to.
See answers to Tax Free questions I might have.
Contact support.
chapter 9
support
A little extra
With any extra capacity, I picked up small bits of redesign work. One example of these pieces included the support page, which, according to our research, often led to drop offs with users. I took steps firstly to bring this into the new design system, and secondly, to better filter users to where they needed to go.
Issues (as-is)
Eyebrow text specifying new and exiting customers is not obvious.
Get in touch CTA simply takes users to a form within the same page.
Phone number is actually inactive.
General copy issues & visual incongruence.
Phase 1
Phase 2
Chapter 10
Impact and feedback
500%
Uptake in users completing journey
Before Andrew joined the team, we were struggling to meet industry standards and lacked a cohesive design system for our new website. From the moment he joined the team, we knew we were in good hands with his knowledge, creativity, and quick thinking.
Andrew’s contributions have not only made our website visually stunning but also highly functional and user-friendly. His meticulous attention to detail and dedication to user experience have taken our site to new heights.
One of Andrew’s standout qualities is his expertise in Figma, which he used to expertly format our design system, ensuring consistency and coherence across all aspects of our web presence. Thanks to his efforts, our design system is now efficient and well-organized, benefiting our entire team.
Our website now looks much more modern and professional, with a sleeker appearance, all thanks to Andrew’s incredible work. He has been a game-changer for us, and we couldn’t be happier with the results.
Andrew’s talent, dedication, and expertise have made a significant impact on our organization, and we are truly grateful. Many thanks!