Logo with name and olive branch arch

Buy your art here.

Evergreen & Grand is an art eCommerce site for local artist, Amanda Hathaway. It is the new home for all her art sales. Clients can browse, get inspiration and purchase at home or on the go!


Multiple desktop screens with Evergreen and Grand designs

Role

UX Design
UI Design

Deliverables

Survey Analytics
Competitive Analysis
Card Sort
Personas
User Flows
Site Map
Wireframes
A/B Testing
Usability Test
Mid Fidelity Prototype

Time &Tools

Client
Amanda Hathaway
Duration
3 weeks
Tools & Software
Figma

Maze

Optimal Workshop

Usability Hub
View Figma Prototype

Problem

Amanda has been an artist all her life and has come to a point that she wants to turn passion into profit. However selling art on websites like Etsy and eBay can devalue art, and become a “bargain”. Scattering art across other ecommerce platforms also makes it harder to build a solid clientele and stay organized with what pieces are available.

Solution

Amanda needs her own ecommerce site to sell and manage her prints. This will also help build her brand and professional following by adding links to her social media. A one page checkout will reduce cart abandonment. Art pairing and style guides will help buyers envision her products in their homes.

iMacs with design screens

Design Process

design process diagram

Empathize

Survey

A survey helps gain insight to what art lovers want (their shopping habits, frequently used sites, what they expect and need). After screening for users who actually purchase art online, there were 29 survey participants.

1. Where do you find art inspiration?
2. Where do you find new artists?
3. Where do you find if artists release new work?

Data diagram

It is imperative there are multiple links to the artists social media to bring in customers and keep them coming back.

Where do you buy art online?
pie chart

This data reinforces Amanda to have her own website. There also needs to be a deeper dive into Etsy to see why many users prefer them.

What is most important when buying art online?
A diagram of an empathy map

So it turns out size does matter...information for Amanda to ensure her users have options to buy different sized prints. 

How do you like the art categorized when browsing online?
pie chart

The data shows a majority prefer to sort by theme. This will be tested later with a card sort using pieces of Amanda's art. 

How do you shop for art?
pie chart

There is an opportunity to turn browsing into buying. But how? A look at competitors marketing tactics can help.

Competitive Matrix

Etsy proved to be a go to for many users, but what makes them a competitor? Juniper Print Shop (my client said she loved their site) Society 6 and Benjamin Hardman are also part of the competitive analysis.

competitive matrix


Of the competitors, three offer additional resources and “inspiration” for art buying.  Using mockups and displaying art in a frame allows potential art buyers to visualize the art in their homes. It also helps give them a sense of size and proportion. This could convert the 58% of casual browsers into confirmed purchases. 

Example screens from Juniper, Society 6 and Benjamin Hardman


Etsy and Society 6 also allow users to like art for later, giving the casual browser an excuse to come back to the art piece and buy it. 

examples from Esty and Society 6


Each site includes customizable related product selection, reducing the work users exert to find items to purchase. 

related products, things you might like, more from this shop


Competitors are also rated on 7 heuristics of checkout usability. Not a single competitor met all criteria. This leaves room for me to raise the bar, such as a single page checkout which have a lower cart abandonment rate.

competative matrix

Open Card Sort

Information architecture is key to a navigable ecommerce site. If a user can't find it, they can't buy it. A cart sort is crucial to discover how a product falls into users' mental models. Using optimal workshop I conducted an open card sort with 15 participants testing different tasks and Amanda's artwork.

card sort affinity matrix


The darker colors in the similarity matrix indicate potential groupings. I normalized the card categories with affinity maps.

affinity map

Define

Target Audience

Amanda primarily designs for young professionals (20-mid 30’s) looking for unique, curated art. They spend their time traveling, being outdoors and hanging with friends at local breweries and restaurants. They might be moving into their first home and looking to upgrade from the bachelor pad or college dorm to a more refined home with their aesthetic.

cartoon female avatar

Rory
Teacher
29 years old
Denver, CO
Motivations
Bought first home; Rory needs art
Buying unique local products
Hassel free online shopping, doesn't have to leave their house.

Frustrations
Don't know how art will look in their own space
Shopping takes time
cartoon female avatar

Nial
Accountant
25 years old
Boulder, CO
Motivations
Hired in first professional job; wants a living space to match their new stage in life
Loves local, non traditional art

Frustrations
Doesn't know how to home decorate
Buying something that won't look good

Ideate

Site Map

After discovering the labels and categorization of the website, it was time to organize the information in a site map. 
site map

User Flows

User flows focus on user needs and pain points, following certain user stories.

user flows

Wireframe Sketch

I start my prototype with quick sketches to get the general layout and ideas onto a page.

wireframe sketches

Prototype

home screen wireframe 
about page wireframe contact page wireframe sign in wireframe profile wireframe gallery wireframeproduct page wireframe cart wireframe checkout wireframeshop the look wireframe

Test

A/B Testing

There were three different home screen designs. I added place holder images for some context and asked users to choose their favorite. The following percentages refer to 15 participants.
Home screen design version 1different home screen design Home screen design version 231%43%26%

Users preferred the left and middle option for the "simplicity" and visible navigation. The two designs were married together for the best of each. Fidelity and content was added to conduct usability tests.

tablets and mobile screens with Evergreen and Grand designs

Usability Testing

To begin, there were thirteen participants on Maze, and then after iterating three more on Zoom. Participants have to complete general navigation tasks. Problems were made evident with the following features of design.

When asked to find design inspiration and art pairing, the task took entirely too long or was abandoned. This was a cue to make it more accessible. Everything was moved up,   prominent and uniform headings were added and the feature was added to the drop down menu.

home screen wireframe
Before wireframe
After prototype

Participants also clicked around the page a lot, or stared contemplatively at the screen. This indicates they didn't know what to expect. There was no visual feedback on what elements were interactive.  This exemplified the importance of micro interactions and hover states (explained later).
 
Screenshot of a heat map
One participant mentioned a feature from Houzz. The Houzz design (left) features interactive price tags, and as you click them It routes you to the product page. This was incorporated in the Evergreen and Grand design. Users click a tag and an overlay appears.
Screenshot of Houzz feature
Pairing and styling page
Pairing and styling page with hover state
Many also couldn't find the heart to save a product, it was made bigger and visually more available. 
There were some other crucial buttons added to increase user flexibility such as a back button on all screens and a logout button for the account page.

There were also comments on the content  for Amanda. Her name was nowhere on the site! Also users didn't know if the frame was included with purchase.
heart and back button redesign

UI Design

Style Tile

As a professional interior designer and now art entrepreneur, Amanda created her own logo and branding. The art should speak for itself so the font is plain and legible. Originally just black and white, a color was picked from Amanda's artwork and added as a background as many of her pieces are white or cream.
Style tile, fonts, images and color pallet

Responsive Design

multiple screens

It's important to have a responsive design so Amanda's users can check out her art on the go.

mobile wireframe homepagemobile wireframe about page mobile wireframe contact page 
mobile wireframe profile page mobile wireframe gallery mobile wireframe product page mobile wireframe styling and pairing mobile wireframe checkout screen mobile wireframe sign in page mobile wireframe checkout screen

Micro Interactions

Interactions

After observing usability participants and analyzing the heat maps, it is clear participants were confused.  Micro interactions allow users to know what element or feature they are interacting with. Hover states are an effective and easy way to signal an element is interactive.

drop down menu hover state
example of style guide hover overlay
like button hover state
size button hover state

Animations

How do users know they completed a task? Micro animations! Tiny quick animations let users know that they DID click the button, they DID change the size...they DID whatever. If I had more time I would add micro animations to the following:
  • Each product in the Art collection
  • Every CTA and button
  • Tiny underline buttons
  • Each text field would have a hover state or show the blinking cursor
  • Checkout screen feedback (error messages)
  • Radio buttons

Final Thoughts

Conclusion

An eCommerce site is no easy feat, especially for a one-woman team.  No small feature can be overlooked.

desktop with about page

Amanda has a direct link to her followers through social media, to keep them updated on new products and work.

She can display other options the buyer may enjoy. Her site also includes styling guides and art pairing recommendations to help those indecisive buyers or who need direction on how art can be worked into their homes.

desktop with product page screen
desktop with profile screen

Frequent shoppers have the opportunity to create an account. They can save important shipping information, view art they liked and their past purchases.

With a single page check out users don't have to click through multiple pages to get their art, helping with cart abandonment.

desktop with checkout screen
mobile phone with product page

The responsive design lets Amanda's customers shop anywhere, even on the go.

Plans For Development

Although I may not be able to include everything in a prototype, it's important to I make plans and communicate my vision to Amanda and the developer. If I had more time I would:
  • Design micro interactions
  • Design and fill out footer links
  • Encourage Amanda to look at Shopify and other hosting platforms
3 desktop screens with Evergreen and Grand designs

My Other Work