Launching MoneySmart Hong Kong Site
2019
MoneySmart is South East Asia's leading personal finance portal helping consumers compare loans, insurance, and credit cards.
I led design efforts for building and launching MoneySmart website in the Hong Kong market with three product verticals and a blog, including applying new branding and creating a UI component library.
My role: UX/UI design, interaction design, systems.
Goals
Launch MoneySmart website in Hong Kong
Our team had a task to build and launch MoneySmart website in the Hong Kong market with three product verticals and a blog. We had a three months timeline for research, design, and development.
Create UI component library
As part of this project, my role as a designer was to apply new branding on the existing Singapore market templates site and create a UI component library that would serve as a basis for the future design system.
Approach
Designing the flow
For three product verticals, we followed more or less the same structure and flow we had on the Singapore site. We focused most of our explorations on differences between Hong Kong and Singapore markets as well as user habits and expectations. Explored several flow options, eventually narrowing down to one.
Designing the pattern library
Our goal was to create a proof of concept of our first front-end pattern library. This was an excellent opportunity to understand how to work with easily customizable and reusable components vs. global styles, as well as the best ways to share design system responsibilities between designers and front-end developers.
We learned a lot, and those lessons were invaluable for creating our design system later.
Collaboration
While intense, this was my favorite project at MoneySmart. Clear goals, the definition of roles, and constant close collaboration and support between the cross-functional team members was what made this such a fantastic experience. During this project, I also had a lot of support and advice from the broader design team. They participated in several UI library planning workshops.
Outcomes
A successful launch
Successfully launched the Hong Kong financial platform, exceeding our target metrics with conversion rates surpassing those of our established Singapore site.
Additionally, we implemented a new front-end component library incorporating our updated branding.
