Improving usability of a savings feature for a banking interface

Client:

Kiwibank

Industry:

Personal banking | Financial services

Role:

UX designer | UI designer | Visual designer

Output:

Heuristic evaluation | Wireframes | Accounts dashboard re-design | High fidelity interactive prototype

Tools:

Figma

Proto-

type

Kiwibank recently received a rebrand.

The signed-in desktop customer experience remains out of step with the new look.

Context:

Kiwibank is a New Zealand state-owned bank and financial services provider.

  This design project is aimed at improving the usability of their customer interface. I focused on enhancing the "add a goal" feature within the transaction record page for account holders.

There was also an opportunity to improve visual continuity between Kiwibank's desktop and mobile experiences, making it consistent with their existing branding.

Improve the usability of the "add a goal" savings feature for a Kiwibank account holder. Revise the visual design for continuity between the desktop and mobile experiences.

Principles:

User-centric design
Prioritize the needs, preferences, and pain points of Kiwibank customers at every stage of the design process.
Simplicity and clarity
Strive for simplicity in design, ensuring that the "add a goal" feature is easy to understand and use.
Intuitive interactions
Provide visual cues and clear indicators of progress while minimizing the number of steps required for customers to set up their savings objectives successfully.
Empowering financial management
Empower users with meaningful insights and personalized recommendations related to their savings goals, allowing them to make informed financial decisions.
Visual continuity
Unite the visual language of the desktop and mobile experiences using existing branding conventions.

Scope:

Improve the "add a goal" feature for account holders, creating a user-friendly, visually engaging goal-setting experience on the desktop interface.

The re-designed feature will include a streamlined process to add a savings goal, data visualizations, and be compatible with Kiwibank's current brand identity.

Additionally, I'll revise the desktop transaction page UI for harmony with the recent re-brand and create a cohesive experience with the mobile interface.

Evaluation:

I gathered relevant insights and identified potential areas for improvement to the feature by completing a usability heuristics assessment, a task analysis and by mapping the user flow.

Kiwibanks existing user flow to add a savings goal

Kiwi banks existing user flow:

The user selects a tab within the transaction record table which brings forward a card for inputting information.
The set goal button confirms inputs.
The card is populated with information relating to the goal and time elapsed.
The information remains behind the tab when a user navigates back to their transaction record.

Key findings:

Users cant find feature:
The current add a goal feature placement is within a tab set grouped with transaction search functions.
Unclear purpose:
Users often struggle to understand the purpose and benefits of the feature due to a lack of onboarding and explanatory content.
Unclear Progress Tracking:
The existing design lacks clear indicators and visualizations of their journey.
Lack of Flexibility:
More flexibility could be designed in setting and adjusting a savings goals than is currently given to users.
Visual Disparities:
The visual design of entire account transaction page differs significantly between the desktop and mobile versions, leading to a disjointed user experience.

Potential challenges:

Optimizing Screen Real Estate:
Effectively using limited screen space to accommodate the redesigned feature while maintaining visual clarity and avoiding overcrowding.
Balancing Simplicity and Flexibility:
Accommodating a variety of savings goal scenarios and preferences can be challenging. Striking the right balance between simplicity and customization might require careful consideration.
Effective Data Visualization:
Balancing the presentation of meaningful data with simplicity and accessibility can be challenging.
Educational Elements:
Incorporating effective explanatory content to help users understand the benefits and purpose of the feature without overwhelming them requires careful content strategy.
Ensuring Consistency:
Achieving a consistent experience across both desktop and mobile versions requires careful attention to responsive design principles and maintaining a unified visual language.

Establishing a page layout:

I used an iterative approach, leveraging a combination of design methodologies, techniques, and tools to translate insights into effective solutions for the "add a goal" savings feature

To establish a clear structure moving forward I wanted to make sure all the existing content of the accounts page would be accommodated and appropriate hierarchy maintained.

The initial step involved creating wireframes that tested how the page layout could include a prioritized "add a goal" feature. I wanted to give the feature prominence to encourage user adoption.

Wireframes:

Existing navigation exists as a top bar. In this wireframe I am testing bringing out the add a goal feature from behind a tab that exists with the transaction table.

A side bar navigation reduces the amount of horizontal text a user is presented with at the top of the screen, reducing the visual clutter but maintaining easy access to navigation items

Iterating on data visualizations:

Exploring methods of data visualization was an important early step. Various approaches were taken to convey savings progress effectively to users. Initial iterations included indicators, progress bars, numerical values, and percentages.

Green to signify savings aligned with conventional visual cues. I added blue as an indicator of time elapsed, red to signify $ left to save and white for the goal.

One attempt included a bar chart that tracked savings over time, two progress bars and color-coded text content. This approach proved to be overwhelming and redundant.

Data visualization exploration:

Wireframe iterations to testing visualization of a users savings progress and target goal.

A bar chart would also show the users progress over time.

I decided there were a number of redundant elements in this design. So many elements might cause user overwhelm.

Finalizing the modal and user flow for the "Add goal" feature :

In my final design the "add a goal" feature is accessible as a card at the top right of the account screen.

When no goal is set, the card displays 0 values and dummy content. Hovering over the card triggers an animated preview of how savings data will be shown over time when goal is set. The animation, serving as the background for the "add a goal" button, is blurred and darkened for contrast.

Clicking opens a modal where users will set their goal. They provide a goal name, dollar amount, and select a deadline using a date picker. The subsequent modal presents a weekly savings amount based on the provided inputs and radio buttons offer savings contribution management options.

After selecting "Set goal," users return to the account screen.

The top right card now displays personalized data: a bar graph illustrating savings over time, accompanied by text indicating the percentage of the goal achieved and the weekly contribution. Contribution adjustments, such as adding extra or skipping a week, can alter the weekly amount.

I used a color scheme where green signifies achieved savings, peach indicates the remaining goal, and white represents the goal amount. These color choices were made to provide a clear and intuitive visual representation of the user's progress toward their savings goal.

The initial card with dummy content and 0 values.

The hover state with blurred animated preview and "add a goal" button.

First modal with instructional copy, data inputs, a next button and a close button.

The second modal with personalized content, radio button options, a set goal button and a close button.

Savings goal card

Top right card shows on the account page when a goal is set. It is populated with new data weekly or as the user adds to their savings goal envelope.

Results:

Through an iterative design process I transformed the "add a goal" feature for account holders, aligning it with principles of user-centric design, simplicity, intuitiveness, empowerment and visual continuity.

The final solution improves the user experience by clarifying the purpose of the feature, streamlining the process, incorporating data visualizations to track savings progress, and updating the UI to better express Kiwibank's brand identity.

Design Decision and Implementation:

Card-Based UI:
The use of a card for the "add a goal" savings feature provides a visual separation on the account screen, drawing the user's attention to the added value function of the "add a goal" feature.
Microinteractions:
The hover animation on the card provides a microinteraction that helps users understand the functionality and outcome of engaging with the feature without fully committing to it.
Progressive Disclosure:
The use of two modals for goal setting inputs follows the principle of progressive disclosure. The information is presented in stages, reducing cognitive load by showing only the necessary information at each step.
Centered Modal and background blur:
Centering the modal over the darkened and blurred content ensures that the user's attention is focused on the task at hand, eliminating distractions from the main content and creating a clear context for user input.
Placeholder content:
The use of 0 values and dummy content in the card when no goal is set provides a sense of context and helps users understand what kind of information is expected from them.
Visual Feedback and Animation:
The animation upon hovering over the card provides visual feedback about the potential outcome of engaging with the feature. This animation helps users anticipate the result of their actions.
Radio Buttons for Options:
The use of radio buttons for managing savings contributions offers a clear and mutually exclusive selection method. This simplifies user choices and reduces potential confusion.
Color Mapping for Visualization:
The color mapping (green for savings achieved, peach for remaining goal, white for the goal itself) provides a visual representation that quickly communicates the state of the user's progress. This uses the principle of color association to simplify comprehension.
Contextual Return:
After the user sets the goal, they are returned to the account screen, ensuring a seamless flow and reducing the cognitive load associated with switching contexts.

The re-designed "add a goal" feature and user flow

The streamlined goal-setting process, coupled with clear and concise communication, has simplified the user journey, making it easy for customers to set and manage their savings objectives.

Visual cues and indicators were thoughtfully integrated, reducing the complexity of the interaction while maintaining progress transparency.

The incorporation of personalized insights and recommendations empowers users to make informed financial decisions, fostering a sense of control over their finances.

The color palette, typography and spacing of the desktop transaction page UI was revised to harmonize with the recent re-brand, creating a seamless experience with the mobile interface.

Final thoughts:

One thing that occurs to me now is I should have included a "back" option from the second modal. Some users, upon seeing their weekly savings amount, may want to change the information of their initial inputs without closing out of the modal and starting again.