NavBar Rethink

[joshuajames-smith]

The NavBar needs a rethink as mentioned in #274 as currently the breadcrumb trail does not recognise that AUDIT and CURATE are on the same "level" as project-pages.

Manage:

• Add "open project in audit" button
• Replace current "open project in curate" button with new icon
• Ensure team name is on the navbar

Curate:

• Ensure team name and project name are on the navbar
• Add buttons to navbar in order to move to manage or audit

Annotate:

• Ensure image name is on the navbar
• Add button to navbar in order to return to curate

Audit:

• Ensure the navbar includes team name and project name
• Add buttons to navbar in order to move to manage or curate

[joshuajames-smith]

NavBar Userflow.
This is the current thinking around the 'product workflow'.

[joshuajames-smith]

FINAL DESIGN

USER FLOW
This visual map demonstrates the navigational flow through the product.
** Note: The logo should now be clickable and return the user back to MANAGE: PROJECTS (current 'home' page).

Interactive prototype:https://xd.adobe.com/view/fe0dc8d4-a321-4733-8057-7f19070718c5-ab5e/?fullscreen

MANAGE
The top bar should demonstrate the team name - centred and grey outline curved rectangle. On the right: account avatar, documentation/help (without text under) and current product - name and product icon in a grey outline curved rectangle.

Each project row should have a hover state which is shown through a grey background. The 3 icons on the left should only appear when the mouse hovers on a project row.

CURATE
The top bar should demonstrate the team name and project name - centred and grey outline curved rectangle. On the right: account avatar, documentation/help (without text under) and current product - name and product icon in a grey outline curved rectangle. On the right should be the return to MANAGE icon and on the left should be open project's AUDIT icon.

To access/open an image in ANNOTATE, the user can double click an image (prompted by a hover state which describes this action) or selecting one image opens the metadata in which a button should appear below which too navigates to ANNOTATE.

AUDIT
The top bar should demonstrate the team name and project name - centred and grey outline curved rectangle. On the right: account avatar, documentation/help (without text under) and current product - name and product icon in a grey outline curved rectangle. On the right should be the return to MANAGE icon and on the left should be open project in CURATE icon.

The user clicks on a row within the table to view the AUDIT of the specific image.

The top bar should demonstrate the team name, project name and image name - centred and grey outline curved rectangle. On the right: account avatar, documentation/help (without text under) and current product - name and product icon in a grey outline curved rectangle. On the right should be the return to MANAGE icon and on the left should be open image in ANNOTATE icon.

The user should also have an arrow icon on the top of the table to return to full AUDIT overview.

ANNOTATE
The top bar should demonstrate the team name, project name and image name - centred and grey outline curved rectangle. On the right: account avatar, documentation/help (without text under) and current product - name and product icon in a grey outline curved rectangle. On the right should be the return to project's CURATE icon.

ICONS
Uploaded into STYLE. Titled: navigationAUDIT navigationANNOTATE navigationCURATE navigationMANAGE

[joshuajames-smith]

closes dominate/#412

[joshuajames-smith]

closes gliff-ai/curate#407