USAA Bank Agile Web Design
I joined USAA for a 12-week fellowship through Hiring our Heroes Military spouse program. I had the opportunity to intern with USAA's Agile transformation team as a User Experience consultant. I had an amazing experience working on various projects throughout the summer. One of my project goals was to design a visual system that allows bank consultants to easily learn Agile practices, collaborate cross-functionally across teams and have direct access to the Agile Transformation team.
USAA MSFP Fellowship
San Antonio, Texas
Duration
Duration
12 weeks
Tools
Tools
Adobe CC, Figma
Team
Team
Agile Portfolio Transformation Team
Agile Portfolio
Transformation Team
Challenge
The Bank Transformation team is dedicated to successfully transitioning the bank as a whole to embrace Agile practices. Our goal is to translate the bank business architecture into a design system that allows consultants to access all information about bank operations with their transition.
Results
The site featured a clean, clutter-free interface, making it easier for users to navigate and integrated slack to improve collaboration across among the bank's different departments.
The improved onboarding process resulted in a 33% increase in page viewers and 1,579% increase on average time spent per user.
In addition, we included the bank consultant's roles and responsibilities through the Agile transformation to provide users with a point of contact.
Process
Research & Analysis: We conducted user interviews among bank consultants to understand the pain points and user needs. I had continuous communication with bank consultants to gain a comprehensive understanding of the bank's architecture. After researching, we discovered that users had no way to contact the transformation team other than through email, this was causing friction for users because of a large volume of emails to respond to, this led to a poor user experience for both the individuals receiving the emails and those trying to contact them.
Information Architecture: Based on the research findings, we restructured the bank's architecture by utilizing a site map to provide an overview and map out path users will take, it was important to discuss a well-structured hierarchy to ensure a positive user experience by reducing frustration and confusion during the bank's transition.
Wireframing & Prototyping: We designed low-fidelity wireframes to visualize the new layout and navigation. After analyzing the bank's architecture, we informed consultants the importance of having a homepage (which was not present before). The home page is a critical component of UX because it serves as the entry point for users to find material especially with the bank's delicate state of transition.
Usability Testing: The team conducted usability tests with bank consultants and fellows in our team. Based on the feedback, we had to restructure our site map. Transitioning a bank to an Agile methodology leads to an evolving environment where information is subject to frequent changes. After our usability tests, we made necessary adjustments to the website's structure to make sure users have access to up to date- information.
Visual Design & Style Guide: Our goal was to keep a clean conservative layout. Choosing a legible font size was important so users could prioritize readability to ensure that they can easily find information. It was important for us to limit creativity for the sake of not distracting users with excessive animations or distracting imagery.
Navigation and layout
We designed low-fidelity wireframes to visualize the new layout and navigation, iteratively refining them based on user feedback and the bank's architecture. We took the opportunity here to really personalize and visualize the connections users need readily available to them, ensuring that users can easily understand and navigate the interface.
Design and style
Coming up with a style guide was challenging. As a UX designer, it was important to consider feedback and identify any limitations or restrictions. We decided to avoid the use of animations and carefully selected imagery to draw user into finding data. I also collaborated with another designer, Nadia Brumfield. Collaborating with another designer meant we had to be in sync and ensure both of us have a thorough understanding of design goals. We shared mood boards and did a brief competitive analysis of other sites by working together, we created a cohesive and user-friendly design system that benefits the entire bank.
How can we give users direct access to the team?
We integrated slack said good riddance to the never-ending emails. We also included all the consultants from the bank's Agile portfolio team with a description of their role in the Agile transition. This was included in case user's need to communicate directly with a specific consultant. Integrating slack was so successful that other teams outside of the Agile team adopted this method.
I was able to validate the design systems success by asking consultants specific questions about their interactions with each page. I created a script of questions to ask during our system demo.
Script questions:
How did you feel about the bank’s organization and presentation of the content? Was it helpful in understanding the Agile transformation?
Were there any areas of the website where you felt the Agile-related information could be better organized or presented differently? if so how?
Do you have any suggestions for improving the website's design to better reflect Agile practices and enhance the user experience?
Usability Testing
Usability testing and asking specific questions on how users navigate contributes to an iterative design approach, ensuring that the product evolves to meet user needs and expectations.
In summary, the business consultants were satisfied with results, validating a successful usability test is a well-structured and executed evaluation process that provides valuable insights, actionable recommendations, and defined our final product.
Successful Results
User Experience is not a linear process
We designed this site map twice after communicating closely with consultants, using a site map gave us an opportunity to communicate and make changes with ease. It was important for us to also create a guide for consultants. This made it easier for us advocate and defend our choices with how we structured the business architecture.
Navigation and layout
We designed low-fidelity wireframes to visualize the new layout and navigation, iteratively refining them based on user feedback and the bank's architecture. We took the opportunity here to really personalize and visualize the connections users need readily available to them, ensuring that users can easily understand and navigate the interface.
How can we give users direct access to the team?
After integrating Slack, we said good riddance to the never-ending emails. We also included all the consultants from the bank's Agile portfolio team with a description of their role in the Agile transition. This was included in case user's need to communicate directly with a specific consultant. Integrating slack was so successful that other teams outside of the Agile team adopted this method.
Usability testing
I was able to validate the design systems success by asking consultants specific questions about their interactions with each page. I created a script of questions to ask during our system demo.
Script questions:
How did you feel about the bank’s organization and presentation of the content? Was it helpful in understanding the Agile transformation?
Were there any areas of the website where you felt the Agile-related information could be better organized or presented differently? if so how?
Do you have any suggestions for improving the website's design to better reflect Agile practices and enhance the user experience?
Successful results
Usability testing and asking specific questions on how users navigate contributes to an iterative design approach, ensuring that the product evolves to meet user needs and expectations.
In summary, the business consultants were satisfied with results, validating a successful usability test is a well-structured and executed evaluation process that provides valuable insights, actionable recommendations, and defined our final product.
Results: I was able to validate the design systems success by asking consultants specific questions about their interactions with each page. I created a script of questions to ask during our system demo. Usability testing and asking specific questions on how users navigate contributes to an iterative design approach, ensuring that the product evolves to meet user needs and expectations.
In summary, the business consultants were satisfied with results, validating a successful usability test is a well-structured and executed evaluation process that provides valuable insights, actionable recommendations, and defined our final product.
Results: I was able to validate the design systems success by asking consultants specific questions about their interactions with each page. I created a script of questions to ask during our system demo. Usability testing and asking specific questions on how users navigate contributes to an iterative design approach, ensuring that the product evolves to meet user needs and expectations.
In summary, the business consultants were satisfied with results, validating a successful usability test is a well-structured and executed evaluation process that provides valuable insights, actionable recommendations, and defined our final product.
Design and Style
Coming up with a style guide was challenging. As a UX designer, it was important to consider feedback and identify any limitations or restrictions. We decided to avoid the use of animations and carefully selected imagery to draw user into finding data. I also collaborated with another designer, Nadia Brumfield. Collaborating with another designer meant we had to be in sync and ensure both of us have a thorough understanding of design goals. We shared mood boards and did a brief competitive analysis of other sites by working together, we created a cohesive and user-friendly design system that benefits the entire bank.
Usability Testing
I was able to validate the design systems success by asking consultants specific questions about their interactions with each page. I created a script of questions to ask during our system demo.
Script questions:
How did you feel about the bank’s organization and presentation of the content? Was it helpful in understanding the Agile transformation?
Were there any areas of the website where you felt the Agile-related information could be better organized or presented differently? if so how?
Do you have any suggestions for improving the website's design to better reflect Agile practices and enhance the user experience?
Successful Results
Usability testing and asking specific questions on how users navigate contributes to an iterative design approach, ensuring that the product evolves to meet user needs and expectations.
In summary, the business consultants were satisfied with results, validating a successful usability test is a well-structured and executed evaluation process that provides valuable insights, actionable recommendations, and defined our final product.
Final Product
Final Product
One of the key indicators of a success was an increase in user engagement metrics. Google Analytics showed me if users are spending more time on the website or app, viewing more pages per session, or interacting with content more frequently. We successfully improved navigation, received positive user feedback, and bank consultants confirmed our structure alignment with project goals.
Outcome: One of the key indicators of a success was an increase in user engagement metrics. Google Analytics showed me if users are spending more time on the website or app, viewing more pages per session, or interacting with content more frequently. We successfully improved navigation, received positive user feedback, and bank consultants confirmed our structure alignment with project goals.
Outcome: One of the key indicators of a success was an increase in user engagement metrics. Google Analytics showed me if users are spending more time on the website or app, viewing more pages per session, or interacting with content more frequently. We successfully improved navigation, received positive user feedback, and bank consultants confirmed our structure alignment with project goals.
Takeaways
Completing my fellowship with USAA allowed me to practice demoing my work and presenting my critical thinking skills in front of stake holders. It was important for me to advocate for UX and the importance of being confident and presenting data that ultimately informed my design decisions.
I also had the privilege of working with truly inspiring people in the military community. The mentorship I was provided with gave me constructive criticism and valuable guidance.
Just before completing my fellowship, I was given the opportunity to become a Scrum Master. I successfully obtained my certification and became passionate about Agile practices. Agile frameworks encouraged me to be open and transparent communication among team members and stakeholders.
Special shout out to our mentors Steve and Trent for supporting my growth and making an investment in my success!
Completing my fellowship with USAA allowed me to practice demoing my work and presenting my critical thinking skills in front of stake holders. It was important for me to advocate for UX and the importance of being confident and presenting data that ultimately informed my design decisions.
I also had the privilege of working with truly inspiring people in the military community. The mentorship I was provided with gave me constructive criticism and valuable guidance.
Just before completing my fellowship, I was given the opportunity to become a Scrum Master. I successfully obtained my certification and became passionate about Agile practices. Agile frameworks encouraged me to be open and transparent communication among team members and stakeholders.
Special shout out to our mentors Steve and Trent for supporting my growth and making an investment in my success!
Wanna know more about me?
Let's chat about the future of UX!
Wanna know more about me?
Let's chat about the future of UX!