Request for Information

Wells Fargo

Expertise: UI Design | Responsive Web | Design Systems

At Wells Fargo, I was tasked with creating an experience for Wells Fargo’s business customers to be able to verify and update their company information on their own. This tool was called Request for Information or RFI. Business customers had to periodically review and update any aspect of their company such as changes to legal entities, ownership structure or markets served. This was a first-of-its kind product that was entirely digital. Before, they worked with a relationship manager to help them navigate the RFI process. I worked with the engineering, product, user research and design teams to develop a self-service product for Wells Fargo’s business customers.

Team:

1 UX Designer (me)

1 Project Manager

1 Content Strategist

2 Engineers

1 User Researcher

1 Systems Analyst

1 Prototyper

MY ROLE

My role was a visual designer for this project with the task of developing conceptual mockups and final designs for RFI, which consisted of multiple areas related to company's structure and ownership.

THE CHALLENGE

How can we get customers to adopt a digitized process for verifying and updating their company information and make it engaging?

At this time, it was a manual process and we weren’t sure if long time business customers would adopt a new digital tool without the help of any relationship manager. Since this was a self-service tool (for the most part), the experience had to be engaging and intuitive that customers would easily and effectively update their critical company information without the need of a relationship manager helping them along the way.

The process involved the business customer to sign lots of disparate documents with little insight into the company verification process. It was way too cluttered and relied exclusively on the relationship manager, so there was no way to scale effectively.

MY APPROACH

To ensure a high level rigor in the UX design process, I, along with another UX designer established a core set of design documents, including personas, styleguide specifications and user flows. To ensure we got through design reviews and iterations, I set up a weekly cadence of meetings with the project stakeholders, including engineering, accessibility, creative and product teams.

Conduct Interviews

We conducted interviews with treasurers, cash managers and CFOs of several companies in the Bay Area to understand their task flows, goals and motivations.

Develop Personas

Based on the interviews, we developed three personas that encompasses typical users of the CEO portal.

Ideate

I created mockups that revolved around the three personas that addresses their goals and struggles using the portal.

Validate

A user researcher conducted a usability test using a prototype based on the wireframes to validate against a set of metrics and objectives.

By following this approach, I was able to focus on creating use cases that would be converted into user stories. This was in Sprint -1 in Agile development process, so I got approvals on the wireframe from the design director and then had a meeting with the larger project teams (i.e. Engineers, QA, product, business analysts, creative) to break up the wireframes into individual user stories.

During certain stages of the design process, we conducted usability testing sessions. I created the prototype based on use cases we wanted to test because we had questions about the interactions and flows of those use cases. After the usability study was completed, I worked with the user researcher to develop design recommendations on the synthesized findings. This led to a more robust and effective designs.

As part of this approach, we wanted to know who are the typical users that will be verifying and managing their company’s structure and business information? Therefore, we created a scenario in which case there was a company called 'Nathalie’s Naturals’, a company in the health foods space and defined three personas.

USER FLOW

By conducting multiple discovery sessions and workshops with the project stakeholders, I was able to get a clearer vision for the company information verification and change process.

USABILITY TESTING

For the testing, we aimed to understand two major areas:

  • How users would adopt a digital process for something they’ve been doing manually

  • How to incorporate complex information into an intuitive and understandable digital process

The main takeaways from the user testing were:

  • There were little focus on each step to complete and proceed forward. How users would adopt a digital process for something they’ve been doing manually

  • Users were aware of the steps needed to complete the periodic review of their company, however many felt there were “too much going on” on the screen.

    “There should be more focus for each step.”

  • There were confusion over lack of consistency and the steps to complete wasn’t streamlined as to completing each task

  • Grouping multiple steps together was confusing and unclear to users

To address the above findings, I came up with several design recommendations, including:

- Creating a progressive disclosure flow for each task and allowing user to come back to the steps hub to continue with next step or submit the form if it was the final step.

- By utilizing a modal layer, users can make edits in a modal and return back to the original page from which they came from.

FINAL DESIGNS

The purpose here was to create a clear, focused approach to each step and its multiple sub-steps and status of each step.

Tabular view of customer’s company information.

Break down complex steps into multiple simple steps and follow a wizard-like flow to complete each task.

Edit Modal allows customers to edit any business information, no matter how complex, quickly and efficiently. The process is seamless as editing is done, the customer goes back to the step’s main page to edit another section.

Each step contains some sub-steps. Each step follows a progressive disclosure approach and is sequential, that is, every step needs to be completed before moving onto the next step.

Modal layer allows for easier navigation to the original page. Since modal sits on top of the original page, they can simply close the modal to return to the original page.

Each container has an Edit action in case user wants to update the current information.