CASE STUDY 02 / CLEARSCORE
ClearScore, Wabi-Sabi & Crafting Simple Native UI
For many, personal finances and money management is a sensitive, scary and complex subject. ClearScore adopts the ancient aesthetic philosophy of Wabi-Sabi to achieve a feeling of simplicity and calmness.
During my time at ClearScore I was fortunate enough to shape the UI across the website, iOS and Android Apps in the early stages of the startup's rapid rise to success.
Competencies
UX, UI
Art Direction
Interaction Design
Motion Design
​
Role
Senior Product Designer
The Credit Score
ClearScore is dedicated to helping people improve their financial wellbeing and this was reflected in our design ethos. We were committed to making the complex world of personal finance clear, calm and easier to understand.
​
The credit score was the main feature of the website and app and the landing view when you logged in. ClearScore adopts the philosophy of Wabi-sabi - the idea that beauty and perfection can be found in the imperfect. Personal finances for most people are a sensitive and very complex subject. We worked hard to make sure the user interface was friendly, calm and reflected the imperfect beauty of nature and organic elements.
THE CREDIT SCORE
Sense of calm
We changed the imagery per market and season to reflect real-world, local and natural beauty.
I was responsible for hand-picking several sets of images during my time at ClearScore. Above is an example Winter set.
I sourced images with warm tones that highlight the beauty and imperfection of nature, helping our users feel calm when checking their credit score. The higher the score, the higher the perspective.​​
Simplicity
There are several places in the website and app where content was data heavy, so we explored a range of simple UI patterns such content cards which streamlined the information for users to swipe through. We always aimed to present content in a way that was broken down and more easily digestible. Here you can see an example of a minimalistic approach — using only a few colours and a lot of white space to help ensure the content was clear, including important data points.
Native Design Patterns
I have a strong understanding of iOS and material design patterns and behaviour. During my time at ClearScore, I worked across an iOS and Android app. For most projects I worked on, I was required to create designs across all platforms ClearScore uses.
​
I worked in a cross-functional squad and I worked closely with both iOS and Android native developers.
For the Credit Report (below), we adopted the cell pattern to inform users of daily changes to their credit report (see below). Our iOS and Android platforms have a similar UI and feeling, but the components we use are native to each platform. For example, below you can see elements like the primary navigation and the 'new' notification is different for iOS and Android.
The Design Portal
​​I worked on ClearScore’s design Portal in 2019 — a site home to our brand guidelines and rules. As a business, we needed a hub that could host guidelines about our apps and website, our advertising across TV, print and digital channels and our brand identity such as colours, typography, tone of voice and more.
I explored large, bold page titles for the guideline section pages, using our new and bespoke typeface, making it easy for users to know where they are in the guidelines and to showcase our typeface which is such a large part of our brand.
Our brand is about clarity and calmness and so I wanted to reflect this in our portal by using a minimal website layout and grid. The simplicity helps to highlight our products (apps and website) and brand identity.

I created several prototypes for the portal using Principle prototyping software. The designs and prototypes were showcased at our company’s annual birthday event to our partners and agencies we work with where it was very well received.
