GUI : Brand GUI as IBM

[gtmills]

Summary

As part of the new releases of the UI, we want a more aesthetic design of the login page. The as is design is functional, but does not convey the modernization and aesthetic that we feel represents the Power brand. We would also like to include the Power logo to establish the Power brand.

Design

Design Goals

• Update the design to an aesthetic that will help create more trust with users
• Establish the Power system brand into the design

InVision Prototype

• https://ibm.invisionapp.com/share/YBO1CK3DQ4J

Screen captures

As Is upstream experience

To Be upstream experience

As Is downstream experience

To be downstream experience

Community

• Created design review story in webui-vue repo - Login page redesign openbmc/webui-vue#63
• Sent email to community sharing the design review story

FED

UX Flow / Interaction Requirements

• Change layout
• Move OpenBMC logo to right corner
• Determine if we can use environmental variable to add Power brand upstream
• Update change password layout

UI Checklist

Browser Tests (Chrome, Firefox, Safari (Mac), Edge (Windows))

• Tested responsive layout on supported viewport sizes
• Verified functionality works as expected, e.g. success and failure use cases
• Resolved any JavaScript errors thrown to the console

Accessibility Tests

• Verified markup is semantic
• No reported issues in IBM Accessibility Checker (Free open source tool) https://www.ibm.com/able/toolkit/tools/

Test Hooks

• Verify need for data-test-id hooks with test team

[derick-montague]

This is specific to the login page only and favicon (use IBM Bee). Future discussion about more branding downstream (fonts, colors...).

[derick-montague]

The work here is understanding how the IBM logos will be pulled in from the meta layer.

[gtmills]

Yeah would be nice if this could live upstream

[derick-montague]

@gtmills this seems like a server-side story rather than a client-side story. I am going to assign to you and remove the FED label.

[derick-montague]

@gtmills - I know there is some Meta layer work here, but I also see some work on pulling logos in to the login page. My feeling is that we can make a decision and share with the community. Those that are opposed to can make changes down stream. Do we know when the meta-layer work might be ready? I realize it is lower priority.

[gtmills]

Yeah, I would really like us to work with the community to do something here and come up with something that works for all members. I know other companies have this use case.

Setting the .ibm.env on an IBM build is something on my plate. I will try to work that here soon. I think there will need to be additional changes for the logo unless the logos go in webui-vue? Which I'm not sure I love.

[derick-montague]

I think there will need to be additional changes for the logo unless the logos go in webui-vue? Which I'm not sure I love.

I agree and that is true for the favicon as well.

[gtmills]

I think #3099 will close this? Passing 'ibm' to webui-vue?

[derick-montague]

I think #3099 will close this? Passing 'ibm' to webui-vue?

But I don't think we have a design for that environment.

[gtmills]

@derick-montague Assigned you and unassigned me.

[derick-montague]

Updated design and added to the design review project in the webui-vue repo.

[derick-montague]

The only concern was the title of the page that can be updated downstream.

[derick-montague]

Dylan is no longer part of the squad and his Gerrit review was abandoned. I will be finishing this story.

[derick-montague]

Resolved by: https://gerrit.openbmc-project.xyz/c/openbmc/webui-vue/+/46241