Gather Studio & Market

Summer 2018

website designspecial projects
bigcommerceplatform modification
class schedulingdashboard tutorials
mobile optimized checkout
branding
Gatherlogo

summary

This was a website for a new company that planned to sell online and in person. The client wanted their website built on BigCommerce because of it's high compatability with the POS that they had already begun setting up. The business plan was anchored around bringing customers in for classes in a social setting in which they could learn from local artisans and have fun making their own take-home product.

Gatherscreens

first steps

The grand opening of the store was planned for two months from the time we bagan on the website, but they wanted to use the site to begin generating buzz and let customers sign up for the first classes. That meant we would focus on having the essential functionality live with a class calendar and payment processing first, and add additional components as we completed and finished testing them.

Gathercalendar1 Gathercalendar2 Gathercalendar3
Gatherstrip

telling a story

With the basic features in place, we began to focus on translating the clients business identity into an engaging online experience. It was important to convey the energy of a space meant to celebrate makers and creaters, and we needed to show the fun, social aspect of engaging with friends while attending the classes.

The client had already chosen the turquoise color, which worked to convey that her business was appealing to an active, hip audience of fun art lovers. We also liked the association if this color with artisnal craftwork in the U.S. Southwest. This vibrant color worked well for all branded content on the site and we repeated it often, but left plenty of white space to maintain an open and light base.

Gatherturquoise

It was important to express the communtiy first spirit that led to this business coming to be, and to recognize the people that made it possible. The owner was very passionate about connecting people with local artists and wanted a way to do this with the website.

We devoted a large section where a different local artist would regularly be chosen to highlight with their photo and bio, and a smaller gallery section with other artists. Since all items to purchase were made by local artisans, this is where customers had a chance to learn more about where the products came from and could have a background story to share if giving items as gifts.

Artist1 Artist2 Artist3 Artist5 Artist4 Artist6 Artist7
Gathersoap Gathersucculents Gatherskincare2 Gathermaking

special challenges

BigCommerce is focused on providing great tools for running an online store, but they have less room for customization than other platforms we'd used. They are currently developing a plugin with WordPress to address this, but were yet to have full fledged, supported integration. Given these limitations, two of our biggest hurdles to overcome were, a) keeping classes distinct from physical products for sale on the site, and b) designing the back end so the client could make modifications on the fly when needed.

classes

With the classes the challenge came down to showing them in a separate section from the physical products throughout the site, especially on the homepage. We wanted to show continually updated content as we added new products and classes. In BigCommerce, everything that's for sale is treated as a product, and while it is possible to assign different products to different categories, you cannot display separate categories on the same page like we wanted. On the homepage you're limited to displaying sections for 'new', 'featured', or 'top selling' products, which did not help us. We couldn't exclude classes from the 'new' section, so our only option looked to be to just show everything mixed together.

Gathereca

We finally solved the problem by taking advantage of modifications of the calendar app which we were already using to display class date and times. By inserting a modified version of the calendar on the homepage, we were able to display the soonest upcoming classes, and below that show a section for featured products so customers had immediate access to both as soon as they arrived at the site. Each calendar event was already linked with the corresponding class sign-up page so the path from viewing the calendar to completing the transaction was kept as frictionless as possible.

on the fly changes

Our aim when handing off a website to the client is to make sure they're comfortable with the backend, get them up to speed on what they can modify, and guide them on where to go to control different components. There's a thoughtful balance between granting enough power to update what they need, but not so much that they can break anything. This is a great article going deeper into this idea. We found that with BigCommerce, the less the client has to update themselves, the better. The flexibility in the page editor leaves much to be desired, and modifying product pages vs. supporting pages requires different steps. Swapping out auxillary images on product pages is especially cumbersome because images cannot be uploaded through the theme editor and product pages can't be edited where others can in the dashboard.

Gatherswap2

We addressed these difficulties by making a series of instructional guides for the client. These had step by step screenshots overlayed with instructions detailing how to modify each section she was going to need to make changes to. It's worth reiterating, BigCommerce provides a lot of tools to make selling online easy, and changes to actual products are easy to manage. This client was thrilled overall with the website and was able to confidently manage the import of product files and changes to purchase options. As a new business owner, she needed to keep the initial investment in the website fairly tight. She was able to do this, planning to hold off on hiring someone to manage the website updates until her business had established itself.

Other Work

Boxcoop logo bw
Zyte logo bw
Tokkapromo
Teampower logo bw
Human logo bw