Wells Fargo Internal IA 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 different typography, colors, spacing, flows, etc.
Axure, Sketch, Skype (interviews), Microsoft Excel, Microsoft PowerPoint
Teamsites is Wells Fargo’s internal homepage and intranet for all 280,000+ employees. It allows all team members to access and share documents, accomplish work related tasks, read company news, communicate and share ideas, manage risk, etc.
This study was conducted to learn how team members use the various navigation methods within Teamsites and to uncover what could be improved using interviews, clickable prototypes, usability tests, and A/B tests. Quantitative and qualitative data was collected on tasks times, completion rates, etc.
In 2019, Wells Fargo introduced an entirely refreshed brand campaign. The results of this study were used to make design and information architecture decisions across all of Teamsites to make accomplishing tasks easier for employees while updating the design and information architecture within Teamsites to be in line with the new brand refresh.
Wells Fargo invested in technological solutions as part of their campaign to reorganize after numerous scandals over the past few years. I was hired to help research and design solutions to improve employee communication, productivity, and minimize risk. Teamsites is one of my main projects. In this particular case study, I created the research plan, new designs, all clickable prototypes, conducted the interviews, and presented the data to stakeholders.
The goals of this study were to answer the following research questions:
How do users currently navigate Teamsites?
How findable are the links?
What type of enhancements, if any, are needed for navigating Teamsites?
How do users feels about the new universal navigation designs across all WF internal sites contained in the prototypes? How usable are they?
Would it be useful for team members to see the top navigation and Toolbar in other areas of Teamsites?
benefit to wells fargo
The less time employees spend navigating Teamsites to accomplish work tasks the more time they can spend focusing on their jobs. In turn, employees are less frustrated and Wells Fargo increases revenue.
the current site
Below is what the Teamsites homepage currently looks like:
The homepage always contains the following:
1 - Top navigation: The top navigation is a mega dropdown menu containing links to almost every useful employee website or tool. Here is what the top navigation looks like when a user hovers over a link:
2 - Toolbar: The Toolbar allows users to adjust settings on Teamsites, edit their profiles, etc. Users hover the mouse over the Toolbar icons and a menu slides out from left to right. The most useful section of the Toolbar is Shortcuts, which contains a condensed list of the most popular links within Teamsites. Here is what the Shortcuts menu looks like when a user hovers over the Shortcuts icon in the Toolbar:
3 - Search: Users also have the opportunity to navigate Teamsites by searching all sites within it.
One of the most important parts of this study was to uncover which navigation method between the top nav, Shortcuts, and search that users prefer and any improvements that can be made for them.
Anytime a user clicks a link on the Teamsites homepage, they navigate to child pages which are created by other teams and not designed by us. The child pages do not necessarily follow any navigation patterns, and there are hundreds of thousands of child pages within Teamsites. Child pages also follow a previous design system implemented many years ago. One of the most popular child pages is the main Benefits page create by HR which looks like this (at the time):
Another huge component of this study was to understand how users navigate within child pages, and how they would navigate out of them to get somewhere else within Teamworks. As you can see, there is no top navigation or Toolbar on child pages and the navigation within child pages varies throughout all of them.
This creates frustration for the user as they have to constantly hit the back button to navigate back to the Teamworks homepage, then to another child page from there if they wanted to go to another area of Teamsites. If they want to navigate within a child page, they need to constantly learn each navigation pattern the site owners (Human Resources in the example) created on each page.
The process on my team involved myself creating the research plan, interview guide, design ideas, clickable prototypes, etc. and presenting each to my team and then the product manager for critique at each step of the way.
My plan involved interviewing team members to gather qualitative data on how they navigate Teamsites and to reveal answers to our research questions. I also created multiple clickable prototypes using Sketch and Axure to A/B test against the current child page navigation:
This prototype includes my proposed solutions to help team members navigate Teamsites more quickly with less frustration:
1 - Universal top navigation: Top navigation available on every child page.
2 - Universal internal navigation: I used the current red banner on all child pages as consistent place for internal child page navigation menus. In this example, the link headings are the same as the navigation links on the page. We also tested a version of this with the links on the page removed to see if users would look for another method to navigate. Here is what it looks like when a user hovers over a link on the new internal site navigation:
3 - Toolbar: The Toolbar available on every child page.
4 - Layout: I also updated the design to match the Teamsites homepage which was updated more recently. The spacing, font size, colors, etc. now all match for a more consistent experience. I had to keep in mind the current brand refresh and make sure to follow all of their guidelines.
The prototypes were fully clickable and animated. They were converted to HTML and CSS with Axure. My first iteration was accepted by my team and project manager. All features mentioned above were to be tested, timed, and compared against the current sites.
The interviews and usability tests were conducted virtually by me with 16 Teamsites users. Since all employees must use Teamsites to accomplish work tasks, they had some strong opinions!
The answers to our research questions were revealed through my analysis of the results and they confirmed most of what we hypothesized about how they navigate Teamsites.
The usability tests also proved that my prototypes helped users accomplish tasks and goals more quickly than the current navigation in Teamsites. In fact, users completed one of the tasks I gave them 38.5 seconds faster using the new prototype (VERY significant in this study!).
My prototypes were also rated more highly and received more praise than the current site. I received one of the highest compliments possible as a designer: participants used the new features of my prototype to complete their tests without even realizing it. I do my best to live by Steve Krug’s design motto: “don’t make them think!” which I believe was accomplished here.
Here is one great example. In this usability test, 8 users using the live site were asked to navigate to one child page, then to another child page from there (A test). 8 users were asked to complete the same navigation task using the new prototype (B test). Miraculously, 7 of 8 participants testing with the prototype (B design) used the new features of the prototype to complete their given task without even realizing they were using features that are not currently available on the live site they are used to. They also completed the task far faster than the participants testing with the live site (A design).
I presented the results to my team first and then a larger team with the project manager in attendance. This presentation received the fewest questions and challenges I’ve ever encountered. Attendees were ecstatic with the results, albeit not surprised.
The most important thing I learned from this project was how to plan a design while a company is undergoing a change in brand (colors, logos, fonts, etc.). I had to study up on what the changes were going to be and be very familiar with the updated style guide.
Wells Fargo mainly focused on the customer facing side of the company when making new brand decisions. This creates a challenge for my team because we have to follow their specifications on any changes we make (even if we disagree with those changes). This meant I had to pay close attention to company changes, study the customer facing website, and make sure my design ideas were received carefully before creating the prototype with the consistent child page navigation.
I have always found company intranet portals quite clunky and out of date at previous companies I have worked at. Being an integral part of the process of making Wells Fargo’s own internal employee portal more fast, consistent, and easy to use actually feels quite heroic 💪