Wells Fargo Teamsites Portal Mobile App Design Upgrades

 
 

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, animations, flows, etc.

Tools

Sketch, Principle, Axure, HTML, CSS, Microsoft Excel, Microsoft Powerpoint

 

The Background

Teamsites Portal (name changed due to NDA) is a mobile application that allows the 280,000+ Wells Fargo employees around the world to access Wells Fargo internal apps and websites within one place. It works like an App Store and home screen app launcher all in one. Users add apps from the Apps tab in the bottom navigation, and launch them from the Home tab. It is highly valuable for employee productivity.

In early 2019, I was tasked with creating new users flows, interactions, and designs for the app due to user feedback. This was a 4-week agile sprint.

The Original App

Teamsites Portal Home screen before iterations.

Teamsites Portal Home screen before iterations.

Teamsites Portal Apps screen before iterations.

Teamsites Portal Apps screen before iterations.


Problems & goals

The product manager provided me with 7 main problems to solve and our goals:

Problem 1: New apps are slowly being added to Teamsites Portal but users have no way of knowing which ones are new.

Goal: Make it easier for users to know that new apps have been added.

Problem 2: Users have no way of knowing that all apps have been added to their home screens.

Goal: Inform users that a blank state is not an error state.

Problem 3: With more and more apps being added, users are having trouble finding apps on the Home screen and Apps screen.

Goal: Make it easier for users to find an app, and give app owners confidence that their app would not get lost in the sea of Apps.

Problem 4: Users can only read one line of an app’s description and want to know more.

Goal: Allow users to read the App’s entire description.

Problem 5: The red nav bar at the top should be a different color (note: this was a product manager decision and not feedback from the users).

Goal: Iterate on the UI design of the app.

Problem 6: App category names on the Apps screen are hard to read.

Goal: Make category names more visible.

Problem 7: App titles are limited and developers would like to have longer app names.

Goal: Allow for longer app names that won’t break the layout.

  

benefit to wells fargo

Increase employee productivity, communication, and retention. Additional benefits include more satisfied customers, higher profits, and lower risk.

The Process

Ideation and Mockups

I ideated with hand drawn sketches while taking notes on Microsoft Word, then created a PowerPoint presentation for my manager so I could explain my ideas for solving the user problems stated above. My ideas were approved along with a couple ideas my manager came up with.

There were no design tool components for the Teamsites Portal App so I had to rebuild the entire app from scratch using our style guide and Sketch (so many nested symbols!).

Once I recreated the App in high fidelity, I added in my solutions. Digital wireframes were not necessary as the solutions did not require much of a redesign or entirely new flows.

The Solutions

Goal 1: Make it easier for users to know that new Apps have been added.

Solution: This goal required multiple new UX enhancements to solve:

  • First, I added a notification bubble to the Apps icon in the bottom navigation to grab the user’s attention and indicate the number of new apps available:

notification_bubble.png
  • Next, I added a tooltip that exclaims “New apps available!” that the user can close themselves, or it will disappear after a few seconds. Just in case, the background color is slightly transparent so it doesn’t fully block the view if there are apps behind it:

new_apps_available.png
  • Finally, it was necessary for users to know which apps were new. On the Apps page, I had three ideas to display which apps were new:

Idea 1: “New” superscript at end of app name.

Idea 1: “New” superscript at end of app name.

Idea 2: “New” superscript above Add button.

Idea 2: “New” superscript above Add button.

Idea 3: “New” banner on top of app icon. This was my personal preference.

Idea 3: “New” banner on top of app icon. This was my personal preference.

Goal 2: Inform users that a blank state is not an error state.

Solution: I added messaging on the Apps screen for when there are no more apps to be added. To maintain consistency, this follows the same UI pattern already established on the Home screen when the user hasn’t added any apps yet.

 
all_apps_added.png
 

Goal 3: Make it easier for users to find an app, and give app owners confidence that their app would not get lost in the sea of apps.

Solution: The best solution for this problem was to add search functionality to the Teamsites Portal app. Since users have apps they’ve added to their Home screen and apps they haven’t added on their Apps screen, the search should not be universal, but rather search within those two different categories. 

I created the search icon and placed it in the upper right which is a common UI pattern. As the user types, the results automatically populate. I chose this method because from previous studies, I learned that our users loathe extra unnecessary clicks such as “Go,” “Next,” “Save,” etc.

Messaging in the search field and below the top navigation lets the user know where they are searching (Home screen or Apps screen).

Finally, I added a fun yet non-distracting animation for opening the search field using Principle.

 
search_animation 2.gif
 

Goal 4: Allow users to read the App’s entire description.

Solution: To indicate that the user can expand an app’s description (besides the ellipses), my solutions were to add a caret (A option) or a “more” link (B option) to the end of an App’s description. I made two options not only to make it easier for the project manager and save time on iterations, but also for user testing to see what the users preferred.

Design A: caret affordance.

Design A: caret affordance.

Design B: “more” affordance.

Design B: “more” affordance.

I made the entire component tappable. From previous research, I was aware that users generally tap on whole components like this. The question was, should I have the description open in a new screen like in the Apple App Store, or just have the text description itself expand within the component? Since there are no pictures, ratings, etc., and I know that our users can’t stand “Back” button interactions, I decided to have just the text expand on tap.

For a more pleasurable experience, I animated the interaction using Prinicple. Users can expand multiple descriptions and collapse them one by one giving them more control.

app_expand 5.gif

Goal 5: The red nav bar at the top should be a different color (note: this was a product manager decision and not feedback from the users).

Solution: To give the App a bit more of a modern update and make it more easy on the eyes, I gave the top and bottom navigation a white background. I added a red bottom border to the top navigation. I changed the background to a light grey for contrast between the content and the top and bottom navigation:

 
mock_rejected_ui.png
 

Goal 6: Make category names more visible.

Solution: This was as simple as changing the font size from 13 to 17 and making the text bold. It was not necessary to adjust any padding around components.

Original design with small category names.

Original design with small category names.

Updated design with larger category names.

Updated design with larger category names.

Goal 7: Allow for longer App names that won’t break the layout.

Solution: To solve this, I made the layout compatible with 2 lines of text for app names instead of one.

I created two versions to A/B test during research: one with the normal font size of 17px and another with a lowered font size to 15px.  Why did I lower it? Because size can be an illusion! The decrease is not small enough for most users to notice and it allows App developers to have even more characters for their app titles:

A Design: 15px font.

A Design: 15px font.

B Design: 17px font.

B Design: 17px font.

The Critique 😱

My team approved my solutions and had me make minor tweaks to them along the way (spacing, color, etc.). Then I put all my solution screens into a clickable prototype with Sketch and created a PowerPoint presentation to conduct a meeting with my project manager and the rest of my team.

The project manager mainly had questions about how the app description expansion interaction pattern (Problem 4) should work. She thought maybe users would want the open descriptions to autocollapse if they tapped on another description instead of remaining open. I was prepared with the pros and cons of both options and we decide to A/B test them with the users.

She was very happy with my solutions and moved forward with all of them. The only solution she disagreed with was the “New” banner over the app icons:

app_new_3.png

I knew this would be a contested topic which is why I created the other two solutions which she really liked. She decided we should A/B test them during research. I originally liked the above design more, but my other ideas were also perfectly valid solutions.

The Research

User research and testing was completed by another user researcher on my team named Andrew. His research goal:

“To usability test the new interactions and visual designs of the Teamsites Portal mobile app in order to gauge its effectiveness in enhancing the user experience.”

Andrew interviewed 6 actual users of Teamsites Portal using my clickable prototypes for usability testing. I created two prototypes to A/B test and have users compare designs. I also gave him screenshots to test the different design ideas I created to compare against each other and the current version of Teamsites Portal.

The research results validated almost all of my solutions. Users were able to correctly interact with the prototypes, complete tasks, and give us their opinions and expectations on my different ideas.

We were able to move forward with all of my proposed solutions and choose the right variations I created except one: users actually preferred the top navigation to be red as in the old version of Teamsites Portal. They cited they liked the higher contrast and found it more visually appealing.

Users preferred the red top navigation design originally used in the app.

Users preferred the red top navigation design originally used in the app.

Users did not prefer the updated navigation color design, but my team loved it.

Users did not prefer the updated navigation color design, but my team loved it.

The Iterations

I met with my team and project manager to discuss the results and how to move forward. Everyone was happy that my solutions worked out but we were all quite confused about how the users like the red top navigation from the current version of the app more than the new design we tested. My project manager really disliked the red top nav, so she wanted a quick guerrilla A/B test to validate this. Our user researcher Andrew came back the next day with more bad news: the guerrilla test participants also preferred the red top nav! Against our own desires, especially the PM’s, we went with the users on this one.

We moved forward with that solution as well as my other proposed solutions based off user feedback. Here is the final version of the updated Teamsites Portal application:

tw_hub_preview.gif

The Results

After approval, I created a style guide documenting and redlining the changes. I coded the style guide with HTML and CSS and handed it off to our developers. We made sure early on that there would be no pushback on the technology involved in my solutions such as the search autopopulation feature.

The animation I created for the search interaction became the standard search animation (timing, fade open from right to left, etc.) for enterprise applications at Wells Fargo.

The Teamsites Portal App is now updated with the changes and currently in use and available to all 280,000+ Wells Fargo employees. Metrics such as company time saved, employee retention, etc., are abstract to measure. Time will tell, but it is likely this new version of the app will improve those important company measurements.

The Learnings

This project was very fast paced! I learned not to overthink solutions because I did not have time to. I also learned how user centered Wells Fargo is when I saw my project manager and team decide to go forward with the old red top navigation due to user feedback, even though our opinions different from those of the users. This also helped me take my ego out of my design work, which is the hardest part of design.

This project was challenging and rewarding. It feels great to know that current and future employees at Wells Fargo will be able to work more efficiently with less stress due to my work on the Teamsites Portal mobile application.