Art direction, Illustration, Animation, Design and Painting
ms-main-v1-01.png

MoneySmart

Work by Sara Chong at MoneySmart: Art direction, Illustration, Animation, Brand.

Hybrid illustration for Mortgage channel

The Painter who worked for a Fintech company

In 2015, I came back to Singapore with the intention of growing my painting practice. I tried some teaching and commissioned work, but eventually I got too hungry and applied for a job at MoneySmart. MoneySmart is a Singaporean financial aggregator, and the furthest one could get from fine art. I was hired as a freelance Content Designer to make infographics for their articles, and that was it.

But that wasn’t just it. Shortly after joining the company, I introduced animated content, worked with the Design Lead and eventually Head of Design to develop the brand and achieve consistency across 3 countries, worked on out-of-home campaigns and redesigned the homepage with the help of a diverse team of workmates.

Brand Playbook: Colours

Part of my work on the Brand Playbook involved an expansion (and some tweaking) of our current set of colours. I worked with the Head of Design and Design Lead on this, and helped produce a live style-guide that would be usable both online and off.

Illustration_Colour-palette_v2-03.png

MoneySmart colours

We had a creative agency come up with our initial branding in 2016.

However, we quickly ran into the problem of these colours being misused by both designers and non-designers who did not understand the relationships between them.

Illustration_Colour-palette_v2-02.png

The Colour Step System

MoneySmart is made up of two major hemispheres of production: Product/Tech and Marketing/Content. What we needed was a clear colour system that would meet the needs of both — an easy system that could be used by both designers and non-designers, and meet accessibility standards.

I took on the work of creating this system while working on the Brand Guidelines. Having never encountered a design system before, it required quite a bit of research on how other digital companies came up with their colour systems.

The final result is a 7-step colour set for each of our main colours. Each tonal step is equivalent across the colours, with saturation carefully adjusted to give the same richness as the base colour of the family. The top two rows of colours gave us a set of muted colours to work with for backgrounds, the middle for emphasis, and the lowest two for text. The most important quality was that if one picked two colours 5 steps apart, they could be sure to achieve AA accessibility.

 
One would be able to pick any two tones 5 steps apart and be sure that they would achieve AA Accessibility with text.
 
Colour-MoodFamilies-v1-02.png

Colour Relationships

As part of the guide, I made a series of colour charts for each of our main colours. These charts gave a sense for which colours worked best with the main colour theme, and in proportions that would still ensure a dominant colour scheme. Each of the main colours were also tagged with moods such as “Casual”.

Brand Playbook: Illustration

Money as the symbol of change and choices — much of our compositions were based around the idea of “crossroads” and “journeys”

Money as the symbol of change and choices — much of our compositions were based around the idea of “crossroads” and “journeys”

That Fintech Look

Faceless yet charming. Featureless characters as stand-ins for the everyman. We’ve all seen this look on modern FinTech sites and apps, and I’m not going to pretend that what I’ve done for MoneySmart is truly unique. It’s a versatile, safe style, and relatively easy to teach to my fellow Illustrators. What we really worked on for this look though, is the strength of our compositions and concepts. It’s a style that’s easy to make generic (given by the number of generators out there) but what made ours different was the thought behind each illustration. It was never just about creating “delight” — it was about context, explaining complex financial concepts while being human about it.

product-04.png
product-02.png
dont-A-Yes.png
hk_home_02_v1_transparent-01.png
lady2-04.png
people-in-motion-08.png

The Hybrid Look

We eventually realized that the company needed to move beyond simply illustrations and stock photos in order to create something a little more exciting for our marketing material. This led to the development of the hybrid style, which merged the language of our illustrations with photography.

mort-hybrid-01-01.png
ci-masthead-ref.png

Content Design

The original job I was hired for was to be a Content Designer for MoneySmart. In the beginning, my work was simply about making Infographics based on articles from the blog. I then introduced animated videos based on the blog as another form of content, and 2 years on, this led to the development of Media Sales, Branded content and a slew of video-based content varieties.

Case Study: Home Page Redesign

In 2018, MoneySmart held a Hackathon to see what everyone would come up with.

 

The Problem

There are two distinct parts to MoneySmart — The shop that sells financial products, and the blog that contains a treasure trove of knowledge about such products. The problem was, these two parts were horribly disjointed. The shop gave you products but no knowledge on understanding these complex products, while the blog provided education with no calls to action. No one wanted to work on the home page previously because it was a page that never got enough sessions or made enough money to warrant time from anyone.

IMG_0116.jpg
 

The Solution

The plan was to use the Hackathon to push the initiative for a complete redesign of Singapore’s MoneySmart home page that connected the blog to the shop. This would provide for the needs of users at all stages of the consumer journey, from Discovery to Decision. I set about gathering people across various teams to work on this initiative, making up the most diverse team for the Hackathon that included: a UX Researcher, one Backend Developer, a Commercial Account Manager, a Senior Product Designer, one Product Manager, our Head of Content, and myself, a Content Designer. Within one week, we came up with a new design for the home page that eventually got pushed into production by another team after the Hackathon was done (because we all had to get back to our other projects). Check out the homepage here.

 
screencapture-moneysmart-sg-2019-08-19-00_20_26.png