Global Nav & Role Switcher

[kingtraceyj]

Complete UX and Visual for Global navigation & role switching

• Logo
• Persistent Git Hub link
• Role Switcher
• Clear/Restart Session
• Explore how to find session link

Story #12

[Austinauth]

After working with Tracey on multiple variations of how the Global Header, Role Switcher, & Demo Settings might manifest together, we were able to come up with a solution we believe works for the Logistic Wizard demo.

Note: Wires are low fidelity, visual fidelity will be improved in future iterations.

Global Header - Default

Notes

1. As originally proposed the Global Header expands horizontally across the viewport. The Global header is home to items that are persistent across the demo, regardless of state.
2. Logo/Logotype occupies the top left side of the Global Header
3. The right side of the Global Header includes 3 items:
   • The Role/Persona Switcher (User icon)
   • A persistent link to the GitHub Source Code (Github Icon)
   • A persistent option to invoke the Demo Settings

Global Header - Role Switcher

Notes

1. By clicking the the user icon, the user is able to: see the current selected persona, switch roles to a retail manager and add a new retail manager (maximum of 5). In the future, user notifications might manifest here as well.
2. Notice in this proposed version of the Global Header we have separated Role Switching & Demo Settings. We separated these two items because the action of switching roles is not exclusive to someone giving the demo. If we were to remove demo settings entirely, role switching would still be necessary.
3. The Github source code link and the Demo Settings are grouped together because they require the user to exit the context of the demo. Clicking the Github icon takes the user to the Github source code & clicking demo settings invokes a menu containing certain scenario triggers (weather, etc...)

Open Questions

• @jakepeyser In order for us to design the Demo Settings panel we need a concrete script that calls out specific scenario triggers (weather, notifications, etc...).
• Will the Supply Chain Manager have a location as well?
• Do should we surface the actual names of the Supply Chain Manager & Retail Managers?

[colbycheeze]

Yea I like holding context of role in the app bar. It could be easy to show the user of the app which role they are in (SCM, or RSM) by changing the color of the app bar similar to google inbox, IE:

Inbox:

Done:

[jakepeyser]

Love it, I think that works perfectly.

In order for us to design the Demo Settings panel we need a concrete script that calls out specific scenario triggers (weather, notifications, etc...)

The scripts will be located here, it is next on my list of non-dev work items. This also begs the question on if it needs to be a "settings" menu or can just be another dropdown button to trigger specific events.

Will the Supply Chain Manager have a location as well?

No, their role is global for the sake of the demo

Should we surface the actual names of the Supply Chain Manager & Retail Managers?

Let's do it like you designed for now (role w/ location subtext). If we feel it's necessary, we can build in display of real names later. Right now they are like name: Retail Store Manager (fTC72mfeR8), email: ruth.fTC72mfeR8@acme.com, which is not very user friendly.

[Austinauth]

@jakepeyser

The scripts will be located here, it is next on my list of non-dev work items. This also begs the question on if it needs to be a "settings" menu or can just be another dropdown button to trigger specific events.

I think you're right. As long as the scenario triggers/settings aren't super complicated, they should probably be in a dropdown in the same vein as the Role Switcher.

[kingtraceyj]

global nav and role switcher comps

@LRRoberts0122 do you need redlines or do you want to start with this and then we can adjust later?

Type:
In the header I'm using Libre Franklin - .875em/14px Bold #FFFFFF

Here's a quick type reference:

[Scribblets]

@kingtraceyj No need for red lines. =) Will start working on the updates! =)

Also @colbycheeze I can update the typography thing in Storybook if you want? Or did you want to keep that the same? Or???

[colbycheeze]

Looks like you have 6 heading types @kingtraceyj so may as well have H1 be the 4rem size and then if most titles use h3 (which then would be the 2.5 rem type), that's likely fine.

[kingtraceyj]

sure. that sounds good. i probably won't use them but lets do it!

[colbycheeze]

Also when it comes to "red lines" what you can do is reference the type size or style you have defined (define more if you have others which are reusable)

IE: button, subheading, thin, light which is how we will apply styles to things (as opposed to giving us the specific font weights and sizes every time)

So for now we have a few defined which we can update to use w/e reusable styles you are planning to have

em, .em { font-style: italic; }
strong, .strong { font-weight: 600; }
small, .small { font-size: 75% }
.light { font-weight: 300; }
.thin { font-weight: 200; }

So based on this typography I'd add something like

.subheading {
  font-size: $base-font-size * 0.75rem;
  letter-spacing: 0.5rem;
}

[Scribblets]

Okay, so I've been having an issue incorporating fonts for some reason. They work externally, but I think something with React or whatever is causing conflicts. I'm not 100% sure, so I'm just working around the typography issue for now, and I'll get back to it at some point. =) But I just wanted to let you guys know! @kingtraceyj

[kingtraceyj]

@LRRoberts0122
Header hover state: #B7DEE4

[kingtraceyj]

@LRRoberts0122
Here's the updated hover for the role switcher. I made it a little more clear on whats selected than before with adding in a background color.

[colbycheeze]

Issue moved to IBM-Bluemix/logistics-wizard-webui #2 via ZenHub