MPF.hk - Brand and website for a Hong Kong fund comparison site
“
Three blue bars for an easier way to compare funds.
MPF.hk
Brand and website, 2017
About the project
MPF.hk is an online platform in Hong Kong for finding, comparing and learning about Mandatory Provident Fund (MPF) retirement funds. Between October 2017 and April 2018 we replaced its old logo with three diagonal blue bars and an MPF.hk wordmark, wrote an eight-page brand guide, and designed and built the website for desktop, tablet and phone.
Project
MPF.hk Brand and Website
Industry
Finance
Location
Hong Kong
Date
2017, 2018
“
Client Request
MPF information was hard to find and hard to compare. The client wanted one site, under the mpf.hk name, where anyone could view funds and their performance side by side.
MPF.hk
Business plan, 2017
Design Pillars
Core Brand Principles
Two blues and a simple mark, so the fund data stays in focus.
Tables, filters and fund profiles use the same blues and type as the logo.
The icon and wordmark always appear together, with set clear space and a 2.5 cm minimum width.
Exploration
From Old Mark to New Identity
The Old Logo
MPF.hk came to us with a yellow and teal M above a lowercase mpf.hk.
The New Mark
We drew three diagonal bars in two blues and paired them with an MPF.hk wordmark.
The Guide
An eight-page guide set the colors, Adobe Hebrew type, clear space and placement.
The Challenge
Problem Statement
The Main Goal: Make MPF Funds Easy to Compare
Hong Kong employees save through MPF, but fund information sat across many providers. The brand and site had to look trustworthy for a money product, keep long tables readable and work on desktop, tablet and phone, with an English and Chinese switch.
“
MPF comparison made easy.
MPF.hk Homepage
Plexable, 2017
Our Approach
Solution
A Brand and a Website Together
A new logo, two brand colors, Adobe Hebrew type, an eight-page guide and a website with fund comparison, fund profiles, education pages and FAQs. It is an example of our Branding work.
01 - Logo
Three diagonal bars and the MPF.hk wordmark, with a strapline lockup.
02 - Color and Type
Light blue #1CB6F9 and blue #2B6EB5, with Adobe Hebrew in regular and bold.
03 - Website
Fund comparison, fund profiles, education, FAQs and a newsletter sign-up, for desktop, tablet and phone.
Before & After
The Blueprint & Evolution
Old Logo to New Logo
We redrew the logo alongside the new website.
Before: the client’s yellow and teal M logo.
After: the three-bar mark and MPF.hk wordmark.
Design
Key Features
Fund Comparison
Search, filter and compare funds from different providers in one table.
Learning Pages
Education articles and FAQs about MPF, grouped by topic.
Design System
Visual Identity
Typography
Adobe Hebrew in regular and bold for all English material.
Color Palette
A light and a deep blue, used on the mark, buttons and headers.
Brand Rules
Clear space, a 2.5 cm minimum width, four color versions and a page of what not to do.
Impact
From Logo to Website
Results for MPF.hk
MPF.hk got one identity for its logo, guide and website, and a WordPress site we built from the designs.
MPF.hk
Result
By the Numbers
8-Page Brand Guide
Logo, colors, type, clear space and placement rules.
2 Brand Colors
A light blue and a deep blue.
3 Screen Sizes
Desktop, tablet and phone layouts for every page.
Exploration
The Logo Journey
From M to Three Bars
The old logo was a yellow and teal M. We replaced it with three diagonal blue bars and a clean wordmark, then used the same blues across the website. You can see some of the pages below.
Final Showcase
The MPF.hk Brand
