Hiraeth Webstore

Summer 2021 - Responsive website

The Client

My client was Zoe Burke. Zoe has a diverse artistic practice. She has a website for her portfolio but wanted to create a separate e-commerce site for her ceramics.

Taking inspiration from American fairy tales, she recently made a collection of ceramic vases she would like to retail stores and directly to users online.  She plans to sell her vases in small batches - about three at a time.

I used the Four W's to help define my problem statement

Who is experiencing the problem?

What is the problem? 

Where does the problem present itself?

Why does it matter? 

Problem Statement

Online art customers need an introduction to the artist, a platform to view the quality of their artwork, and a direct payment gateway because buying art online is intimidating. Ultimately, users want to buy artwork to project their own unique tastes and identities.

Hypothesis Statement

I believe a responsive website with compelling images and an intuitive checkout system will attract customers and increase product sales.

Project Constraints & Deliverables

The constraints of this project included:

  • A three-week turnaround 
  • Design an e-commerce website she could update 
  • Maintain the aesthetics of her brand 

To fulfill the assignment, I produced the following deliverables:


  • I worked with a client to define the problem and target audience
  • I outlined customer journeys 
  • I created high fidelity prototypes
  • I uploaded the design online

My Design Process

For this assignment I followed IDEO's Design Thinking Process:

E-Commerce Platforms


I helped  Zoe navigate which e-commerce platform to choose. We discussed the pros and cons of Webflow, Wix, Shopify, Squarespace, and. Weebly. 


My recommendation Wix because of the low price point. Moreover, she uses it already. Or Shopify because of its long term scalability. 

Market Research & Competitive Analysis

I researched the market to help Zoe sell her product. My discoveries informed my design decisions. Here are some things I found:


Shop Updates Create Urgency

With shop updates, you promote one batch of objects at the same time. Then, you would then say the items in your shop will be available to purchase over a set weekend. The good thing about doing "shop updates" is that you send all of your followers to your shop simultaneously. And this creates urgency with your followers, as you are most likely selling one-of-a-kind items that will sell out.


Disperse Promotion Across Platforms

Engagement rate is going to be different across different mediums. For example, email lists have a high engagement rate (usually 30-50%), whereas Instagram has a lower engagement rate (usually 3-5%).  Therefore it is essential to have several places to promote.

According to an expert I talked to, "if you have a stall at an art fair, and 1000 people walk past your work and see it, you can expect to sell around 3% of the people. So that means you would make around 30 sales that day.  It doesn't matter what you sell." Online sales follow the same logic.


There are differences between "The Artist" and "The Ceramicist" 

Ceramicists use e-commerce platforms for sales. Fine artists tend to display work online but sell via a gallery or direct contact. I helped Zoe figure out which box she fit into. She is a ceramicist, but she wants to be more high-brow than Etsy.


Customer Journeys

Sketching

I created low-fidelity wireframes for mobile to showcase how the content would appear on a user's phone. After multiple iterations, I made the mid-fidelity wireframes. After gathering feedback from 3 users and the client, I created the high-fidelity prototype.

Responsive Design

I started designing for mobile because we determined that was the target device from user testing. Then I recreated the screens for desktop and tablet.

Round 1: Prototyping and User Testing

I tested the mobile prototype with three potential users for feedback. I chose three users from Instagram because they were Zoe's target audience. They all agreed that the website was easy to use, and they loved the hot color palette.

Round 2: Prototyping and User Testing

A few months later, I returned to the website to make improvements. Since the last update, Zoe Burke changed her logo and alias to Zody Burke. I updated the prototype and recruited four users. We continued user testing because she did not have resources to include a heat map or digital experience analytics platform like Fullstory.


The key objectives of the usability studies were to: 


  • Identify pain points for mobile users
  • Gather feedback on the company branding

Rectified pain points include adding the shipping price next to the shipping options and accentuating the limited quality of goods. 


 A participant asked why there were only three goods on the site. She asked "Why build a traditional e-commerce platform with so few items?"


That made me think. We created an e-commerce site, so buyers could purchase her vessels. However, because stock is limited, it is vital to create buzz around future product drops. Users should feel like the vessels are unique one-of-a-kind objects, and they can score on the next batch. 


To help amplify this particular buying experience, I included the date for the upcoming "drop" and a button to see items they already missed. I've seen this simple design pattern on sneaker websites that do limited releases. Users fear FOMO.

You can view some of the updates I made below.


Lessons Learned

  • Be confident when the client starts to become a designer. This project was both exciting and challenging because my client was an artist with a strong vision. I learned it's essential to understand the needs of my client while maintaining confidence in my expertise.
  • I Iearned that a successful e-commerce site requires excellent content, easy & secure checkout, and straightforward communication throughout the order.
  • Many web development tools are easy to use. However, remember to leave an ample amount of time to upload the design online.