Discover

Problem

The existing interface of AmentumMRO was outdated, complicated, and difficult to navigate. The lack of visual consistency throughout the interface caused for an unorganized flow of information, making the overall usability and navigation very difficult for current users.  

Define

I conducted a self-ethnographic usability test to identify usability issues, and understand users' pain points. I outlined several blocks in usability and functionality that I aimed to improve on throughout this project:

Solution

After outlining various areas of improvement across the aspects of information architecture, user flows, and visual design, I narrowed down my ultimate goals within this project scope to focus on the following:

Design

Low-Fidelity Wireframes

The biggest goal with my redesigns was to simplify the navigation structure. The key to navigation structure is a flat hierarchy, where the user can get to their desired goal in 2-3 clicks. I redesigned with this in mind.

Card Design

Below is an iteration of the dashboard, where I proposed the idea of utilizing card design. This adds visual hierarchy, differentiates actions and entry points, and groups related information into a digestible unit. With a portal as massive this one, I suggested a card design that helps organize the various subpages.

Progress Indicator Bars

One crucial UX feature that I found was missing throughout the overall interface was progress bars.

There are several flows where a user using this portal has to request an order or purchase a part. So, I suggested the implementation of progress / status bars to define workflow and user flows. 

Progress bars are a great way to guide users on task completion and overall progression. It informs the user on history of actions, current progress, and how many steps remain.This UX pattern establishes a logical flow and reduces user uncertainty.

Navigation Bars

Throughout the portal, there are various navigational structures with no uniformity. There is a top menu navigation and separate sidebar navigation that breaks the hierarchy of the content, even though the entry points of both navigation bars are connected (example: the Materials page in the top menu bar includes various subpages, but these subpages are only displayed in the left side bar). Confusing, right? 

I created my redesigns by optimizing the sidebar navigation menu. This helps categorize pages and subpages, creating a simple visual hierarchy for users to follow. The horizontal navigation bar with sliders helps display the various subpages that are within a higher-level page.

Breadcrumbs

In addition to the bar navigation, I implemented a secondary form of navigation: Hierarchy-Based Breadcrumbs. This helps users track their current location on the portal, as this portal is massive with its deep hierarchy. Overall, this supplemental form of navigation helps user understand the site hierarchy, provides a quick way to get back to higher-level areas of the site, supporting the ease of use. 

Style Guide

To enhance and expand on the current visual design system, I incorporated a color palette based on the company’s logo. These colors help create a sense of visual hierarchy, which makes the flow of content and overall information architecture simpler to follow along to.

Develop

High-Fidelity Mockups

Iterations of Side Bar Navigation

After enhancing the visual interface and creating a style guide, I began my high-fidelity mockups, where I first designed various iterations of the sidebar navigation to establish visual hierarchy that the existing site was lacking.

Mockups of Screens