Case Study:
Case Study:
USA Financial Responsive Website Design
USA Financial Responsive Website Design
Embedded Files
The product
The product
USA Financial is a technology-driven financial services company leading the way in digital banking. The company provides innovative banking products and services to customers nationwide in the U.S. The company needs a website to help existing and potential customers create and manage accounts easily and securely.
Project Overview
Project Overview
The problem
The problem
People are restricted to traditional financial products and services with almost no interest. People would like to have an easy way to manage financial needs anytime and anywhere with more interest. However, people hesitate or are reluctant to create accounts online for some reasons.
The goal
The goal
Design a responsive website that allows users to create and apply for accounts easily and securely on any device, anytime .
My role
My role
UX researcher and designer. Using Adobe XD to design an account creation flow for a responsive website from concept to delivery.
Responsibilities
Responsibilities
Empathizing with users, defining problems, ideating solutions, conducting interviews, designing paper & digital wireframes, creating low & high-fidelity prototypes, conducting usability studies, accounting for accessibility, and iterating on designs.
Understanding the User
Understanding the User
Summary
Summary
I conducted interviews and created empathy maps to better understand the users and their needs. I discovered that many people hesitate to create banking accounts online without real person’s help. Research has also revealed that people feel the process of creating accounts online is confusing and insecure, especially at the verified stage.
User Pain Points
User Pain Points
Time:
Time:
People don’t have enough time to answer verification questions and struggle to find/read fine prints and unfamiliar term of conditions.
Accessibility:
Accessibility:
People who have limited English skills need translation features. Some financial websites are not equipped for people with disabilities.
Support :
Support :
People would like to reach online support easily in the process of creating accounts.
Problem Statement and Persona 1
Problem Statement and Persona 1
David is a busy working adult and a businessman who needs an intuitive financial website because he wants to manage all his financial needs anytime and anywhere.
Problem Statement and Persona 2
Problem Statement and Persona 2
Carolyn is a busy college student who needs a simple website to open and use accounts easily because she wants to pay for her expenses quickly and earn more interest.
User Journey Map 1
User Journey Map 1
Mapping David’s user journey revealed that users needed a feature to compare accounts and a quick overview on all products.
User Journey Map 2
User Journey Map 2
Mapping Carolyn’s user journey revealed that users needed a feature to compare rates, fees, and options for paying bills.
Starting the Design
Starting the Design
Sitemap
Sitemap
My goal here was to create an information architecture that would improve overall website navigation. The structure was designed to make things simple and easy to find. Organizing detailed information to be easily found and read is crucial.
Paper Wireframes
Paper Wireframes
Keeping the user pain points in mind about navigation, features, buttons, and information placement: I sketched out paper wireframes for each screen for the website.
The homepage wireframes focus on placing navigation menus on the above the fold to ensure people can access what they need quickly and easily.
Screen Size Variations
Screen Size Variations
Customers access the website on a variety of different devices. I’ve worked on designs for additional screen sizes to make sure the site would be fully responsive
Digital Wireframes
Digital Wireframes
Moving from paper to digital wireframes made it easy to understand how the design could help address user pain points and improve the user experience. Prioritizing helpful buttons and information locations on the home page was a key part of my strategy.
Screen Size Variations
Screen Size Variations
Low-fidelity Prototype
Low-fidelity Prototype
I connected all of the screens involved in the account creating flow and received feedback on the design from other designers about placement of buttons and page organization. I have implemented several suggestions in places that address user pain points. Please view the low-fidelity prototype for USA Financial website.
Usability Study Findings
Usability Study Findings
Help Button:
Help Button:
Users want to access Help button easily during the process of creating accounts.
Accessibility:
Accessibility:
Users who have limited English skills need a translation feature on the website.
Time:
Time:
Users need more time to read verification questions and fine prints.
Refining the Design
Refining the Design
Mockups 1
Mockups 1
Based on the insights from the usability study, I changed “Customer Support” link to become “Help” Floating Action Button and added a "Translation" button on every screen.
Mockups 2
Mockups 2
I added “Help” Floating Action Buttons and Translation buttons on every screen of account creation flow.
Mockups 3
Mockups 3
Screen Variations
Screen Variations
I included changes from the usability study in my mockups based on my earlier wireframes. Because users create accounts from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet, so users have the smoothest experience possible.
Key Mockups
Key Mockups
Accessibility Considerations
Accessibility Considerations
Headings
Headings
I used headings with different sized text for a clear visual hierarchy.
Landmarks
Landmarks
I used landmarks to help users navigate the site, including users who rely on assistive technologies.
Screen Readers
Screen Readers
I designed the site with alt-text available on each page for screen readers to access it smoothly.
High-fidelity Prototype
High-fidelity Prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype. It includes the design and button changes made after the usability study. Please view the high-fidelity prototype for USA Financial website.
Going Forward
Going Forward
Takeaways
Takeaways
Impact:
Impact:
Our target users shared that the design was intuitive to navigate in the process of creating new accounts. It really thinks about how to meet their needs and feels easy to create accounts online.
What I learned:
What I learned:
I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the users when coming up with design ideas and solutions.
Next Steps
Next Steps
Usability Study
Usability Study
Conduct follow-up usability testing to validate whether the pain points users have experienced are effectively addressed on the website.
Features
Features
Identify any additional areas of need and ideate new features.
Trust and Security
Trust and Security
People trust human help to create accounts and are afraid of internet scams and identity theft when applying for new accounts online, especially with newly established online financial firms. Consider solving security issues.
Page updated
Google Sites
Report abuse