3. Managing Expectations
The last hero feature was the Progress Indicator. It's vital for improving the overall UX and maintaining trust when using our app. Therefore, I created progress bars and timelines in the application flow as visual aids to help users understand the status of their applications and reduce frustration. I also incorporated visual checkpoints and used more friendly language in UX writing to better manage user expectations during the lengthy application process.
2. Data Visualisation
Our app deals with data-heavy content, particularly complex financial data, so it's challenging for users to stay on top of everything. To address this, I designed interactive components, such as carousels and bottom drawers, to transform data into visualisations. It effectively reduced the cognitive load for our users and made the information more digestible.
1. Interactive Calculator (Slider)
The entire team unanimously recognised the significance of including an Interactive Calculator for Endowment. This feature educates users about financial concepts through real-time results and visual representations. Additionally, it can act as an engaging entry point for new users, prompting them to interact with the app and potentially increasing the conversion rate.
Following the UX decision-making, I prioritised the design of the three key features, while adhering to the established brand guidelines at Livi. Simultaneously, I ensured that the design was scalable and adaptable to accommodate future features. The forward-thinking later proved significant, when additional functionalities were added without compromising the overall user experience.
Final Design - The 3 Hero Features
Final Design
As visualised on the chart, the Calculator and the Progress Indicator (the Must-Haves) provide the most value for our users and won't take too much resources for our team to design and develop. However, after discussion with the compliance regulators, we decided the Benefits Data Visualisation (the Should-Have) needed to be included as well.
Our top-3 heroes features to be designed first were:
-
An interactive calculator (in the form of a slider in terms of the user interface);
-
A progress bar (to manage the user's expectations during the lengthy flow);
-
Visualisation of the benefits data (replacing the large table of data in the conventional application flow).
As part of the strategic planning for the Endowment launch, we faced a tight timeline. To prioritise our efforts effectively, I utilised the Impact-Effort Matrix, also known as the Prioritisation Matrix. This matrix allowed me to assess the impact of each feature and evaluate the effort required for its implementation. By plotting the features on the matrix, I was able to make informed decisions in determining which ones should be given priority.
*The Impact-Effort Matrix chart plots design ideas or features based on their potential impact and the effort required to implement them. It's a visual tool that helps prioritise initiatives by focusing on those with high impact and low effort.
The Impact-Effort Matrix
UX Decision Making
Designer's Tips: Anticipating the frequent back and forth between design and regulators, I leveraged the "Auto Layout" feature in Figma to organise all on-screen components in a neat and stacked way. It ensured that any changes made to the design would automatically adjust the padding and margins throughout all screens. This eliminated the manual adjustments, saving valuable time that would have otherwise been spent meticulously finding inconsistencies.
Working with traditional centralised banks comes with certain disadvantages, including a lack of flexibility. To save time, I made sure that all UX design decisions had obtained the necessary regulatory approval before progressing from wireframes to more time-consuming prototypes.
This approach helped us avoid potential roadblocks and delays, ensuring that our design iterations were aligned with the regulatory requirements from the early stages of the project.
Sketching out wireframes for feedback
User Testing
TOOLS
Figma, Sketch
Adobe Photoshop
DURATION
5 Months
MY ROLE
UX Design, UX Writing,
Brand Strategy
Livi Bank - Mobile App Product Design
Livi Bank, a prominent mobile virtual bank in Asia, made the decision to introduce an innovative new Endowment feature as their strategic approach to digitalise traditional financial services.
DIGITAL TRANSFORMATION
100%
AVE COMPLETION TIME (Decreased)
82%
Despite operating under strict banking compliance regulations set by our parent company, I was able to achieve two significant accomplishments:
-
On top of Livi's brand guidelines, I successfully transformed a 24-page offline Endowment application into an intuitive in-app experience;
-
I led the UX decision-making process and played a pivotal role in prioritising and launching two new features as the app expanded.
A 10-second summary in case you're in a hurry
The Problem: How to convert a lengthy conventional pen-and-paper application process into a seamless UX on our mobile app?
Design Brief - The Challenge
Problem Statement
Shoot me a message on LinkedIn or Email me at info@hello-chen.com
Our CEO and CX Lead found an opportunity to navigate within the strict banking compliance regulations, realising that not all 10 features were essential for the app's user experience. However, the challenge remained: determining which features to include and which to exclude in order to deliver the best possible experience for our users while maximising the value for our company.
-
Calculator (Slider)
-
Terms & Conditions
-
Progress Indicator
-
Branding Animation
-
Interactive Pie Chart
-
Asset Overview
-
Promotional Video
-
Trilingual UX Writing
-
Benefit Data Visualisation
-
Geo-Based Recommendation
As part of the rigid traditional banking process, the old Endowment application flow had numerous steps in collecting personal data, many of which were only relevant for offline face-to-face interactions.
To modernise the application, I first embarked on breaking down the complex application flow into smaller, manageable steps. My hypothesis was that within the cumbersome and time-consuming process, certain features were indispensable while others could be optimised through technology.
After a thorough study, 10 features were identified.
