Wells Fargo Bank has contacted you to expand their personal finance management capabilities for their mobile app. As a large national bank in the U.S., serving millions of households, Wells Fargo wants to use their reach to improve the financial health of its customers. Their current mobile app is not stellar in terms of UX, UI, and suffers from low functionality. The features that they are offering focus primarily on spending, making payments, and sending money. Wells Fargo would like to round out their offerings by providing users with personalized features that allow them to manage their personal finances.
My Design Process
I followed human centered design and lean UX design thinking process to make sure that my design decisions were supported through user research and feedback.
In order to create an online shopping experience for Wells Fargo that's simple, enjoyable and lives up to the expectations of users and their needs, I needed to better understand the potential users of the site. My first step was to develop a research plan and understand what my research goals were. These are the questions my research sought to answer.
I executed a competitive analysis, comparing Wells Fargo's top 5 personal finance management competitors against one another. Each competitor’s product feature was analyzed and from their I assessed strengths/weaknesses associated with each brand. In this exercise I began to architect provisional personas.
Site Map and Task Flow
When it came to mapping the information architecture of the feature, it made sense to start from a high level and hone in. I started with a broad site map then created a user flow that could also double as a task flow. Creating these documents helped me visualize designs for each portion of the feature.
Based on the user research findings and UI requirements, a selection of wireframes were built out. These wireframes were built in a responsive framework, including a version for desktop, tablet and mobile. Annotated Wireframes were additionally created to ensure proper communication of various UI features.
Initially through sketching I established the broad outlines of how the app would look then I transition those into low fidelity wireframes. After developing a clickable prototype and receiving feedback I set about transforming what I had into high fidelity mockups. Through a process of visual and UI iterations I transformed my designs into high fidelity mock-ups of the website and it's capabilities.
Final High-fidelity Wireframes (prior to usability testing)
Iteration and Implementation
Created a clickable prototype using the prototyping tool Invision, built additional screens to make the prototype functional. I performed usability tests to ensure my prototype 'made sense' and actually benefited the user in achieving their goals. Took the subsequent feedback and implemented design changes.
I used Sketch's prototype feature to create a high fidelity prototype of the app and carried out a series of tasks with a few respondents who fit my general persona
The results from the usability tests were compiled into an affinity map which lays a roadmap for what went well and what changes need to be implemented in the design. The Affinity map states a series of design recommendations/"improvements" which are listed below.
After completing final designs, I put them through Zeplin so UI developers could take my designs and this information to start creating it.
Design is fluid and constant. The next steps for this project involve rolling out additional screens for all elements of Wells Fargo's personal finance management feature instead of the wireframes and prototypes for just the first time investment user. With each set of designs will be an additional effort to continue testing and iterating on those designs.