Merging Shopify eCommerce & WordPress content site.

Business needs required this brand to maintain an online presence on two sites: A Shopify e-commerce site and a content product learning WordPress site. Now it was time to merge two sites into one.

Project Goal

Re-design the menu to work on both platforms seamlessly - Shopify & WordPress


My Role

Lead UI/UX Designer

My Responsibilities

UI Research, pageflow, site architecture, wireframing, and prototyping

The Challenge

Sites were created on two different platforms: WordPress and Shopify. One platform for learning about the product, the other for all e-commerce business needs. While visually we needed to merge them into one, the backend needed to remain the same. The menu also had to be scalable, because we knew the brand is actively growing and adding new products every year.


The Solution

We needed to re-design the menu and make it a single menu for the two platforms. Prior to any wireframing, we started with content framework by analyzing the two existing menus and finding overlapping content that was valuable to both sites. We bucketed the content into 3 groups: Shopify-only links, WP-only Links, and Common Links.

High-Fidelity Prototype

Deciding on the look and feel was a big part of the process. Doing research, creating moodboards, resulted in several design options. All options were valid, but one felt more in line with the brand than others.

Wireframing

Next step was prioritization based on data (user clicks and impressions) and customer journey that helped us create menu tiers, and throw out redundant content. Now that we knew what information to keep, we started wireframing.

Takeaways

The goal of this project was to merge the two sites into one by means of creating a single menu across the two sites. The menu is scalable and provides an easy one-step navigation to product pages and collection pages on the eCommerce platform.