Scout UI-UX Overhaul: New Navigation and Layout
Overview
Problem
As SaaS suites grow, the number of entry points into the product increases. This can make it difficult for users to navigate and find the features they need, especially if they are new to the product.
Results
In the early stages of the Scout product overhaul, we were able to achieve significant qualitative improvements, including improved design consistency and functionality. This was evidenced by the positive feedback we received from users during internal and external testing.
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.”
Wireframing the Initial Concept
We iterated and brainstormed extensively on wireframes for Scout's overhaul, culminating in these final low-fidelity versions before prototyping.
Initially, we planned to move the events panel to the left navigation with a dedicated tab for each event. However, after demos, testing, and discussions about Scout's future, we decided to completely revamp events, making them more robust than we originally envisioned.
Original Product
Whiteboarding
Final Lo-Fi Wireframes
Information Architecture
Designing the new left navigation required careful planning to account for the complexities of tabs, sub-tabs, events, and links. This preliminary information architecture design mapped out all possible scenarios before we began designing.
Iterations of the Left Navigation
Building on the wireframes and information architecture above, we iterated extensively on the structure and hierarchy of the tabs, anchors, and links. Each iteration helped us refine what would and would not work for users, even if the visual changes were minor. Ultimately, these changes would lead to major improvements in the user experience.
Final Designs
Configure Scout Contracts to meet your company's needs. Admins define the fields and information displayed on the Full Details page, which is consistent with other project types in Scout.
States
The States page is a crucial component of the prototyping process, revealing design oversights and streamlining the development phase. It minimizes engineering queries and serves as a reference for our component library.
During a comprehensive overhaul, documenting all states, edge cases, and user scenarios is essential. To address the extensive design changes, I created a detailed States page for engineers to reference during development. This page also served as a consistency guide across other teams.
