Yuyi Grows Pt. 3: E-Commerce Website

Written by:

Zane Huggins

Introduction

In our previous two case studies, we discussed our work with Yuyi Grows, a carnivorous plant nursery from the San Francisco Bay Area. Our first project with Yuyi Grows was to design their full brand identity, and our second project was to help them develop a product line including shirts and stickers. In this case study, we bring their story full circle with an e-commerce website designed to boost and automate online sales, as well as house a variety of media contents unavailable on traditional social media platforms.

Concepts

I began conceptualizing the style and structure of Yuyi Grows’ website while I was on a flight to California (we don’t waste time, that was precious hours of uninterrupted work)! Beginning with style tiles, an information architecture, and then wireframes, the site’s overarching concept came together pretty quickly. It also helped that we had already developed the brand, and at this point we were halfway through developing their product line.

Interactive Design

A question a good web designer always asks is, how are we going to bring surprise and delight to our users? We wanted to take some of the artistry of the brand we had developed, and turn it into a multimedia, interactive experience. This led us to create a scroll-based animation in which we took the vector line graphics from the visual identity, and brought them to life by making the plants rise in and out of the frame as a fly flew a loop around the center of the screen.

As the animation completes, the biographical section scrolls in with modest padding around the text, and just enough room to leave the vector graphics in the bottom corners of the page to frame the composition. This was a creative and logistical challenge, and required some research and development to achieve the desired effect, but it was well worth the effort!

E-Commerce

One of the main purposes of the site was to allow customers to buy plants and merchandise online without having to use Instagram’s messenger service. Creating a formal system with which orders would be placed and shipped was our next logistical challenge.

Having formerly used Shopify as our e-commerce platform of choice, we decided to change direction for this project and use WooCommerce as it has such a robust framework and is developed specifically for WordPress sites. Not to mention that it allows for a much higher level of customization for developers, as well as tons of great backend functionality for shop managers.

The switch to WooCommerce was a major success! Although the initial development is much more complex than it is with Shopify, we were able to control the user experience much better. Shop manager tools allow Michael (owner of Yuyi Grows) to digitally fulfill orders placed by customers on his online shop, handle shipping, and run sales and discounts.

Blog and Grow Guides

One thing most of the sites we build have in common is that nearly all of them have some type of blog component. Yuyi Grows’ site is no exception. They had been receiving many requests from customers to create grow guides for their plants, and rather than creating a PDF or printout, we thought it would be much easier for their customers to access their grow guides through the website. This would eliminate the risk of printouts being lost, or destroyed while gardening.

The blog component is used to talk about their endeavors as gardeners and business owners, with their first post being an in-depth behind-the-scenes story of how they built their greenhouse. This will give them a platform to tell their story and generate interest in their products in a meaningful and creative way.

Impact

After designing and developing a site packed with interactive features and functionality, Yuyi Grows has dramatically increased online sales and helped guide their customers with the care of their plants. The website serves as an essential companion to their social media strategy, streamlining sales and saving time for better content creation.

Visit yuyigrows.com to learn more about carnivorous plants.