Jesse Bandfield
UX Designer
Next case study

Designing with Constraints: Selling Art on Shopify

BALANCING AN ARTIST’S DREAMS, CUSTOMER DESIRES, AND A WEB PLATFORM’S LIMITATIONS.

OBJECTIVE
Shopify Online Store
ROLES
Research | UX
TOOLS
Figma | Whimsical | Trello | Shopify

Visit the Site

A few weeks after this project wrapped up I bought a screen print from a local artist. It wasn’t a coincidence. While interviewing my client’s customers and discovering how and why they buy art, I began to understand the joys of art as personal expression. To me, buying this print is a testament to deeply diving into the world of the customer—because of that experience I became someone who buys local art.

Thea makes local art. She specializes in pen and watercolor sketches of outdoor cityscapes and natural beauty. When she reached out to me wanting an e-commerce website and blog where she could sell her art, I jumped at the opportunity to get to know her customers, design for a specific platform, and help promote this beautiful art.

Problem

Thea has been active on Facebook and Instagram and has sold her work in person at markets, but now wanted a responsive e-commerce website and blog in order to better interact with her customers and increase sales.

“Some things I want to do on the website are show work with room to comment on the circumstances of a certain painting; have a place to sell; a blog about how to take care of various kinds of artwork in your home (interviews in a template style with artists using various media and their tips for care, tentatively called Living With Art) and instructional videos (which I have no idea how to create.....that is another topic).”

This project was all about balance. Where is the intersection between the artist’s wants, the customer’s needs, and the platform constraints?


➢  EMPATHIZE

Artist’s Wants

Some of the most joyful moments of this project were chatting with Thea and her customers. Through conversations by phone I learned about her products:

  1. How she organizes and sells them at markets
  2. The difference between prints and originals (and those who shop for each)
  3. The joy customers experience when rummaging through bargain bins
  4. She currently has 65+ products to put online

I also learned that she wanted to easily post new products and blog posts herself after I had handed the site over. She hadn’t done much research yet into Shopify vs Squarespace vs Wordpress, and wanted me to make a suggestion.


Customer’s Needs

That first week Thea gave me a list of some of her customers, both friends and some who had found her organically, whom I called up in order to discover their needs, pains, and the ways they shop for and think about art. They were a joy to talk with, and gave me a glimpse into the world of the local art buyer. Some key takeaways were:

  1. Valued knowing the process behind a piece. What was the beauty the artist wanted to capture? Is there a story?
  2. Valued art that spoke to them. Poor resolution was often a hindrance of this. In lieu of seeing the art in person, they wanted to see detailed shots of the work.
  3. They often had a particular place in their house in mind as they shopped, so were looking for a certain color palette or style. Ultimately, the art had to speak to them and make them happy.
  4. Thea’s place-based art was particularly appealing if that location meant something to them.

Platform Constraints

Luckily, many people online discuss the merits of Shopify vs Squarespace, the e-commerce frontrunners for makers and small business. I did a comparison of the two considering Thea’s needs for both a shop and a blog.

Could one platform be easier to use for Thea, show detailed imagery and the background story for the customer, as well as sell flawlessly?

When breaking down each platform I found:

  • Both offer all basic features that Thea requires, and would do fine.
  • Shopify was built for Ecommerce.
  • Squarespace was built to easily build elegant websites.
  • Both would cost ~$30 - $45 per month including hosting and sales capabilities.
  • Shopify is better for scaling. There are better systems for categories if Thea wants to sell 50+ items and continue to grow over time.

I presented my findings to Thea. Even once we landed on a platform, there were still many templates to choose from that would greatly impact the experience of customers on her site and what features I would be able to design.


➢  DEFINE

While Thea spent time looking through a few templates I sent her way, I began thinking about the site’s information architecture.

With 65+ products, how would the average visitor to her site understand product categorization?

To find this out I created a Trello board full of cards with Thea’s watercolors on them, and got on the phone with four individuals who have shopped for local art at markets before. I conducted moderated tests where participants moved the cards into groupings that made sense to them, and then labeled those categories. I had them talk out loud as they went, explaining their actions and talking through any images that were difficult or didn’t quite make sense in their categories.

Like true inspiration, 4 clear categories emerged that all 65 images fell into:

  • Sea / Boats
  • Landmarks / Architecture
  • Trees
  • Landscape / Outdoor

As I built my sitemap, the categories found through the card sorting exercise became the framework of the shopping experience. From my customer interviews I knew the importance of the artist’s process and inspiration to shoppers. 

How could I use the Shopify platform to connect longer stories of process with the watercolors they’re describing?

Not only would the site need to be filled with beautiful hi-res images of Thea’s work, it also needed to combine stories and products in a clear and findable way. All of this went into the sitemap.

Thea and I landed on a template that was blog-forward and also hit many of our other requirements:

  • Blog posts on product pages and vice versa
  • Multiple Blogs (Living with Art + On Location + etc)
  • Product Image Zoom - for hi res detail

Throughout this entire process she was working with contractors to finish up a house renovation, as well as doing some painting herself, so direct communication from my end was key because this project wasn’t her priority.

In our once or twice weekly phone conversations I would give her a to-do list, and follow that up with an email as well. I also helped her process as much as possible—knowing our technical requirements, I narrowed down templates to only ones that would meet our needs and then allowed her to choose her favorite.


➢  IDEATE

As I began piecing together sections in Shopify based on my sitemap, my biggest hurdle came in trying to link blog posts to products. Although the template was built for highlighting blogs at the bottom of product pages and showing products at the bottom of blog posts, there was no obvious way to control exactly which product showed on each blog. I could link whole blogs which would show multiple posts on each page, but I wanted only the one blog post which told the story of that particular product.

After reading forums and poking around, I resigned to the fact that the only way to do this was to limit the post display to show only one, and then use tags to link exactly which product I wanted on each blog post. This worked fine, except that the filter feature on the product page also used tags to categorize and display products, so by creating 65+ tags I would be creating 65+ categories which would all display on the product page.

I had to decide: was it more important to link products to blogs, or to have a through filter feature when viewing all products?

When I looked back to customer interviews, it was clear that customers generally wanted to know the story: what beauty did the artist see and decide to capture? Because of this, I made the decision to remove the more robust filter feature in exchange for directly linking products to their respective blog post.

➢  DESIGN

Finding Opportunity

Removing the use of tags to find products, which would have been primarily used to group all products into geographic regions, created space for opportunity. I knew from my interviews that Thea’s art was especially appealing to customers if they had a connection to the physical location of the sketch.

Without using tags, how can customers still find images by where they were painted?

I solved this problem by creating a map. Using Google My Maps, I was able to quickly put together a working prototype of this feature in order to find out how it was received and used by customers. By scrolling around the map, users could see thumbnails of where each image was painted and follow a link directly to that product. My hope was that customers would find this interaction delightful and then be guided to products that were important to them based on place.


➢  TEST

Testing the Designs

With the basic flow of the site together and a few products and blog posts to make it feel real, it was time to test.

Could participants find and purchase a specific piece of art? What route would they take to get there? What would they see and feel along the way?

Conducting usability tests as the designer is always a little irksome because your designs are showing their true value. It can also be hugely rewarding when participants are able to complete their task and experience visceral delight at the same time. Here are some things I heard that day:

“I want to know more about Thea! Where do I find out about Thea?”
“The background color reminds me of artful paper or a canvas.”
“The gallery looks a little cluttered. I would want more geometry.”

Armed with quotes from my participants, I crafted key takeaways and additional jobs to add to the backlog.


Documenting the Designs

Because there were technical needs for all images and tags, I created a Content Inventory and Guide Document. Documenting this data helps keep the site consistent as new products are added. 

Images all need to be cropped to specific aspect ratios, and some require padding.

All products and blogs need tags for sorting into collections and to ensure blog posts link to product pages and vise versa.

Because these documents can tend toward being dry and hard to understand, I always try to keep mine conversational in tone, even though that means using a few extra words.


Takeaways

Find the balance.
Every project will require intentional choices. That’s what design is all about. Knowing what to prioritize and for whom will make the final design that much more impactful.

Look for the gaps.
When I knew it was important for the customer to search by place but I couldn’t use tags anymore, I had to get creative. Finding those gaps often presents unique opportunities.

Push the boundaries.
Shopify, like all systems, has rules. I find that limitation, rather than being restrictive, allows for greater creativity. Using tags to connect products to blogs was an example of this.

 

Note: As of August 2020 the site was not live. When it becomes live and analytics are gathered I’ll update this case study.


No items found.