Vault Bank case study banner.jpg

Vault Bank Responsive Website

 

 

Timeline

June - July 2017 (6 weeks)

Role

UX/UI Designer, Researcher

Tools

Figma, Photoshop, After Effect, UserTesting.com, Google Meet


Overview

Vault Bank is a fast-rising start-up online bank that has introduced a new feature that allows users to send direct fund transfers to one another. This feature is designed to be convenient and easy to use while also protecting users from fraud.

To support this new feature, a responsive browser-based web app was designed. This web app allows users to send and track funds easily, and it also includes security features like two-factor authentication and confirmation passwords to ensure safeguards.


Design Process

Stanford Design Thinking Process is the design process that we followed to complete this project.

 
 

PROBLEM

Vault Bank's weak brand and security spell CATASTROPHIC.

Vault Bank is a relatively new bank with less than 10 years of public operation. This lack of track record may make it difficult for Vault Bank to gain the trust of potential customers, especially when compared to more established banks like Bank of America, Chase Bank, and Wells Fargo.

Vault Bank also lacks some key security features, such as identity verification and fraud prevention measures. This could make it more vulnerable to cyberattacks and fraud, which could further damage the bank's reputation and make it difficult to attract new customers.

Vault Bank also needs a faster and easier way to transfer funds while keeping web app screens responsive and optimal for all devices.


Constraints

Constraints Tightening the Noose on Vault Bank

  • Time deadlines: Vault Bank is under pressure to meet aggressive growth targets, which could lead to shortcuts and risky decisions.

  • Regulations constraints: The banking industry is highly regulated, which can make it difficult and expensive for Vault Bank to comply with all of the applicable requirements.

  • Limited funding: Vault Bank is a relatively small bank with limited resources, which could make it difficult to invest in new technologies and services.

These constraints are tightening the noose on Vault Bank, making it difficult for the bank to compete with larger and more established competitors. Vault Bank must carefully manage these constraints in order to survive and thrive in the long term.


THE SOLUTION

Streamlined Process & Enhanced Security

To address the problems of Vault Bank's weak brand and security and the need for a faster and easier way to transfer funds, we implemented a solution that focused on streamlining the process, enhancing security, and improving user experience. Changes we made:

 

Fund Transfer Process: Fewer Clicks, Faster Results, Simplified Process

 
  1. Fewer Clicks: We reduced the number of screens necessary to complete a transfer by merging several steps into one. This made the process more efficient and user-friendly, especially for mobile users.

  2. Simplified process: Improved user retention and increased conversion rates positively impact overall business success.

 

Security: We implemented a number of new security measures, including:

  1. Login credentials: Users are required to use a unique user name and password to login.

  2. Stronger authentication: We implemented two-factor authentication (2FA) to require users to enter a code from their mobile phone.

  3. Fraud prevention: We used machine learning to identify and prevent fraudulent transactions.

  4. Encryption: We encrypted all sensitive data transmitted between Vault Bank's servers and its customers' devices.

 

Two-factor Authentication

〰️

Two-factor Authentication 〰️

 
 
 

Elevate Experience with a Responsive Design

  1. Responsive Design: We used a responsive design for our web app, which ensures that our site looks good and functions well on all devices, including smartphones, tablets, and desktops.

  2. Enhance Optimization: We use Cloudflare, Inc. to enhance the speed of our fund transfer system delivery services while also improving cloud cybersecurity. This gives us the flexibility to handle spikes in traffic without sacrificing performance or security.

 

White paper research

Accelerating Progress with Insight: Empathizing for Better Online Banking

Starting my project with white paper research, I sought resources that would deepen my understanding and empathy towards bank users. My aim was to comprehend their needs, motivations, and goals better to create a product that would enhance their banking experience.

Upon discovering a valuable article from Nerd Wallet, titled "Is Online Banking Safe? How to Boost Your Banking Security" I gained vital insights into essential security practices for online fund transfers. This provided a crucial direction for my project, offering momentum and helping me focus on key user concerns.


COMPETITIVE ANALYSIS + THE GAP

The competition LACK REENFORCED SECURITY aspect.

Considering the previous statistics, I examined the four most prominent banking companies in the industry. Surprisingly, I found that the majority did not reinforce security in the verification phase before transferring funds - a key factor in boosting user confidence in the process. This gap then provided a prime opportunity for my proposed solution.

Our

Competitors

🧐

Our Competitors 🧐

 

Bank of America

Chase Bank

Wells Fargo

PayPal

 
 

To thoroughly understand the current market landscape and identify potential opportunities for Vault Bank, I conducted a competitive audit of major banking apps in the industry.

 

User survey

Asking the key questions to better understand our users

We conducted a pre-interview survey with 93 Bank users to learn more about their needs and challenges. The survey consisted of a mix of open-ended and closed-ended questions, including:

Survey questions:

  1. How satisfied are you with your current bank overall? (1-10 scale)

  2. What are the top two things you like most about your current bank?

  3. What are the top two things you dislike most about your current bank?

  4. How would you rate the following aspects of your banking experience at your current bank? (1-5 scale)

    • Customer service

    • Online banking platform

    • Mobile banking app

    • Online banking security

    • Branch convenience

  5. What specific banking products or services are most important to you?

  6. What are your biggest financial goals for the next year/five years/ten years?

  7. What would make you more likely to consider banking with another company?

 

Survey Goals

The survey results helped us to narrow down the usability study participants for Vault Bank's online banking platform. We also identified specific areas where users were struggling, which we focused on during the usability study.


USER INTERVIEWS

Interviewees were an essential piece of our investigation.

While research indicated that reinforced security was crucial for online banking, I conducted interviews with 5 regular users of online banking who experienced difficulties with their transactions. I asked them the following questions to identify patterns in their difficulties and to understand their needs better. The data collected was organized through affinity mapping.

TRASACTION QUESTIONS:

  1. Can you tell me about the last transaction you made using a banking app?

  2. How would you ideally like the transaction process to be?

  3. Can you describe a situation where you found the transaction process to be complicated? What made it difficult?

  4. What motivates you to use online banking in the first place?

  5. Have you ever abandoned a transaction due to security concerns or difficulties in the process?

Security Questions:

  1. How important is security to you when choosing a bank?

  2. What are your biggest concerns about online banking security?

  3. How confident are you in your ability to protect your financial information online?

  4. What security features do you use most often when banking online?

  5. How satisfied are you with the overall security of your bank's online banking platform?

  6. Have you ever experienced a security issue with your bank's online banking platform?

 

Sorting the information with an Affinity Diagram

 
 

The Main Insight

My interviewees found previous banking platforms LACKED “ACCOUNTABILITY”

Based on trends from my affinity mapping, it became clear that a complex process and lack of trust were significant issues for users during transactions. This revelation underscored the necessity of a solution to fill this gap, aiming to boost user confidence.

Major Insights

 
 
 
 
 
 

Bank User Persona

 
 

Design

Navigating Setbacks in Design

In the design phase, I deliberated between adding a sticky menu for quick navigation and requiring a password at each transaction's end. Recognizing that the sticky menu could clutter the interface while a password requirement would bolster security, I chose to focus on security, thus forgoing the sticky menu but maintaining password confirmation for transactions.


TESTING + IMPROVEMENTS

3 major improvements in my design

Based on constructive feedback from 5 peers and my mentor, I consistently refined my design over six weeks, resulting in significant improvements.

 
 

Saving Time and Resources with a Design System

We built a comprehensive design system featuring reusable components, consistent brand colors, iconography, and typography to ensure a cohesive and intuitive user experience across mobile and desktop platforms.

Vault Design System empowered us to deliver a unified digital experience, saving time, resources, and most importantly, building trust with our users.


The Final Screens

The final product

Here's a look at the responsive website displayed across three different device screens.

 

Desktop: login screen

 
 

Tablet: Select recipients and send funds

 
 

Mobile: Review and confirm!

 

Try out Vault Bank's app in tablet landscape mode.

 

‼️Test Vault Bank app for yourself, send Granny $150 for homemade apple pie and knitted hat. 💪🏽😁‼️

 

Final Results

A More Efficient, Secure, and User-Friendly Fund Transfer Experience

Vault Bank's new fund transfer process has been met with resounding success, delivering significant improvements in speed, security, and user experience.

 

Users approve of changes, results indicate.


CONCLUSION + LESSONS LEARNED

Vault Bank was my second UX design project, a true eye-opener (Cheers to that)! 🎉 This wasn't just a task; it was exploration and learning. Key discoveries include:

  • Embracing Iteration: Six iterations taught me the power of refinement in creating an intuitive fund transfer experience.

  • Communicating Trade-offs: Articulating the 'why' behind decisions like 'select recent recipients' or 'amount suggestion buttons' became vital, enhancing UX.

  • Responsive Design's Convenience: Prioritizing responsive design, Vault Bank now easily adapts across all screens, making transfers and account management a breeze.

  • Failure is Not a Dead End. Mistakes were made, but each one was a lesson, guiding me toward a more user-centered design. From tweaking the responsive design to reinforcing security, I realized that UX has no wrong turns, only learning curves.

  • The Journey Continues: As I look ahead, UX remains at my core — a reminder that every interaction can be part of something special. 🤗

Bottom Line: A well-crafted experience isn't one-size-fits-all but tailored for each user.


For more work inquiries, or if you'd like to grab a coffee and chat, feel free to email me at wnoelux@gmail.com ☕️✨

Thank you for reading! 🧠

Jump to Top of Page Jump to the top ☝🏽😃

Check out My Other Case Studies

H&R Block + CoinTracker

CoinTracker joins H&R Block: The new gold standard for crypto tax filing!

O’Kibbles

Transforming pet food shopping into an easy, accessible experience for every owner.

Make it stand out

Whatever it is, the way you tell your story online can make all the difference.

Afro Curls and Cuts

Revitalizing Afrocurlsandcuts.com Traffic & Income through Strategic Research


Send en Email