UI
UX
Budget: 15.000 PLN
Deadline: 3 weeks
Banking Institution
Solution for the financial sector
Congratulations! You have just been informed that you have qualified for the new UXUI team that creates digital products for one of the fastest-growing banks in the world! This is truly wonderful news. However, this also comes with a great responsibility, as it largely depends on you how users will meet their financial needs. Our bank offers modern banking products available both online and in traditional bank branches.
Well... almost traditional. The bank's branches more resemble intimate co-working spaces with a play area for children than branches of a serious institution. Financial education is fundamental to not lose money and to be able to manage it consciously. Finances don't have to be scary, even the claim "Simple and easy financesTM" says so. It is thanks to this human-centered approach that your bank is successful worldwide. Our mission is simplicity, reminiscent of childhood memories when everything was simpler, when we used to drop coins into a piggy bank. After this short introduction, let's move on to specific tasks.
After the first meeting with the business department, you managed to gather some information. Unfortunately, it is not a perfectly prepared BRD document, but it's some basic knowledge. Your Product Owner outlines the scope: "Our task is to develop a tool for searching for our bank's branches, partner locations, and ATMs. It should work on both desktop and smartphone. We need to remember to make it as simple as possible. It's hard for me to determine at this stage whether all countries will have the same requirements, those I will present in a moment apply to all of Europe. They will be our kind of MVP, a starting point to gather feedback from the market. But before we start development, we need to design this tool. We have one sprint to prepare a prototype. So, in two weeks, we will be verifying our proposals with stakeholders. There isn't much time, but at this stage, a wireframe will suffice. Of course, RWD is a must.
A very important element will be the creation of a layout with the smallest possible effective user focus field. This will drastically influence the high usability of the solution.
The User Journey is very simple. The user needs to find our branch, a partner location, or an ATM. He should, therefore, be able to choose. He will most often be looking for the nearest points from his current location, but also by street or city. Of course, he must have a map with results at his disposal. It is very important that he can choose such a point with the following options:
Well... almost traditional. The bank's branches more resemble intimate co-working spaces with a play area for children than branches of a serious institution. Financial education is fundamental to not lose money and to be able to manage it consciously. Finances don't have to be scary, even the claim "Simple and easy financesTM" says so. It is thanks to this human-centered approach that your bank is successful worldwide. Our mission is simplicity, reminiscent of childhood memories when everything was simpler, when we used to drop coins into a piggy bank. After this short introduction, let's move on to specific tasks.
After the first meeting with the business department, you managed to gather some information. Unfortunately, it is not a perfectly prepared BRD document, but it's some basic knowledge. Your Product Owner outlines the scope: "Our task is to develop a tool for searching for our bank's branches, partner locations, and ATMs. It should work on both desktop and smartphone. We need to remember to make it as simple as possible. It's hard for me to determine at this stage whether all countries will have the same requirements, those I will present in a moment apply to all of Europe. They will be our kind of MVP, a starting point to gather feedback from the market. But before we start development, we need to design this tool. We have one sprint to prepare a prototype. So, in two weeks, we will be verifying our proposals with stakeholders. There isn't much time, but at this stage, a wireframe will suffice. Of course, RWD is a must.
A very important element will be the creation of a layout with the smallest possible effective user focus field. This will drastically influence the high usability of the solution.
The User Journey is very simple. The user needs to find our branch, a partner location, or an ATM. He should, therefore, be able to choose. He will most often be looking for the nearest points from his current location, but also by street or city. Of course, he must have a map with results at his disposal. It is very important that he can choose such a point with the following options:
- 24h ATM availability
- Internal ATM
- External ATM
- Disabled access
- Parking spaces
- Individual service
Of course, after selecting a given point, we should show more detailed information such as:
- Opening hours
- Full address
- Phone numbers
- Accessibility Access
- The possibility of booking a meeting (available only in our branches)
- "Show the way" function - integrated with the Google Maps API.
My Rationale for this Approach:
In crafting a solution for the client's needs, I felt it was imperative to begin with a comprehensive understanding of the current market landscape, hence the desk research. Analyzing competitors not only gave me insights into what users might expect but also highlighted potential pitfalls and areas of improvement.
Paper prototyping allowed me to remain agile, quickly iterating on feedback and refining the solution without investing excessive time in high-fidelity designs. The guerrilla tests were invaluable, providing immediate feedback on core elements of the design, ensuring the solution was user-centric from the get-go.
The high-fidelity wireframes, both interactive and static, were chosen to give stakeholders a clear, tangible representation of the solution, ensuring they could visualize the end product and provide actionable feedback.
This strategic approach, grounded in research and user feedback, ensured that the solutions I proposed were both innovative and user-centric.
Paper prototyping allowed me to remain agile, quickly iterating on feedback and refining the solution without investing excessive time in high-fidelity designs. The guerrilla tests were invaluable, providing immediate feedback on core elements of the design, ensuring the solution was user-centric from the get-go.
The high-fidelity wireframes, both interactive and static, were chosen to give stakeholders a clear, tangible representation of the solution, ensuring they could visualize the end product and provide actionable feedback.
This strategic approach, grounded in research and user feedback, ensured that the solutions I proposed were both innovative and user-centric.
Road Map
1. Desk Research
Why: To analyze the existing solutions in the market.
2. Competitor UX Analysis
Why: It's crucial to identify and study the best 2-3 competitive solutions to understand industry benchmarks and user expectations.
5. Hi-fidelity & Interactive Wireframes for viewport L
Why: Building upon the foundation set by the Low Fidelity Prototype, the High Fidelity Prototype for the ATM and branch locator tool brings the intricate details to the forefront. This phase introduces accurate colors, graphics, icons, and precise layout dimensions. It provides stakeholders and users with a clearer picture of the final product, ensuring the tool doesn't just function optimally but also looks appealing and matches the bank's brand identity. It's an essential step before the actual development to ensure both aesthetics and usability are on point.
Understanding the Problem:
The task is to create a tool for a modern bank that allows users to locate branches, partner facilities, and ATMs easily. This tool should be simple, user-centric, and accessible on both desktop and mobile platforms. It should allow users to search for the nearest branches or ATMs based on their current location or by entering a street name or city, and upon selecting a location, it should provide detailed information about it.
My Goal:
I wanted to learn about the tools people use to find bank branches and what they like in those tools.
Identification of Needs:
I wanted to find out what's popular now in bank search tools.
Sources of Research:
I explored industry reports from McKinsey and Deloitte, reviewed the websites of prominent banks like ING, Deutsche Bank, and HSBC, and read articles from financial tech websites.
Data Compilation:
From these sources, I gathered various data points and statistics.
Analysis:
I meticulously went through the collected data to extract meaningful insights.
Conclusion:
I listed out the significant findings from the research.
I wanted to find out what's popular now in bank search tools.
Sources of Research:
I explored industry reports from McKinsey and Deloitte, reviewed the websites of prominent banks like ING, Deutsche Bank, and HSBC, and read articles from financial tech websites.
Data Compilation:
From these sources, I gathered various data points and statistics.
Analysis:
I meticulously went through the collected data to extract meaningful insights.
Conclusion:
I listed out the significant findings from the research.
Key Discoveries (Based on McKinsey and Deloitte reports):
Mobility
Approximately 70% of users in Europe use mobile banking at least once a week.
Intuitiveness
For 82% of users, ease of use is the primary factor while choosing a banking app.
Security
A massive 97% emphasized that security in digital banking is paramount.
Personalized Offers
73% value apps that provide customized offers and insights.
Observations from bank websites:
Location Features
All banks provide an auto-detection feature for the user's location.
Filtering and Sorting
Almost every bank (92%) has a filter option to narrow down search results based on user criteria.
Detailed Information
Over 90% provide comprehensive branch information, including facilities for the disabled and parking availability.
Map Integration
98% provide maps that show branch locations and directions.
Emerging trends in locator tools:
Branch Ratings
Increasingly, banks are incorporating features that allow users to rate and review branches.
Augmented Reality
Some avant-garde banks are trialing AR features that help users locate the nearest branch or ATM.
Voice Assistant Integration
Locator tools are beginning to be accessible through voice assistants like Google Assistant and Siri.
Competitor UX Analysis
Accessibility
The locator tool is prominently displayed on the homepage, ensuring ease of access. This placement indicates a prioritization of user convenience. New users can instantly identify where to find branches or ATMs without sifting through multiple pages.
The locator tool is prominently displayed, ensuring rapid access. Such placement highlights the bank's user-centric design philosophy, making essential tools readily available.
The locator tool is somewhat nested within the site structure, requiring a few extra clicks for access. This could potentially deter users who want quick information, suggesting a need for more direct navigation pathways.
MAIN POINT: When users visit a website, they want things to be easy and fast. If they have to spend a lot of time looking for something, they might leave. ING does a great job by putting the most important tools up front. This means users don't need to search long. For our design, we should think about what the users will want to see first. Maybe we can ask some users what they think. This will make sure our website feels friendly and easy.
Search Functionality
Allows searches based on postal code and city. The absence of keyword searching can be a hindrance for those looking for specific services. A more advanced search option might be beneficial for a comprehensive user experience.
Offers comprehensive search options, including keyword searches. This allows users to not only find locations but also specific services, optimizing their search experience.
Offers basic search capabilities based on city and postal code. While this meets general search needs, incorporating keyword searches could enhance the user's ability to find specialized services or facilities.
MAIN POINT: People use different ways to search. Some use city names, others might use services they want. A good website knows this and offers choices. ING stands out because they give many ways to search. This means users can find what they want without getting lost. We should look at our search bar closely when designing. Making it smart will make users happy. We can test different search options to see what works best.
Filter
Options
Options
Users can filter results according to branches, establishments, and ATMs. The added filtering based on services provides a tailored experience, guiding users to the exact facilities they need.
Advanced filtering enables users to easily pinpoint specialized services. This granularity in options tailors the user experience, ensuring they find exactly what they need with minimal effort.
Standard filters are present with the addition of highlighting premium services. While this differentiates their premium offerings, expanding the filter options could cater to a wider range of user preferences.
MAIN POINT: When users visit a website, they want things to be easy and fast. If they have to spend a lot of time looking for something, they might leave. ING does a great job by putting the most important tools up front. This means users don't need to search long. For our design, we should think about what the users will want to see first. Maybe we can ask some users what they think. This will make sure our website feels friendly and easy.
Map
Integration
Integration
Features an interactive map providing real-time directions. Such integration facilitates quicker physical access to branches and ATMs, improving overall user experience.
The interactive map view with real-time travel directions facilitates users in reaching their desired location efficiently. Such integration is essential for those unfamiliar with the area or in urgent need of services.
While the map is legible, it lacks certain interactive features present in other banks. Offering real-time directions or traffic updates can elevate the user experience.
MAIN POINT: Maps are more than pictures. They guide users. A good map gives information, not just locations. ING has a map that does a lot. Users can see where to go and how to get there. When we add a map to our website, we should make it useful. Maybe we can add traffic information or show nearby places. We can also ask users what they want in a map. This will make our map the best for our users.
Information
Details
Details
Information about opening hours, services offered, and contact data is vital for users planning a visit, ensuring they are adequately informed beforehand.
The provision of essential details, along with images of specific branches, provides users a comprehensive overview, allowing them to make informed decisions before visiting.
Contains fundamental details, though some data occasionally seems outdated. Ensuring real-time data updates would foster user trust and reliability.
MAIN POINT: Users want to know more about a place before they go. Offering details like opening hours or services can help. It's like giving users a sneak peek. ING does a good job by giving lots of details. When we design, we should gather as much information as possible. Maybe we can even add user reviews or photos. The more users know, the more comfortable they feel.
Performance
Swift loading times, even during peak hours, signify a well-optimized platform, crucial for users on-the-go or in urgent situations.
The tool's fast and efficient performance across platforms illustrates the bank's commitment to providing a hassle-free user experience.
Minor delays in loading branch details have been noticed. Streamlining this would offer users a smoother and more efficient browsing experience.
MAIN POINT: No one likes waiting. If a website is slow, users might leave. All the banks know this and work hard to be fast. Especially ING, their site is quick even when many people visit. For our design, we need to check speed a lot. Maybe we can remove heavy pictures or videos. Simple designs can also be very beautiful and fast.
Mobile
Experience
Experience
While the design is mobile-friendly, reported issues indicate areas of potential improvement to ensure consistent usability.
The app is well-optimized and offers a seamless location-based experience, indicating a well-integrated digital ecosystem.
The app performs reasonably well, though sporadic issues reported by users suggest areas for improvement. Addressing these issues can provide a seamless experience across devices.
MAIN POINT: Many users will visit our website on their phones. A good mobile website feels like a good app. It should fit the screen and be easy to touch. ING's mobile site feels very smooth, almost like an app. We should test our design on many phones. Big buttons and clear texts can help. Also, we should avoid too many pop-ups. They can be annoying on phones.
Feedback
Channels
Channels
The absence of a clear feedback mechanism can hinder continuous improvement based on user input.
An integrated feedback system ensures user issues are addressed promptly, further cementing the bank's commitment to continuous improvement based on user feedback.
While there's an option to report issues, an immediate acknowledgment feature might reassure users that their feedback is valued.
MAIN POINT: Feedback is like a gift. It tells us what users think. ING listens to their users a lot. They even have a special system to get feedback. For our design, we should make it easy for users to talk to us. Maybe we can add a feedback button on every page. Or we can ask users for feedback after they visit. Listening to our users will make our website better and better.
Summary
When designing a locator tool, it's crucial to focus on user needs and make the experience as straightforward as possible. Drawing inspiration from ING, placing essential features at the forefront ensures users immediately find what they seek, akin to walking into a room and spotting your favorite chair. An effective search function is vital. By offering versatile search criteria, users can quickly pinpoint locations, services, or both, adapting the tool to their preferences. Just as filters can act like a magic wand in narrowing down choices, a well-integrated map can serve as a compass, guiding users with essential information, be it traffic conditions or nearby landmarks.
Providing detailed information about locations prepares users for their visit, acting as a mini-guide. However, all these features must be underpinned by speed. A seamless, fast-loading tool, whether accessed from a computer or a mobile device, ensures user satisfaction. A mobile-centric design, with clear text and easily tappable buttons, caters to the vast number of smartphone users. Lastly, continuous improvement is the key. By actively seeking and valuing feedback, we can refine the tool, ensuring it remains not only functional but also user-friendly. In essence, by blending the best practices from top banks and incorporating our unique touch, we can craft a locator tool that truly resonates with users.
