Modular Component Library
Standardize and unify the user experience across Hershey’s entire portfolio of brand sites through the a modular set of UI components and templates.
CLIENT
Hershey
CAPABILITIES
Design Research, Experience Strategy , UX Design, User Testing
APPROACH
Audit representative examples of the more than 30 Hershey’s brand sites to identify opportunities for optimization and standardization. Analyze direct and analogous competitor sites to collect inspiration, and precedent. Conduct stakeholder interviews to prioritize marketing objectives across brands. Define and document components in a comprehensive pattern library. Collaborate with key brands (KitKat and Reese’s) to implement new sites using modular pattern library components. Validate InVision prototypes with customers via UserTesting.com’s remote testing platform.
Competitive Analysis + Design Principles – Insights gleaned from site audit and design research – including dos and don’ts from competitor sites and a prescriptive set of ten design principles – were documented as part of a comprehensive experience strategy.
Site Map (Hersheys.com) – Proposed site architecture based on standardized components and templates.
Site Map (Kitkat.com, Reeses.com) – Proposed site architecture based on standardized components and templates.
Component Pattern Library – Each component and its possible variations are presented in a user-friendly pattern library which includes explanation on where and how to use the component as well as UX and functional annotations.
UI Design – Home Page Template (Kitkat.com)
UI Design – Product Page Template (Kitkat.com)
UI Design – Recipe Index Page Template (Reeses.com)
UI Design – Promo Template (Reeses.com)
OUTCOME
Rolling out the component pattern library across the full suite of Hershey’s sites led to a bounce rate reduction of as much as 20% in some instances. Consistency of functionality and experience improved return visitors’ ability to identify a given site as belonging to the Hershey’s brand portfolio.