Shaping the visual language of our investment portfolios
Armed with our wireframes and information architecture, we were now faced with the challenge of designing an aesthetically functional product. As a product designer, my goal is to design an investment app that people would love to use. With our user research mostly complete, we now have to translate our research and product requirements into a usable interface.
Timeline: 7 months ongoing, February 2021 — present
Role: Product designer
Context: App UI & UX redesign
Teammates: Tiffany Au, Kriti Kothari
Insights from data and research
After creating our affinity map, we realised that the biggest pain-points users faced was 1) information and cognitive overload 2) lack of clarity 3) general confusion. These problems were also ones we believed could be solved the most effectively through visual design.
In particular, understanding our portfolios was one of the biggest issues faced by our investors. Copywriting aside, we believed there was a strong opportunity to employ a novel and visual way to introduce our portfolios to Hong Kongers.
We began by engaging existing and prospective users about images they believed resonated with our existing investment portfolios.
Creating a moodboard for every mood (investor)
After coming up with an icon for each portfolio, we sourced various types of images and references to style our investment portfolios. After cycling through organic illustrations, manga-styled illustrations, and real-life photography, we found that real-life photographs were the easiest for users to understand. Illustrations gave users a lot of leeway to interpret the meaning of the images, but images of everyday objects related to audiences more.
Art direction and branding
As our brand grows and matures, it became prudent that we needed to take full control over the artistic direction of our consumer-facing touch-points; the most important of which is our app. With our designers and photographers, we sourced several objects and created flat, calming images that had a mature mood; a stark departure from the vector-based graphics used previously to illustrate our portfolios.
Integrating the images into the app
Our next challenge was to seamlessly integrate our new images into our app. As we steered towards relying on visual images to represent our portfolios as opposed to words, we had to come up with an app interface that neatly displayed these portfolios and optimised their use in the app. After drafting several prototypes with our product and design teams, we determined that product cards would serve the most ideal dual purpose of displaying our images and portfolio-related information.
