August 2021

Overview

Global Navigation (Pilot) is the shared navigation header for many of Rackspace's customer facing control panels. It provides a navigation bar customized for the current user's permissions and current browser location in Rackspace .

Challenge
Provide responsive navigation that scales appropriately for any interface for primary and secondary nav

Project type: Live Website

Role: UX/UI Designer
Responsible for Information Architecture, Wireframing & Prototyping, UI Design 
Tools Sketch, Axure and Abstract

Global Nav Content Information Architecture 
Understand the elements

Application Frameworks

Wireframes

Some explorations

Wireframes - Possible Solutions 

V1 -  This version has a hamburger menu where in the primary nav is "My Products" and then the "Account services" (Notification, tickets, support, billing etc).

We proposed the use of breadcrumbs to show the user in which navigation level they are in.

V2 - Esta version tiene "My products" on top y los "Account services" abajo esto hace que en las pantallas pequeñas sea mas fácil la navegación xxxx 

V3 - This design is compact the primary menu with icons and when it is selected it shows the corresponding options with a secondary menu next to it so that the user does not lose the context in which their are. 

Testing - Findings

• V1 it was difficult for users to know where they were in the platform when they had already selected an option. 
• V1 was visually very clean but a bit confusing to use because of the menu levels.
• V2 was accepted for being intuitive and easy to use. 
  
• V2 They liked having "Products" at the top and "Account services" at the bottom. 
  
• V3 information too tightly packed in a small space
  
• V3 the idea of only icons in the top menu was accepted and understood
  
• V3 arrows were not as well accepted on such a small screen
  
• Users were confused when they found no similarity between the desktop menu and the new mobile menu.
  

• Have separate products & account services to avoid more complexity in the levels

  
  

Final Proposal

Large, Medium and small version

Small (mobile web site)

Medium size 

Large Size