Scout UI/UX Overhaul: New Navigation & Layout

Hero-ProjectEventMerge.png

 
 

Overview

Problem
The problem with a growing SaaS suite is that there are many entry points into the product. Not everyone will have the same experience either. When you have one or two core products, it’s easy to navigate and deduce where you need to go. However, once you add one, two, three, or more products as Scout did, you run into problems when it comes to where to go and what to do.

Results
In its early stages, the overhaul can only be measured qualitatively. The major of this overhaul is to bring consistency across the product. While user testing internally with Customer Success and externally with current and potential customers, everyone was able to get where they needed to go faster. The message was clear that we enhanced the functionality and experience of Scout and allowed for customers to do more and faster.

Links
Scout Knowledge Base
New Project Layout - August 2019

With Scout at the center of our team, not only can we connect finance, operations, engineering, and other teams into a single, cohesive plan, we can operate with a level of flexibility and efficiency we couldn’t get with any other solution.
— Sarah Toomey, Head of Global Strategic Sourcing, Procurement Ops, and Travel at Anaplan

Wireframing the Initial Concept

Due to the size of project there were many iterations and brainstorming sessions. These wireframes were the final lo-fi versions before converting everything to working hi-fi prototypes.

At first we simply wanted to move events (a panel) to the left navigation and all events would have their own tab. However, after demoing, testing, and debates about the future of Scout, we decided to make events entirely different. In the end they became more robust than we planned.

Original Product

Whiteboarding

Final Lo-Fi Wireframes

Information Architecture
Another research piece of the new left navigation included this preliminary information architecture design. Due to the complexities of tabs, sub-tabs, events, and links it was necessary to layout all the possible scenarios before diving into designs.


Iterations of the Left Navigation

Most of these iterations were based on the wireframes and information architecture above. A lot of thought was placed on the structure and hierarchy of the tabs, anchors, and links. Coming with various iterations helped establish what would and would not work for the users. While some changes are minor in appearance, they would lead to major experience changes to the users.


Final Designs

Setting up and establishing how Scout Contracts works for you and your company is key. What Admins define in settings is what you will see in the Full Details page. The details page is based on all other project type pages, and it includes fields and sections specific only to contracts. This allows for a consistent and familiar experience for all project types in Scout.


States

The most invaluable piece of a prototype is the States page. This is where you uncover things you missed during the design process and this makes the build go so much faster. States pages reduces the amount of questions from engineers and acts as a reference for our component library.

With a complete overhaul it’s extremely important to document all states, edge cases, and scenarios users could and will encounter. Since there were so many changes and pieces I designed a large states page for the engineers to reference during the build. This page was used across other teams to ensure consistency across the product.