Shop for your Home, from your Home.
Vanillawood
Website Design / Ecommerce
1
Background
Vanillawood is about more than just home décor.
Vanillawood is a Portland, OR based interior design consultancy and curated home décor shop. In 10 years one couple's dream became an international business. With a unique flavor that is both pretty and edgy, Vanillawood needed a total eCommerce shop overhaul that would speak to their tightly-edited brand. Greenstone and Vanillawood teamed up together to craft an alluring and powerful online shopping experience.
2
Challenges & Objectives
Designed for Mobile
Unique Shop Structure
Client Managed eCommerce Software
Custom Page Templates
Designed for Mobile
With nearly 60% of Vanillawood's visitors using a mobile device, we designed Vanillawood's eCommerce shop with mobile-first principles. The site was tested and performs well in booth Chrome and Safari mobile browsers.
1. Adheres to the Grid Framework
Using the Timber Grid framework, Greenstone's developers were able to categorize all content to operate specifically for different device sizes. The Grid system reliably allows the content to flow as needed as screen sizes expand or shrink.
2. Everything is Within Reach
There are some features on the Vanillawood site that work best to remain as "sticky" when in mobile mode. The mobile menu button is fixed to stay at the top of the page so users can access all the product categories while browsing. Also when in mobile, products that are added to a cart trigger a "continue to checkout" button.
3. Swipe Enabled
In the desktop shop, multiple images are uploaded to showcase other views and variants of each product. By enabling a discreet but easy swipe functionality, it is intuitive for users to change the product image without losing their place on the product page.
Unique Shop Structure
Vanillawood has over 700 products that update frequently. With such a large inventory, designing a navigational system effectively created some challenges for the team. We tackled these challenges with the following solutions:
1. Development of Sub-Collections
Sub-collections help narrow and refine categories of products. An example would be that "Table Lamps" are a sub-collection of "Lighting". This advanced structure helps manage a large number of products. We used a Shopify-powered framework that assisted in setting up a sub-collection structure that would remain compatible to the Shopify backend. See figure 2.1.
2. Products by Curated Collection
Vanillawood pointed out to our team that many of their customers like curated products that are associated to a theme or style and not by category. We developed a "Lookbook" system that acts as a special category type. These collection pages featured curated homes that use hand-selected products in an interior style.
3. Sidebar Navigation
Greenstone coded a dynamic navigation sidebar for most collection pages. This extra navigational support strategically maps out the collection options in a way that is both simple and accessible. See figure 2.2.
Client Managed eCommerce Software
"Keeping shop" requires a lot of regular maintenance. Utilizing reliable and powerful software is essential to business efficiency. For many reasons, Shopify is the choice software for our agency. Our developers know how to customize the design and function of a Shopify store without compromising these three key needs:
1. Product Management
Shopify software enables clients to easily create, delete, or edit their products. They can add product variants, images, SEO, weight, tax, tags, price, collection and more. See figure 3.1.
2. Payment and Checkout
A key feature that Shopify users receieve is extremely secure and up-to-date payment gateways. Users can use credit card processing, PayPal, Apple Pay and traditional methods of payment. This checkout process alone can cost other online businesses tens of thousands of dollars to develop, but Shopify offers it to members for a very affordable rate.
3. Sales Channel Analytics
Every business owner wants to know how their customers found their business. Shopify tracks all the traffic that comes into the shop and how effective their conversion is. Vanillawood works heavily with Facebook and Pinterest, which can generate many sales. With this software, admins can monitor their digital marketing campaigns success.
Custom Page Templates
Vanillawood offers more than just products for sale, they also offer design services and curated looks. Even though this is primarily an eCommerce website, custom and dynamic templates were needed to create the whole picture.
1. Lookbook Collection
A special collection designed to feature products within a specific look. These Lookbook collection pages are designed to feature a hero image and description of the look. The complimentary products are featured below. See figure 2.1.
2. Design Services
Vanillawood has services-for-hire and needed a specific page to explain their offerings. We developed a portfolio slideshow, branded Vanillawood's special services, and developed a unique form just for these inquiries. The design services information was compactly composed into one custom page. See figure 2.2.
3. Sub-Collection Preview
Because Vanillawood has a unique collection structure, we needed to share the look and feel of the whole collection. We dynamically coded a preview page that would pull in a thumbnail image of each sub-collection from the main collection. These little touches make a huge difference in the user-shopping experience.
3
The Design
4