The Challenge
Forging an Innovative eCommerce Path
The primary goal for this project was to allow users to integrate their Shopify store with HLC's product catalog, and ultimately provide an invaluable automated service to help bring their eCommerce presence to the next level.
Our target user was the bike shop owner who didn't have the bandwidth or knowhow to build an effective online store. This tool would not only help get them up and running, but it would save them countless hours of work.
My role: UX design, UI design, research
The Brainstorm
Defining Features and Building Wireframes
When I first got involved with this project, the product and development teams had made the decision to build a standalone app within Shopify. In the end, frustrating delays caused them to rethink the solution and it was decided we would instead build this directly in our B2B store.
Onboarding users would first need to connect their store with our system and complete the preferences section. Then they would use a newly designed catalog curation tool to select the products they wished to sell on their store.
User flow for onboarding as a Shopify customer
In discussions with the product manager, we agreed the catalog curation tool needed to be as close of an experience as possible to our regular B2B store.
But first I had to design the onboarding and preferences interface. My primary goal was to remove any potential pain points before they might occur, so I focused on clear, descriptive language, and a clear visual hierarchy that would make progressing through the steps as easy as possible.
When reviewing early concepts, the developers suggested for certain preferences we set a default (recommended) state for users, as the alternative selection would likely rarely be chosen.
Example of card components in the Preferences — we labeled default states as 'Recommended'
New iconography created for this project
For catalog curation, I had a good foundation to work from using our existing product card design. The most challenging aspect was incorporating a second navigation section for users to browse Brands and Categories.
I also had to figure out how to incorporate two view options, which would allow users to filter only product they had included, or excluded.
Layout sketch showing how the navigation fits with the product grid
Anatomy of the product card
Hover state on product cards
Users could customize down to the SKU variant level
The Result
The Ultimate Retailer Time-Saver
After a frustrating false start with this product, we ultimately delivered an excellent, first-to-market solution for our customers that further established HLC as an innovator in the bike industry.
Not only did users enjoy an easy onboarding and setup process, but additional automated features — catalog sync, order fulfillment, and more — meant once they started selling product, they could rely on HLC to help drive their business.
As we continued to onboard new customers, it was our vision to ultimately roll out additional phases with added features.
I such feature I explored was a customer dashboard built into the integration's main interface:
