Overview

Shopify is a web platform that provides an affordable solution for small business owners to sell their products online. In between client projects at Barrel, I worked with a small team to create Mosaic, a responsive e-commerce theme that we sell on Shopify’s Theme Store. I really enjoyed the challenge of working within the limitations of the Shopify platform to create a flexible theme that looks great in all use cases and meets the needs of real users.

Designed at Barrelny.com.

 

OUR GOALS

Build a new theme that offers unique features from others currently in the theme store

Design a customizable theme that's easy to use on the front end and back end

Create a flexible theme that works for a variety of companies

 

MY ROLE

Lead Designer

User Experience

Product Strategy 

Wireframing + Planning

Since this project was done quickly and with a lean team, I took the lead on designing the user experience in addition to creating the look and feel for the theme. First, I created low-fidelity wireframes to organize the structure and flow and communicate it to my team. This was particularly useful for the homepage because I wanted to create a flexible layout that included multiple modules for store owners to mix-and-match. These modules would allow the homepage to work for a variety of companies and would allow each store to have a unique look.
 

Three Versatile Presets

To showcase Mosaic's versatility, we created three different mock stores. Each store comes with preset colors, fonts and homepage module combinations that a user can set as their default look after purchasing the theme. The three stores / presets we created are Mulberry, for large scale businesses, Gesso for personal portfolios, and Oak for small businesses.
 

A Unique Product Page

Many portfolio sites use large, immersive photography to showcase the details of their work. I wanted to create a similar experience on the Individual Product Page. For that reason, Mosaic uses a unique large scale grid so shop owners can feature beautiful, up-close product shots. To make sure it's still easy for visitors to quickly purchase a product, I included a fixed bottom navigation that displays the name of the product and includes a "Buy Now" button to anchor visitors to the product purchasing section. 
 

Diamond Details

Using a diamond motif, I created several custom elements to give the theme a memorable look. This includes the cart icon, footer divider, placeholder imagery, the page load animation and more.
 

Real Stores Using Mosaic

Over 100 small businesses have purchased the Mosaic theme so far. Based on real user feedback, I’ve been working with our developer to continually improve the user experience of the CMS system for store owners and the shopping experience for customers.