West Elm Homepage
This is an example of a desktop and mobile West Elm homepage which was redesigned and updated on a daily cadence using a modular template framework.
Homepage Template Case Study
Hypothesis:
If a modular set of homepage components are developed with and are accessible to cross-functional partners, then asset design time will decrease, digital marketing flexibility will increase (thus increasing conversion rates), and asset redeliveries due to human error (rather than promotional changes) will decrease.
Goals:
1) Create a cohesive homepage design system out of modular components, large enough to cover a variety of promotional and cross-brand (across WSI brands) business needs for desktop and mobile but not so large that module design permutations become unnecessary.
2) Modules must work within the column parameters of West Elm’s ECM (Enterprise Content Management system)
3) The module nomenclature must meet the following crossfunctional prerequisites a) Structured within the master Sketch document so as to match the pre-existing organizational structure of the West Elm internal server (using “/”s for sub-folder delineation) b) Delineate between modules structural design use and modules or sub-modules for delivery (or nested “symbols” within larger “symbols” in Sketch) without sacrificing organizational workflow within Sketch c) Named not only with visual design cues per each individual module (ie. 2-UP, Category Dock 5-UP) but also with hierarchical cues (ie. Primary, Secondary, Tertiary) for use by marketing and digital merchandising briefing and presentation purposes.
4) Modules must be accessible for reference to cross-functional teams (who don’t have Sketch licenses).
5) Module type lockups must be specified with character counts for headers, sub-headers, and body copy.
6) Document workflow for the design team and onboarding reference.
Methods:
I, along with my Art Director, Creative Director, and cross-functional partners, audited year over year homepage use cases to account for the successful design implementation of large business driving annual promotions as well as successful core, day to day, design assets.
Was a previous asset successful because it was well designed? Or can the conversion increase from the previous year be attributed to its relative position around other promotions that may have varied year over year?
Questions like these were important to answer cross-functionally so that we incorporated designs that were successful by virtue of the design itself. This process of analyzing promotional success allowed us to separate the wheat from the chaff and assemble a cohesive homepage design system.
The homepage templates were built in Sketch and modeled on the software’s system of symbols and nested symbols.
In addition to the template redesign documentation was imperative. In order to optimize workflow, file organization, and onboarding I compiled a detailed Confluence document for the newly designed templates.
Conclusion
Digital marketing and design flexibility increased and design-time per asset decreased as hypothesized. However overall design time increased due to the overall increase in design change requests as a result of the increased flexibility.
Initially, redeliveries due to human error decreased as expected, however, the increase in overall design change requests had a negative effect on the overall redelivery decrease.
Cross-team confusion surrounding briefing and product imagery decreased dramatically as design wireframe visibility increased for cross-functional partners.
Due to ever-evolving business needs and constant refinement, the homepage templates were designed to be a living document. After our initial redesign, several more updates and partial redesigns occurred incorporating updated brand typestyles and site-wide padding styles.