Redesigning a Leading FinTech’s Website
Updating our website — Setting up for growth through transparency
It was no mystery to me that our website needed a reset. As we grew, both as a team and in our vision, there was significant pressure to develop an online platform that spoke true to our mission to make finance simple and transparent to the masses. Our previous website was created in 2018 through AQUMON’s first rebranding exercise. Two years later however, it became alarmingly obvious that there were huge discrepancies between how AQUMON perceived itself and what Hong Kongers could see of AQUMON as a brand. I will outline a framework we created for our website and explain our decision-making process.
Alice Through the Looking-Glass: Putting ourselves in the shoes of AQUMON two years ago
To begin, we needed to understand the decisions that were made yesterday in preparation for what will be done today. Back in 2018, AQUMON just launched its mobile investing app and was gaining an early majority. To align ourselves with our new app, our website was built upon the objective of ‘education’; this was an intuitive call in 2018, to educate our audiences about who we are — a robo advisor — and what we do.
To connect with a wider audience in 2020, we strove to evolve past ‘education’ by using a more customer-centric, user-friendly approach to constructing our new website. However, this proved more complex than expected.
Part 1 — Deconstructing and synthesising the pieces: A hard look at the old website
We started by stripping down our old website to its most basic element — a low fidelity wireframe with a user flow. We identified the information presented on each webpage, their hierarchy, and the user journey regular folk would use to reach such content. By mapping out the user experience, we identified key areas that lacked crucial information and bottlenecks that prevented users from getting what they wanted.
Alongside understanding the user journey of our old website, we noticed discrepancies between our historical use of AQUMON’s brand colours and how we use them at present. Although we had a official colour guideline from our 2018 rebrand, we’ve noticed that our online visual content had shifted away from the dark shades used on our old website to lighter shades. This shift was something we knew needed to be reflected in our new website.
Part 2 — Defining objectives: The debacle of deliberateness
Throughout the entire process of reconstructing our website, we set clear objectives to align ourselves for success. Although only two individuals were involved with the planning and design process from start to finish, we had to set clear expectations for ourselves, our team and other stakeholders. Even more importantly, we had to be deliberate with every decision we made and design with purpose, not impulse. The following were our objectives:
- Be Water: The user journey should be smooth-sailing and transparent. Users shouldn’t require more than three clicks to get their desired information.
- Be Visual: If it can be expressed with a graphic, then use a graphic. Concise and deliberate copywriting alongside meaningful visuals was key to information transparency.
- Give Them What They Want: We should create a website that addresses the needs and wants of our audiences in a deliberate fashion.
Part 3 — Creation: Online tutorials and research
After weeks of discussion and planning, we had a roadmap of what needed to be done; construct a new user journey, expand our content, and update our visuals. We fully immersed ourselves in UI/UX theories, best practices, poured over the *godly aesthetics* of Wealthsimple, and exhaustively tested a plethora of webpage layouts.
The tricky part was integrating the B2C and B2B sides of our business under one cohesive visual story whilst maintaining their distinct objectives and characteristics. But we’ll leave that story for another day over some jasmine tea.
Part 4 — Implementation: It takes two to tango but a team to waltz
A big challenge for us was iterating on our early mock-ups and receiving design critiques, all while moving towards the finish line in a creative fashion. We tested new colour combinations for each of our use cases, compared our mock website interfaces to those of other robo advisors and financial institutions; stress-tested different responsive layouts; and tested our designs in three different languages.
The one thing I’ve learnt from creating this website is that developing a UI design into an actual working website is a beast in itself. For development, we prepared a translation system that provided our web developers with an understanding of our thought process, decisions, and the associated graphics that were needed in the end. In scaling from static images on a canvas to a web interface, we had to think about the active and passive colour state of buttons for example, animation sequences, and interactive interfaces that would supplement our static designs. It took two to plan, but a team to execute.
This project started in July in the midst of Hong Kong’s third wave of COVID-19, and today, we’re at the end over the horizon.
Our new website vastly improved information accessibility for our users, reflects the consumer-centric approach our brand is working towards, and provides our designers and colleagues with a playground for future endeavours in brand and product development. Looking back at this extensive project, we brought transparency to our brand and products alongside an approachable identity that’s sorely lacking from other financial institutions and robo advisors in the region. In the end, our customers will be the most frequent users of this website, paving the way for how we build ourselves in the future.
