Wells Fargo Internal Search Redesign

 
 

Note: Due to signing an NDA, app screens in this case study are NOT the real production screens. With permission from management, they are recreations with entirely different typography, colors, spacing, flows, etc.


Tools

HTML, CSS, JavaScript, Skype (interviews), Microsoft Excel, Microsoft Powerpoint

 

Background

Teamsites Search is Wells Fargo’s internal search engine. The design had not been updated in many years and the search results often received very negative feedback from users. I previously completed a separate research project interviewing 20+ team members on how to improve the search results. This study was a redesign of the search results page itself to make it more modern and improve productivity or the 280,000+ Wells Fargo employees.

This study involved two rounds of testing. Both rounds of interviews, prototype iterations, and Round 2 coding were done solely by me.

Round 1: Conduct research interviews and usability tests on the current search results page and an entirely new desktop and mobile search results page prototype. The functioning HTML/CSS/JavaScript prototype was a complete UX/UI redesign.

Round 2: Iterate on the design based off those results using HTML, CSS, and JavaScript. Run the tests again to gain buy in from company management so we can give Wells Fargo employees the best search experience we can give them. *Spoiler alert for those that don’t like scrolling* We got the buy in 😊

Purpose

Team members use Teamsites Search as a primary way to find information within Wells Fargo (anything from company Holiday calendars to specific documents relevant to their individual roles). My project manager opened this project to study team member expectations around the search experience and understand the types of enhancements team members would like to have. Search at the time was also not optimized for mobile, so a large part of the research was to focus on that experience.

 

Benefit to Wells Fargo

The benefit to team members is an improved search experience that provides them with the information they need in a fast and user friendly way. In turn, with knowledge based off the results from a previous study I completed, improving the search experience could save Wells Fargo tens of thousands of dollars and hundreds of man hours per search term per year.

 

Round 1

This project officially kicked off in July 2018. Our process always involves approval of all of my deliverables from my team, manager, and project manager in order to move forward at each step.

 

Research Plan

My first task was to create a research plan. My plan was based around the most pressing questions from my team and project manager:

  1. What are the most and least necessary features of search?

  2. Does the new prototype help team members accomplish their searches more efficiently?

  3. What type of emotions do users have around the new prototype?

  4. Is the new prototype organized, personalized, modern, and friendly?

I planned to conduct each 60-90 minute long user interview in 3 stages. Stage one was to have participants use the current search results page and get baseline data on how they feel about it, then I had them compare it to the new prototype, and finally I had them perform timed tasks using the new prototype. The tasks involved observing them searching for specific results, timing them, and gathering their opinions on the experience.

 

Interview Guide

The next step was to create an interview guide with all the questions and usability tests to answer the research questions above.

Research

This project was based heavily on user research (big win!). This round of research included the following:

  • 16 user interviews for desktop design

  • 10 user interviews for mobile design

  • 6 usability tests per interview

This was a 3-month long project that required dozens of hours personally conducting user interviews and coding with HTML, CSS, and JavaScript. I ended up with mountains of quantitative and qualitative data and dozens of graphs presented to stakeholders.

Instead of giving you a book of text, let’s take a look at the initial search results page and compare it to the redesign.

Initial Search Results Page:

The initial search results page had not been updated in years and is not responsive for mobile devices.

Now let’s take a look at the new search prototype I tested. In the image below, I have called out all the things that we tested and received feedback about in the interviews.


Desktop Prototype (Round 1):

The following changes to the desktop search results page were focused on during testing:

  1. Top banner - language, friendliness, font, filters

  2. Filters - relevancy, usefulness, etc.

  3. Top Match - design, usability

  4. Widgets - usefulness, order, relevancy

  5. Link descriptions - usefulness, friendliness. The previous search results pulled descriptions from the first paragraph of each result page. The new prototype allows site owners to enter their own description text (like Google).

  6. Icons - recognizability, design

  7. Grouped results - understandability, usefulness. Results are now separated into groups.

  8. Text/Font - friendliness, length, accessibility, usefulness. One of the biggest goals my PM focused on was “friendliness,” particularly the text on the headings.

  9. Hide button - Usefulness, preference. This button collapses each group.

  10. More button - Understandability.

  11. Pagination - Findability, expectations on what appears on page 2.

  12. Feedback button - Understandability, usefulness.

 

Mobile Prototype (Round 1):

The same features from the desktop prototype were focused on during testing for the mobile prototype with the following additions:

  1. Filter scrolling - to understand if users knew they could swipe for more

  2. Widgets - to understand if users knew they could swipe for more

  3. Collapsed groups - understandability, scrolling preference

Round 1 Results

Here is a summary of the 26+ hours of user interviews:

  • Highly rated features of search the prototypes included Top Match, Related Searches widget, Acronyms widget, refiners, grouped results, and link descriptions.

  • Low rated features included “More results” section, webpage icon, Video results widget (desktop), and grouped results (mobile).

  • Team members were able to accomplish relevant tasks more efficiently or as efficiently with new prototypes.

  • User’s emotions strongly leads towards positive for the desktop prototype and positive and neutral for the mobile prototype.

  • User’s opinions leads towards organized, personalized, modern, and friendly.

  • Almost all participants believed the prototypes are an improvement over the current search.

 

Presentation

The full presentation of the results took over 90 minutes and I presented them to the project manager, outside teams, and executives high up in the organization. Most of our hypotheses were validated but I recommended we continue the next round of research as planned with a new iteration.

 

Round 2

The project manager was quite ecstatic and agreed with most of my recommendations to improve the prototype based of user feedback. However, there were a few aspects of the first prototype she really wanted to keep such as the conversational tone of the text and the “More results” section. We agreed I could move forward with my changes as well as perform extra tests on the aspects of the prototype she was advocating for.  

I got to work coding the next iteration of the prototype with HTML, CSS, and JavaScript. Here is what the Round 2 prototype ended up looking like:

 

Desktop Prototype (Round 2):

The following iterations were made to the Round 2 desktop prototype and were focused on during testing:

  1. Shorter banner heading text - preference, friendliness

  2. Filter dividers - findability

  3. E-mail Us button - findability, usefulness, understandability, location preference

  4. Related Links - Understandability. Changed from “Similar Searches” in Round 1

  5. Widgets - order, usability, usefulness

  6. Colors - preference, accessibility

  7. Larger font size - readability, preference, accessibility

  8. Website icon - understandability, usefulness

  9. Shorter heading text - preference, friendliness

  10. “More results” section - location, usefulness, understandability

 

Mobile Prototype (Round 2):

The same features from the desktop prototype were focused on during Round 2 testing for the mobile prototype with the following additions:

  1. Filter caret - to understand if users knew they could swipe for more

  2. Larger font size - readability, preference, accessibility, scrolling preference

  3. Widget affordances - to understand if users knew they could swipe for more

 

Research

The Round 2 research included the same amount of users as Round 1 with similar tasks and questions to compare the results easily.

 

Results

Here is a summary of the 26+ hours of user interviews from Round 2:

  • Team members were able to accomplish the same Round 1 tasks more efficiently or as efficiently with the updated Round 2 prototype.

  • Improvements in opinions and times on tasks include:d Related Links widget, refiner design, grouped results design, mobile widget placement and affordance, webpage icon design.

  • Recommended changes included: “Feedback” button and location, removal of “More results” section, and moving forward with shorter headings and formal tone of text.

 

Iteration

The project manager was more willing to accept the user feedback and results that went against her wishes from the first round. After approval from her and my team, I got to work again making my recommended changes to the prototype using HTML, CSS, and JavaScript. The final design was almost identical to the previous iteration, validating that we did an excellent job with the initial design and research.

Final Desktop Prototype:

Final Mobile Prototype:

Final Presentation

I gave the final PowerPoint presentation summarizing my findings 5 separate times to multiple teams and groups of executives. I received high praise for my findings and we got buy in to move forward with our design!

 

Learnings

One important takeaway from this study for me was how to advocate for the user while a product manager has their own agenda. PMs can often hold on to their design ideas with a tight grip even if the data contradicts them. I found it best to discuss her ideas with an open mind, while offering to test them against other ideas based off user feedback. I wanted to advocate for the users as best as I could, and luckily, she moved forward based off their feedback on most parts of the design.