Glorious Brand Transition
eCommerce Product Page UX/UI
Product Page Evolution
During Q1 and Q2 of 2022, Glorious was preparing to release a total rebrand of their logomark and company brand standards. However, before the announcement was made, the design team was tasked with transitioning the brand into the new style, particularly for product launch pages that were caught between standards.
I was tasked to lead the transition for the Model I product launch web page – to utilize previously established product page elements to update the UI to a more contemporary interface that would match the evolving brand standards. This page needed to be designed and developed quickly, so I kept the copy and visuals succinct. I also created points of interaction throughout the page to help emphasize that the mouse is available in both black and white.
Scroll or tap prototype to interact
Scroll or tap prototype to interact
The utilization and adaptation of previously-established page elements helped the developers meet their tight deadline while also transitioning the brand to an updated, less busy style that would match the impending rollout.
Contrast
The established brand standards did not allow me to design according to accessibility font-size standards, despite my better efforts to push the brand to do so. Therefore, in order to compensate in some way, I designed the page with high contrast and low visual noise to help the flow of information on the page.
Other accessibility updates to the section styles included eliminating text over images and textures, as well as increasing responsiveness and contrast across the site.
Versatility
Icons and visual components for various features and products were updated to fit the upcoming rebrand, and were designed to be more clear and versatile.
Further Evolutions
Our next steps in the brand transition included switching to a lighter palette, changing the hierarchy of the hero image and information, updating the page to expand to full width where content would allow, while establishing a new container and how we style elements within it. This stage set the tone for the website rebranding overhaul and became the template for all new product pages going forward.
Prototypes
You can find the Model I page prototype here. The prototyping for this project was simplified to include only new page features due to time constraints, so the navigation and some page links do not work. The color toggle – the main feature of the behavior that needed to be communicated to the developers during handoff – is prototyped properly. Unfortunately, I do not have access to many of my prototypes created for other Glorious product pages, but if you have any specific examples you would like me to demonstrate in XD or Figma, please reach out and I would be happy to work with you.
