HiveRack: Shopify Store Front

Project Overview

The HiveRack brand and Shopify store front was a project I was assigned to in the very early stages of conception. The goal was to create a brand that had its own independent identity, while still making sense operating under the main company umbrella.

The ask of the project was: create company branding, logo mark, photograph and edit the products, develop wireframes, and use the Shopify platform to build the store front.

Role: UX Designer, UI Designer, Lead Graphic Designer, Market Researcher, Copywriter, Photographer, Shopify Developer

Programs: Figma, Adobe Illustrator, Adobe Photoshop, Shopify Store Front

Key Collaborators: N/A

Branding

The only spec information I had when I starting to work on the HiveRack mark was there two products upon brand launch. Due to the decision to call the sub-brand HiveRack, I decided to stick with a beehive theme, which worked well considering the two racks we had featured two MS-01 (the bottom portion of the hive), and three NUC Pros (the top portion of the hive). I chose a contemporary and trendy green colour palette to communicate cutting edge and and distinct identity from the parent company's orange and white.

Mid-Fi Wireframes

Since I was planning on using an existing Shopify store front template, I started my wireframes from a mid-fi level, using an old proof-of-concept image of the product as a placeholder as I worked out the placement of the information and images. My goal with these wireframes was to be sure that my proposed colour palette struck the correct balance of exciting and editorial, and avoid feeling too severe and monotone.

Shopify Store Front

Once I had the concept of the store front finalized and approved, I began editing the Shopify store front. I photographed and edited the product images, and arranged the large amount information in an easily digestible, hierarchical way. Lastly, I added SEO and Alt tags to boost visibility of the storefront and product.

Over the course of the project, additional accessories and pages were added, as well as a Shop app storefront.

01 Landing

02 MS-01 Listing

05 Contact

04 Accessories

Desktop

Click for full preview

01 Landing

02 MS-01 Listing

03 NUC Pro Listing

Mobile

Click for full preview

05 Contact

04 Accessories