World Wrestling Entertainment, the leading wrestling television production with cable TV shows such as Smackdown, RAW, and pay-per-view events spearheaded by the famous Wrestlemania, needed a full service migration from the Magento platform to Shopify Plus. I was assigned as the leading UX Designer on the project. The core challenge for the new WWE Shop experience was merging a variety of sub ecommerce stores and brands into one umbrella ecommerce storefront. This included merging a variety of subdomains such as WWE’s NXT, Legends, and Auction shops into the core WWE Shop experience. A robust Shopify theme architecture was necessary to design a front-end storefront and CMS that could meet WWE’s demands.
Deliverables / Responsibilities
- Full Web Build for Four Brands
- Creative Direction
- Strategy
- UX / UI
- Prototyping
Phase One: Ideation
UX Audit
Kicking off the project, I did a deep heuristic user experience analysis of the existing WWE Shop storefront. I annotated each core template, notating missing opportunities or best practices, as well as calling out key functionalities and UX heuristics in the experience.
In addition to auditing the existing storefront, I compiled a near one hundred page Competitive Analysis of leading ecommerce storefront examples in apparel and other similar competitor categories to flesh out the scope and UX direction for the new website experience. This also tied into the scoping the key functionalities required in the backend CMS that would be tied to the frontend experience.
Information Architecture
Problem:
Merging several storefront into one holistic website required a merging of multiple information architectures into a new primary hierarchy. In addition, the existing WWE Shop information architecture had grown bloated with outdated product and shopping categories and was overburdensome for users. Most importantly, the navigation needed to accurately reflect the information architecture found in other WWE digital properties, such as the main WWE.com and WWE Network sites.
Solution:
I created a sitemap to layout the new information architecture after looking through thorough analytics and auditing the existing product catalogues of the WWE Shop, WWE NXT, and WWE Legend’s storefronts. I worked with the client in numerous brainstorm sessions, seeking their requirements and needs in the hierarchy as well as giving consultation of UX best practices and ecommerce analytical KPIs.
Wireframing
Problem:
Every major migration at BVA (my agency) started off with a period of wireframing core layouts and functional requirements for each main Shopify template. One of the unique aspects of WWE’s business is the ‘on demand’ nature of their products – often short shelf life specials that need to be promoted quickly in tandem with a wrestling TV special. This required highly adaptable layouts that could be admined easily by the WWE Shop team.
Solution:
I designed, annotated, and compiled wireframes for the WWE core templates: Navigation, Homepage, Product Page, Collection page, and Category Landing Pages. The Homepage and Category Landing pages required outlining each core component and module and each of the permutations that could exist through editing the admin panel in the storefront’s backend. Each of these wireframes needed to show the range of permutations and the unique functionalities required by the WWE Storefront such as upsells, animations, and layout variations.
Phase Two: Design
Homepage
Problem:
The WWE storefront homepage needed to accomplish three things: 1) Be adaptable 2) Promote product and ‘superstars’ 3) Showcase the deep product catalog of merchandise on the WWE store.
Solution:
I devised a system of ten highly customizable modules with 10x permutations that promoted the three main shopping goals of the store. The homepage modules ranged from content focused to multiple variations of displaying promotions and collection categories. Most unique of all was the organization of the components to have a very fluid UI system that allowed each of the unique brands present in the WWE umbrella to be displayed on the website (i.e. the reds of RAW and the blues of SMACKDOWN).
PDP
Problem:
The old WWE storefront suffered from weak product page informational heirarchy and image quality. With the new site, WWe wanted to convey the product with bold product imagery and have a rich set of features for promotional material and upsells.
Solution:
I created a layout that maximized product photography and conversion but having a ‘sticky’ product sidebar and add to cart that persisted as the user scrolled through the new enlarged product photography. Multiple ‘blocks’ were built into the product form and photo gallery column to include easy upsell and cross-sell opportunities.
Another key focus for WWE was the premium quality of their replica championship belts – this required creating unique hero section for enlarged landscape imagery and video promoting the quality of each belt while including a quick-add button as to not defer users from not scrolling beneath the newly created fold.
Collections
Problem:
As with most other templates on the build, the goal for WWE with its product listing pages was flexibility and simplifying the user experience for product way-finding in their browsing. Numerous filters, such as each individual wrestler, was required due to the diverse product catalogue as well as the need for ever-present promotional material.
Solution:
Utilizing a common product listing layout of a sidebar for filters and grid for products, I added to the experience with the bespoke feature asks by including a unique filter for superstars, promotional ’tiles’ within the product grid, and additional components above the product grid that would show either promotional material or nested subcategories deep in the product catalog.
Sub-brand Landing Pages
Problem:
Key in the migration was the fusion of the other WWE brands into their proper home under the WWE Shop experience. This meant creating ‘mini’ storefronts with the main domain that include UI and visual elements that exemplified each unique brand and its branding.
Solution:
Done in tandem with the design of the homepage experience, the modules were created to be extremely robust and allow for the WWE internal team to created sub-domain homepages with flexible UIs to build out unique category landing pages for each sub-brands shopping experience.
Navigation
Problem:
WWE needed a new navigation that conveyed their deep product catalog and utilized simplicity for users in conveying their rather complex information architecture.
Solution:
My design incorporated best practices for megemenu desktop and mobile design to build nested link lists and promotional tiles block to show users the full product catalog. The Superstars tab was unique in that it required a listing of each sub-brand and their full wrestler roster that segmented to their individual collection pages. This needed to show off sub-branding UI for each dropdown. The navigation was designed with full AAA ADA compliance in mind.
