Nicole Roberts
Navigation_Thumb.jpg

Infor Retail Navigation

Enterprise Product Suite
Responsive Enterprise Product

Responsive Enterprise Product

Research, Process Flows, Macro Personas, IA, Wireframes, Testing, UI Design, and Interactive Design

The Objective

The Objective

The Infor Retail product suite needed a consistent structure of navigation to create a cohesive user experience and unify all the applications within the suite. The goal was to create a flexible design capable of satisfying both the current and any future needs of all the user personas and individual products. 

The process consisted of research and competitive analysis, process flows, macro user personas, mid-fidelity wireframes, user testing, and high-fidelity designs. The result is a responsive native-quality user experience that incorporates modern best practices and allows for strong personalization and workflow efficiencies.

Process Flows

Process Flows

After determining essential elements to include in the navigation and analyzing how they are being used in similar platforms, an outline of all the possible pages and features was created. 

From this outline, a total of 41 flows were created to plan the paths users would take to get to all of the places in the navigational structure. These included items in the User Profile menu, Primary and Secondary navigation, and Global navigation of the product suite. 

ProcessFlow-1.png
ProcessFlow-2.png
Macro User Personas

Macro User Personas

Since the navigation was being created to cater to all the user personas of the individual applications in the product suite, it was necessary to analyze the micro user personas of these products. 

Interviews were conducted with the members of the teams working on each of these 8 applications to gain a better understand of their users needs and methods of navigating. These 62 micro personas were then analyzed and grouped into the 5 macro user personas below.

  Administrator  Initially sets up and configures everything in the application so that it is functional and efficient for the rest of the team. They also support the business team in adding automation, efficiency, and accuracy to their data and processes.   Director  An expert in their field and acts as a mentor, advisor, collaborator, and facilitator to those under them.   Manager/Team Lead  Manages outside relationships (ie. suppliers, manufacturers, and retailers) and takes lead on internal processes of their section of the retail cycle. A decision maker and an action taker as part of the approval process for their category.   Worker Bee  Perform day-to-day operations needed to keep their category running smoothly and send requests to their managers for approval as needed for certain tasks. They are completing the same tasks over and over again and need to do so efficiently.   Visitor  Not doing a lot in the system and have limited permissions in it. Very focused on a specific task in the system when they go in and probably not viewing a large variety of pages (also because of their restricted access).    View Full Persona Documentation

Administrator
Initially sets up and configures everything in the application so that it is functional and efficient for the rest of the team. They also support the business team in adding automation, efficiency, and accuracy to their data and processes.

Director
An expert in their field and acts as a mentor, advisor, collaborator, and facilitator to those under them.

Manager/Team Lead
Manages outside relationships (ie. suppliers, manufacturers, and retailers) and takes lead on internal processes of their section of the retail cycle. A decision maker and an action taker as part of the approval process for their category.

Worker Bee
Perform day-to-day operations needed to keep their category running smoothly and send requests to their managers for approval as needed for certain tasks. They are completing the same tasks over and over again and need to do so efficiently.

Visitor
Not doing a lot in the system and have limited permissions in it. Very focused on a specific task in the system when they go in and probably not viewing a large variety of pages (also because of their restricted access).

View Full Persona Documentation

Wireframes

Wireframes

With all the insights extracted from the persona interviews and the needs of the users in mind, mid-fidelity responsive wireframes were created for all the navigational features. Personalization, streamlining workflow, intuitive features, and a clean flexible user experience were priorities when designing these wireframes.

The navigational features are always working to make the users' lives easier. For example, the side panel of navigation is collapsable because it was found that users do not tend to switch between the apps in the product suite frequently, and the Worker Bee persona needs as much screen real estate as possible for their job. The Action Menu records the users' most frequently used actions and intuitively places them in a shortcut menu in the top navigation for quick access. The shortcut icons shown in the top navigation are fully customizable from the options shown in the App Toolbox. These aforementioned features and others deliver the most ideal user experience for all the users of the product suite. 

 

View Desktop Prototype

Wireframe-1.png
Wireframe-2.png
Wireframe-3.png
Wireframe-4.png
Wireframe-5.png
Wireframe-6.png
Wireframe-M.png
High Fidelity Mockups

High Fidelity Mockups

Once the mid-fidelity wireframes were complete, a testing plan was created to ensure they had the best user experience possible. The tests were performed, insights were extracted from the users' feedback, and the wireframes were updated to improve the experience. Once it was determined the wireframes had the optimal user experience, they were converted into high-fidelity wireframes.

The theme of the interface leverages Infor's internal style guide for all their products to create a fun and friendly, yet nondisruptive, interface for users to work in. The design is also crafted in such a way that it is easy to seamlessly incorporate a company's branding into the layout. 

UI-1.png
UI-2.png
UI-M.png