Background
During my time working for Hatched Labs, the team behind the creation of https://shop.gianteagle.com, Giant Eagle was undergoing a re-brand. The overall design was changing to be more fun and inviting as part of an effort to increase traffic to shopping for groceries online.
The original application was built using Relay, JavaScript, and styled with a custom version of Tachyons, all great decisions for building a consistent app quickly. After launching 200+ stores online, growing the front-end team, and leading an effort to build our next iteration of the front-end platform, it was the perfect opportunity to rebuild critical components, including the global navigation header.
Objective
Re-write the global navigation header in TypeScript using the new branding guidelines.
Technical Decisions
Styling
The original CSS supporting the look and feel of the navigation header was built using Tachyons. These are standard classes that apply styles, similar to Tail Wind but with more limitations. Part of the design decisions for the re-brand included optimizing layouts for more devices, which needed more breakpoints to control the styles.
I chose styled-components, a CSS-in-JS library, to handle all the styling. Styled-components works by injecting CSS into the head of the DOM whenever a component is mounted onto the DOM, and it injects a custom class onto the element with that style. It also makes React code very easy to read. Styled-components has the added bonus of being able to leverage JavaScript, so I was able to create style utility files to better manage breakpoints, colors, and animations.
Accessibility
A major piece lacking in the original header was full accessibility. It meat the needs of a solid MVP, but improving accessibility became critical to improve the shopping experience for all. The navigation header is filled with links, each needing to have proper aria labels for screen readers to operate effectively. Buttons needed to be properly set to handle tabbing, selecting, toggling, and any other interaction necessary without needing a mouse.
Search
Real-estate at the top of the app is crucial because the navigation header is sticky and stays at the top of the page at all times. Creating a header that is too tall can take away more of the space for content on more narrow devices. There is also the need to not overly bunch multiple components together, which gives a confusing, overly-busy, crowded feel.
The search bar is the center piece of the header. It is the quickest way to find specific items, categories, and many more helpful resources. It’s important to keep focus on the search bar when it is in use, remove distractions, and give enough space to see all characters typed into the input. To achieve this, I created a custom search bar that grew on focus, removing the setting dropdown and store selector, and created a full-page overlay behind the input.
Reliability
Test coverage for the original header was ok and the entirety of the header and it’s various sub-components were written in JavaScript. Part of the drive to fully rewrite the navigation header was to more easily replace the current header with one written in TypeScript. The strongly written types for all values and state variables increased the speed I was able to write tests, which were also written in TypeScript.
Features were released to customers using feature flags, so by writing a new header component it simplified the amount of nested conditionals also required to safely switch between the old header and the new one. It can be very messy to have conditionals listed in several sub-components. Having the opportunity to start from scratch without any technical debt to code around simplified the feature flag conditional to one place, making efforts to remove the old components incredibly simple (and satisfying!).
Mobile-First
Designs were made for the mobile shopper first, ensuring that all navigation needed at any screen size was always present and accessible.
To simplify on mobile, buttons like the store selector and authentication were moved into the hamburger menu. We found that our typical shopper had a store they always used so once that user had used the web app for the first time on their phone, they didn’t use the store selector again. The authentication button also took up a lot of space in the header and was really only needed occasionally compared to the other components.
Both the store selector and authentication buttons returned to the always accessible view on the tablet layout.
The search bar returned to the top level on desktop layout, avoiding overcrowding and minimizing vertical space used that the content section below could not use.