Summary

Working in a large, established organization such as HEB broaden my perspective on how to operate in a massively scale-driven environment. I was also fortunate to come at a time when the company started to make strides towards building a solid foundation for their visual language. As the lead designer, I collaborated with the UI developers and marketing team to create a unified style guide across their mobile and web properties.

My contributions

  • Interface inventory
  • Design management
  • CSS pattern library
  • Frontify implementation

High-level goals

  • Create a unified style guide for HEB properties (marketing, web, mobile, HEB curbside service)
  • Create one mobile guide and one web guide
  • Create a CSS pattern library

Constraints

  • Accrued technical and design debts due to an inconsistent design system
  • Disjointed users experiences between HEB and its service, HEB Curbside
  • Outdated, inconsistent style guides that were inaccessible to contractors and remote workers

Exploration/process

The project kicked off with meeting the art director to assess how the team presently organizes their files and to establish a common ground of the building blocks and guidelines. The marketing team had primarily used their internal servers to store all assets, and the AD and I concluded that a cloud-based solution would be ideal going forward so that contractors and remote workers could access source files as needed without being onsite. I consulted with the UI developers as well and we all agreed that we needed separate style guides that catered to designers in marketing and different product design teams. My PM agreed that updating the CSS would be a good idea, and created a high-priority ticket for it in JIRA, our task management software.

HEB_DigitalStyleGuide

Frontify Style Guide

 I researched a variety of CSS frameworks that could meet HEB's specific needs. The UI developer and I agreed the BEM naming convention would be beneficial for its architecture and prolificness. This is a CSS framework that follows a model of Blocks (components), Elements (the pieces that make up a component), and Modifiers (the different states of a block or an element). It solved unnecessary nesting that made our original components harder to scale. It also helped the UI developers name components in the proper order. They also liked BEM because it worked with Foundation, a grid system they were already implementing on newly created pages.

One of the main pain points of the current style guide was that access was limited to the HEB campus and that it lived on their servers. This prevented remote workers and contractors access to branding materials. The AD, UI developers and I decided to go with the cloud-based brand management software, Frontify. From there, I created a dedicated page to our new pattern library. 

Button Interface Inventory

Snapshot of button portion of the interface inventory

Next, I took an interface inventory assessment of all the different digital building blocks that were on the website. I was shocked to find 18 kinds of buttons, 3 variations of rounded corners, 20 different image sizes (for various products, banners, products, etc.) and 4 different types of input boxes. The usage of typography was inconsistent across all pages, and some pages did not follow current standard guidelines. Over the next few weeks, I had meetings with the UI developer and art director to go over which elements we wanted to keep, remove, and add. The main questions that determined our design decisions were:

  • Was it an old style?
  • Does it match with our new style guide that marketing was using?
  • Was it even a good pattern?

The rule of thumb was to keep elements that followed the new marketing style guide and add element so they matched the default sizes in Foundation.

The pattern library helped speed up development immensely. For example, we consolidated our icon set into one CSS file and could reference it between the three UI developers. We used Git Lab as our manager software and referenced Frontify for our naming conventions. When creating new pages, I could design faster by referencing the grid system page on Frontify and creating the correct gutters and column sizes. This made developer handoff easier and opened more lines of communication since the development team and I had the same foundation to build on.

HEBFoundationGrid

Grid System page on Frontify

Takeaways

Consolidating and removing legacy code is an extensive process. There are many design elements that deprecate over time, and moving forward on a single design decision, such as switching fonts, took weeks to implement because of its radical effect on development. In the beginning, connecting marketing and front-end engineers was vital to starting a friendly conversation and knowing even where to start on this project. I made sure everyone's thoughts were heard, and that meetings included summary notes for people who couldn't attend. The last time I've talked to one of the developers, they're still using Frontify although it was difficult to maintain. If I had more time, I would have loved to work more on the CSS pattern library (on things like error messaging, empty states, input fields, etc) and assign someone to a weekly task of updating the guide.