Winning trust through visual design

Project Overview

This was a student project in General Assembly's User Experience Certificate Program. The goal was to design one high-fidelity static prototype of a responsive mobile app.

Wintrust Bank, a local Chicago bank with over 175 locations, has been working for years to provide financial literacy to its customers as they promote healthy habits that will benefit customers and their families.  

Role:

Product Designer, UX Researcher

Timeline:

3 Weeks

Methods:

Secondary Research, Contextual Inquiries, User Interviews, Competitive Analysis, Comparative Analysis, Heuristic Analysis, Accessibility Analysis, Affinity Mapping, Persona Development, Secondary Research, Contextual Inquiries, User Interviews, Competitive Analysis, Comparative Analysis, Heuristic Analysis, Accessibility Analysis, Affinity Mapping & Persona Development

Problem & Challenges

Wintrust has realized that many of their customers are finding different ways to educate their families on financial responsibilities and wants to help by providing access to financial literacy tools and resources in a new mobile app. Since Wintrust did not have an existing mobile app, I would be starting from a blank slate and would need to analyze their current website before moving forward. Their current website did not reflect the charm of their brick and mortar atmosphere.

I needed to:

• Figure out how to make this new feature easily accessible.
• Consider ways to ensure the new rollout is easy to navigate and understand for the user.
• Consider different ways we could educate Wintrust's customers on financial literacy and figure out how that might look in a mobile app.

Website Audit

Before designing, I conducted contextual inquiries, user interviews and an audit on Wintrust’s current website to understand the areas for improvement and to get a sense of the banks current visual style.

After an initial audit, I discovered that Wintrust’s website was outdated and lacked a point of differentiation. It was not clear why new customers should bank with Wintrust over so many other banks. The site was not easy to navigate due to the overwhelming amount of content and users are unable to manage or open accounts.

Key takeaways from inquiries and interviews:

• The original site has poor information architecture.
• Purpose of the original Wintrust site was not clear upon first impression.
• Site is outdated and lacks point of differentiation.
• Users are unable to open an account online.

Before designing a new app for Wintrust Bank, I decided to first address user concerns that came up in user interviews. This led to a low fidelity redesign of the Wintrust desktop site that you may find here.

Because Wintrust did not request a desktop site redesign, I decided to not take the desktop redesign to high fidelity. However, I thought it was important to highlight how a desktop redesign would solve the problems that had come up in the original site audit and would simplify the account opening process.

Analyze & Define

After analyzing my findings from research and the website audit, I created a minimalist, timeless, classic, and traditional design theme.    

The goal was to maintain Wintrust's traditional and classic theme, but modernize it by making it minimalist and timeless.

Type System

Color Palette

Wintrust’s original orange and blue were both used. I used the orange as an accent color to highlight important features, and the blue as the main color in the new app design.

Cool blue is a cooler color that provides color balance against the darker orange and blue.  

Classic black was used for text.

Final Design

In order to provide Wintrust's customers with access to financial literacy resources, I needed to implement a way for users to sign up for informational workshops, in app.

In my design, users now have the ability to:

• Register for in person and virtual workshops on various financial topics.
• Explore and search for topics that matter to them.

Search & register for workshops

Iteration: Search by availability

In my initial sketches, I wanted to offer users convenience by adding a "search by availability" option. Ideally, they would be able to choose a preferred day and view available workshops for that day.

When conducting usability testing on the low fidelity prototype, I found that users had a hard time clicking on the boxes in the calendar because they were too small. I decided to get rid of it all together to only include pertinent information on this screen, and to not overwhelm the user with too many options.

Testing the final design

For this specific prototype, we tested 3 participants for Usability. All of varying ages and current banking app users. Each user was given a simple task: to enroll in an in-person workshop about Budgeting and Smart Spending.

Key findings:

• Users loved the way the prototype looks and feels.
• Users thought the prototype was simple and easy to use.
• 100% of users were able to complete the task without additional assistance.
• There was no feedback for iterations.

Key Screens

Next Steps

If I were to continue working on this, I would re-design Wintrust's entire website focusing on improving their information architecture and visual design. Build out the "open an account" feature on mobile app and add educational videos and articles to the financial literacy resources section of the mobile app.