Project Overview
​
​
For many years, WinTrust Bank has worked to provide education to its customers in order to promote financial literacy. They have identified that parents are seeking out different ways to educate their children about financial responsibility, and want to do their part to help grow their customer’s knowledge. My team and I were tasked with creating an innovative, intuitive digital experience that would benefit the financial education of WinTrust’s customers.
Timeline: 3 Week Sprint
Team: Myself, Kaylie Deng, Yuta Okuyama, and Aleksandra O.
Role: UX Researcher, Presentation Lead
Contributions: Competitive and Comparative Analysis, User Interviews, Affinity Mapping, User Flows, Sketches, Wireframes, Usability Testing
User Interviews
​
Before we began the design process, we wanted to know more about the feelings people associated with money and banking, and how they initially learned about banking. I conducted two user interviews: one with a young adult and one with a parent or a guardian. Eight interviews were conducted in total.
Main Takeaways
-
Users did not have positive thoughts about banking and money.
-
Users learned banking from parents and from online resources
-
Watching videos was the most popular learning method
-
Parents worried about their child's security, and wanted notifications about suspicious activity
Competitive and Comparative Analysis
​
Our team focused our research to three specific criteria: Banking, Education, and Interaction. We analyzed both direct and indirect competitors that fit these criteria, and examined their features and their interactions.​​ I analyzed the banking apps for Bank of America and Chase, as well as the educational features and interactions of HitRecord. The composition and use of color on these sites also gave inspiration for our design.
Meet our Personas!
User Flows
We created two user flows that highlighted each user’s journey performing a task in our app. I created Dylan's Flow with my teammate, which shows how Dylan would find and enroll in a class about savings accounts on the app. Jean's flow shows how she would change the privacy settings on her joint account with Dylan.
Dylan is confused about banking and wants to learn more about it.
Dylan downloads WinTrust Bank's new family banking app.
Dylan searches under the "Education" tab to see what classes they offer.
Dylan finds a class he is interested in, and watches video tutorials.
After completing all of the lessons, Dylan has completed his first class!
Dylan's mother is so proud of him! He feels more confident and wants to take more classes.
Check out
the storyboard I created to help visualize Dylan's emotional journey.
Usability Testing Results
​
Once we were ready with the low fidelity prototype, we conducted our first round of usability testing. I created a usability testing plan in which participants were given three scenarios to complete with a moderator asking questions after each task was completed. We tested the prototype with eight participants.
- 100% of participants understood the core premise and overall concept of the app
- 100% of participants successfully completed the tasks
- 100% of participants enjoyed the overall experience
- 10% of participants showed hesitation and made mistakes, explaining that they’ve never used a banking app like this before
​
Style Guide
Before we began our mid-fidelity prototype, one of my teammates created a design system so that we would maintain an effective and cohesive design. It included a text styles system and a grid system that was easily accessible for all team members. In addition, a color palette was created based on the color palette of the Chicago flag, which highlights the roots of WinTrust and invokes a welcoming and fun feeling.
Design Iterations
- Changed some of the wording to make it more personalized, youthful, and uplifting
- Changed to pen icon and placed it on the account card
- Deleted the “profile” icon and replaced it with a more prominent bell button
- Changed call to action buttons to “In Progress”, “Enroll”, and “Competed” to indicate different learning stages
Check out the Prototype!
Next Steps
​
After making iterations to our design, my team and I outlined what the next steps would be if we continued working on this project. Our next steps would include:​​
​
- More usability testing after implementing new design iterations
- Refining our existing design system, interactions, and UX writing
- Adding and updating videos and reading materials regularly
- Adding interactive practice exercises and mock scenarios