Task: Feature addition
Role: UX/UI Designer
Duration: 3 weeks of 40 hours each
Tools: Figma, Procreate, pen & paper
Project Overview
Frontier Finance, the consumer division of Frontier (40 million customers in more than 70 countries across six continents), aims to enhance the personal finance management capabilities of its mobile app. While the current app enjoys a high rating, its functionality remains quite basic. The existing features primarily revolve around spending, making payments, and tracking finances. To further enhance user experience, Frontier Finance intends to supplement these offerings by introducing personalised features that empower users to effectively manage their personal finances.
Objective
Design a cutting-edge feature for the Frontier Finance app that not only adds significant value for customers but also elevates their overall engagement and experience with the app.
Problem
In a highly competitive financial market, characterized by numerous institutions offering similar services, Frontier Finance recognizes the need to differentiate itself by providing intuitive and user-friendly financial tools. This approach is crucial to remain relevant to millennial customers and attract a new user base. Despite its current utility, the app's basic nature limits the ability for customers to personalize features that would enable them to effectively manage their finances and make proactive decisions regarding their spending habits.
1: Discover
UX Research
For my initial assignment, I undertook the responsibility of identifying suitable participants who align with our target audience and creating the necessary materials to carry out comprehensive UX research. To ensure a well-rounded approach, I opted to incorporate both qualitative and quantitative research methods. As part of this strategy, I prepared a User Interview guide and a Survey to distribute among participants. In addition to conducting general research on banking and financial institutions, my specific focus during user interviews was to delve into individuals' decision-making processes concerning their finances and their preferences regarding where to store their money.
I aimed to address several key questions, including:
-What is the fundamental requirement that a banking app must fulfill?
-What are the main factors people consider in choosing a financial institution?
-Who makes these kind of decisions in a family?
After interviewing 6 participants (4 women, 2 men) that fit the target audience, the following are the takeaways:
-5 out of 6 participants cannot achieve all banking need on app.
-4 out of 6 participants wished they could do more with the app, including:
• Create personalised budget goals to help you stay on track and manage your finances effectively.
• Gain convenient access to documents associated with your linked accounts, all in one place.
Checking balances, making bill payments, and enjoying the convenience of on-the-go access to their finances are the primary functionalities users seek in a banking app.
-Frequency of use is 4-7 times per week.
-All participants expressed enthusiasm about the prospect of utilizing the service to withdraw cash using their mobile phones, highlighting their strong willingness to adopt such a feature.
Pain Points:
- Engaging with financial tasks through an app can occasionally create a sense of impersonality.
- At times, it can be challenging to decipher charges displayed on the screen.
- Many users have a preference for paying bills on a desktop rather than using a mobile app.
- One of the major concerns users have is the security implications that arise if their phone gets stolen or lost.
Competitive Research and Analysis
My research focused on 5 direct competitors retail banking institutions.
These are the main takeaways:
-The majority of traditional retail banks in the UK provide comparable products and services.
-Customers desire the flexibility to access their finances conveniently and securely from any location and at any time.
-research suggests that a large majority of millennials, often over 80% or more, express a desire for digital budgeting features to effectively manage their finances.
Millennials seek seamless accessibility and control over their finances directly from their mobile devices. They desire the ability to effortlessly monitor their spending patterns, receive personalised guidance, and enjoy real-time access to their financial information.
Phase 2: Define
Persona Development
After analysing the data gathered from user interviews, proceeded to develop a user persona. Personas serve as a powerful tool that breathes life into research findings, enabling us to vividly depict and understand the individuals we are designing for. By crafting personas, we are able to illustrate and empathize with the target audience, gaining insights into their needs, motivations, and behaviors.
Meet Emily…
Meet Emily, a busy Londoner who relies on her banking app as a valuable tool to stay in control of her finances. For Emily, it's crucial that the app not only provides a clear picture of her spending and resource allocation but also serves as a source of motivation to save money. How might we design an app that empowers Emily to easily track her expenses, gain insights into her financial habits, and ultimately inspire her to make smarter financial choices and achieve her savings goals?
After carefully considering Emily's needs, I have identified key features that will greatly simplify her life. The following features have been selected:
The addition of a 'Your Budget' feature that enables Emily to effortlessly allocate funds to different categories and make easy adjustments as needed.
Enhancing clarity and visibility of transactions specifically on the app's primary account, Checking. This will provide Emily with a clear and concise overview of her financial transactions, ensuring she can easily track her spending and maintain financial control.
Information Architecture
To establish a clear structure for the added features within the existing app, I crafted an Application Map. This enabled me to define the hierarchy and placement of the new functionalities. The map served as a visual guide, allowing me to anticipate user interactions with the prototype before proceeding to develop mid-fidelity wireframes.
Once the interactivity with the existing components of the site was determined, I delved into the design and development phase. This involved creating a seamless and engaging user experience by designing and building the necessary interfaces and interactions. By following this iterative process, I aimed to ensure that the final product would not only meet Emily's needs but also offer a delightful and intuitive banking experience.
During this phase, I focused on developing a Task Flow that encompassed two important user tasks:
Editing Your Budget: This task involved allowing users to easily increase the allocated amount for the Education & Learning category within their budget.
Finding a Specific Transaction: The second task aimed at enabling users to locate a particular transaction and access comprehensive details, such as the transaction's location and associated merchant website.
Phase 3: Design
Wireframes
To work with the existing Frontier design system, my initial focus was on developing the Homepage while aiming for an exact match with the existing app. In order to gauge my progress, I shared these preliminary wireframes with a potential user and conducted a mini usability test. The user acknowledged the usefulness of the new feature but suggested making it more prominent and interactive by incorporating a clear CTA button instead of relying solely on hovering and clicking within the container.
Mid Fidelity
Given that the 'Your Budget' feature will be prominently available on the homepage, it is crucial to strike a balance between its seamless integration with the overall design and its ability to captivate users with a fresh and visually appealing appearance.
High Fidelity
Wireflow
Phase 4: Prototyping and User Testing
I created a high fidelity prototype in Figma and conducted remote testing using video platform with 8 participants who went through a series of tasks.
Task 1: The primary objective entailed modifying 'Your Budget' by boosting the allocation for the 'Education & Learning' category.
Task 2: Subsequently, the following assignment involved deactivating alerts and notifications that occur once the new feature is updated.
Task 3: Locate and investigate transactions within the checking account.
Testing Takeaways:
All tasks were successfully finished by all participants.
The most favored navigation method involved clicking on Call-to-Action (CTA) buttons.
Enhancements to the visual design of the Frontier app could be made by reassessing the visual hierarchy of text fields within containers and incorporating additional visual elements.
Every participant appreciated the enhanced clarity and visibility of transaction details and expressed a desire for their own banks to have similar features.