HPE brand refresh

[ericsoderberghp]

Big Thing to track responding to the latest HPE brand refresh.

Audit

• Brand Refresh - use the adoption scorecard to evaluate Chris' designs #2773
• Brand Refresh - document a list of things we’d like to push back on and discuss further --> Documented in 2773 here: Brand Refresh - use the adoption scorecard to evaluate Chris' designs #2773 (comment)
• Brand Refresh - Create a list of all instances where Grommet components consume Button #2794
• Brand Refresh - determine visual impacts of button changes to Grommet components consuming button #2806
• Brand Refresh - audit writing style guidance from brand and compare to Design System

Explore

• Brand Refresh - Prepare NEXT branch on grommet-theme-hpe and publish to NEXT-stable grommet-theme-hpe#262
• Brand Refresh - first draft hpe theme pull request #2779
• Brand Refresh - Consume the grommet-theme-hpe NEXT-stable branch in the Design System site #2793
• Brand Refresh - add Button kind for element, shape, animation #2774
• Brand Refresh - Explore extending the CTA button's rounding to other controls and inputs #2775
• Brand Refresh - Make Yes/No decision on whether the Design System should support "normal" Heading weight #2801
• Brand Refresh - Make Yes/No decision on whether the Design System should support PageHeader "size" #2803
• Brand Refresh - Implement enhancements to Grommet Button #2821
• Explore hover treatment of CTA buttons #2815

New Assets

• Brand Refresh - add HPE GreenLake badge to AWS CloudFront bucket (where MetricHPEXS fonts and Design System video are stored)
• Brand Refresh - add new brand gradients and textures to CloudFront bucket
• Brand Refresh - make gradients and textures available as background namespaces in the HPE theme #2824

Test

• Brand Refresh - apply HPE theme to GreenLake Platform and evaluate impacts
• Brand Refresh - apply HPE theme to Compute and evaluate impacts
• Brand Refresh - apply HPE theme to Ezmeral and evaluate impacts

Synthesis & Alignment

• Brand Refresh - assemble synthesis (interpretations/implementations, deviations, recommendations) #2822
• Brand Refresh - demo impact on the application of new theme to products ☝️ #2823
• Brand Refresh — Write guidance for when to use CTA vs primary button #2871
• Brand Refresh — Take screenshots of user flows (one GLCP, one Ezmeral) for synthesis deck #2872
• Brand Refresh — Make a decision of what we will propose for button rounding (4px or 6px) #2873
• Brand Refresh - compare notes with Shawn Schultz
• Brand Refresh - share synthesis with Brand team

Implementation

• Publish theme with new brand assets and styling grommet-theme-hpe#275
• Brand Refresh - Update Figma Button #2937
• Brand Refresh - Update Figma CheckBox #2938
• Brand Refresh - Update Figma input components #2939
• Brand Refresh - add gradients and textures as tokens in Figma (alongside colors?) #2940
• Brand Refresh — Update Figma colors #2969
• Brand Refresh - update guidance and examples as appropriate to new features and modified treatments
  • Add guidance for CTA buttons vs primary action buttons
  • Add guidance on new distinctive brand assets: Add brand assets page #2951
  • Create examples and guidance on how to use mixed heading weights
  • Add guidance on accessibility considerations for gradients and textures

---

• Original issue - New HPE Brand Evaluation #2719

[StingRay005]

Recording of this discussion available here

Summary & next steps:

Goal is to collect all the big next steps

Expected deliverables:

• Updated guidance on DS site, with coordinated linkage to brand stuff (Rachael) - document how it relates to their product/BU/team (Brand Central currently has minimal guidance on this)
• Likely Figma updates (on the design side of things) & examples (themes) on the DS site (including copy)
• Communication: Announcement(s) highlighting the tie-ins
• From a DEV standpoint, implementation approach needs to be sufficiently discussed, hasn't been discussed in detail yet – needs to align with the DS guidance (goal being to clarify when to use what)

How do we get there:

• Through audit & analysis
• Taylor & Matt going through Chris's new brand direction (and leveraging the adoption scorecard)
• Mike K looking at this inside out from grommet side (such as buttons and layout changes)
• Get Chris's perspective of Rachael's research on brand refresh
• A final synthesized report out of some sort so we (DS team) can assess viability / feasibility

What we have been doing thus far – is reviewing Chris's research on brand refresh

• This research we're basing our reviews on, could be dated
• Historically, non-negotiable components have been approved by branding given use cases provided by Chris
• Rachael needs more context in terms of aligning brand guidelines with dotcom
• We need to review what Shawn has on this, and compare notes with Rachael's research
• Implementation plan for dotcom is still TBD
• Align John Vargas's team with Rachael's team –

These next steps outlined above are heavily reliant on the outcome of the audit and brand's concurrence with it – efforts may vary based on these

Minimal Effort Best Case:

• Brand accepts themes/layout/Figma as is with minimal tweaks (2 weeks ish effort)

Worst case scenario: ?

• Should we get extensive feedback from Brand, this effort could be significantly higher 10X

Interviewing Brand / Probing on:

• Brand's typography guidance beyond colors for instance (yet to ask Brand – @taysea)

Eric:

• We should go to the discussion with recommendations of our own while emphasizing why we are recommending so

[StingRay005]

Tue Aug. 9, 2022
Recording from this meeting available here

Recommendation:

• Ship CTA button to the enterprise app & review with Brand

• Include nice to haves: E.g: Gradients & texture – visual treatment

• Reference section in the GitHub issue

• Apply changes onto the DS site first (Matt's recommendation)

External dependencies:

• Discussion on colors (typography is more or less straightforward, in terms of options for fonts)

• Should Gina / Melanie's team be directly involved? TBD

• Chris not a decision maker (Stacey?)

• Derek just needs to be informed

Who owns deliverables / updates to the Figma – TBD

• Pending items in explore section of the GitHub issue

When can we have a synthesized plan to go take to brand?

• In August sometime – TBD

• This is when we'll be able to compare notes with Shawn S (Synthesis described above needs to be done by then first)

• Header/footer will be a Figma component – badge addition (prior to the synthesis of the audit)

• No follow up meeting needed post Eric's return from vacation – since we're making good progress here

[ecircenis]

Can we get guidance on when to include the element in a CTA vs when not to? Brand seems to define CTA very differently from Product. For example, in a delete confirmation dialog, the "Delete" button is a CTA Ii.e. primary button) and it seems inappropriate to pair the element with words like delete, remove, disable, etc and merely silly to associate it with words like create, apply, etc. It seems as though our use of primary buttons should not change much except for rounding. True or not?

[ecircenis]

Are we doing anything about the font so that lowercase i, uppercase I, and lowercase l can be distinguished one from another? Reading comprehensibility suffers with the current font.

[taysea]

@ecircenis We have had some internal discussions along similar lines/shared thought about the buttons -- that the element in a CTA is more relevant for certain marketing-type use cases and less appropriate for platform use cases where we are just aiming to highlight a primary action. We will be refining our thoughts there and discussing with brand, and use cases like yours mentioned fall into the bucket of things we have discussed internally.

re: font, that is being tracked in this font issue. There is a portion of the issue which is related to general typography guidance/anti-aliasing (elaborated by @halocline in this comment: #2080 (comment)). However, Matt do you know if there are any other font file resolutions being worked on?

[halocline]

Work has been completed