Pardon me while the page is loading...

ART4U
Case Study

An online shopping experience designed for previously untapped consumer markets, so everyone can buy framed art to express their tastes at home or anywhere.

Overview

My new Art Store app lets users buy framed art prints, posters and photos. Art galleries were traditionally where people bought art. The culture of galleries and their websites was exclusive, even snobbish. Beginner art buyers will find this store to be an attractive option.

The Problem

The average online consumer doesn’t know how best to buy framed art. Neither do they know what they should expect to pay.

TIMELINE: 6 Weeks / NOV 2021 - JAN 2022
ORG: Coursera/Google
ROLE(S): Project Lead

DESIGN TOOLKIT:
Adobe XD
Figma
Adobe Photoshop
Google Optimize
Google Sheets
Google Forms

The Challenge

My challenge is to design an online store that provides access to art products the average consumer might like to own and that are affordable to a broad range of consumers. That's quite a challenge in itself, but only half of the greater challenge. Then I must break from the usual patterns and design something that turns the novice consumer into a first-time buyer.

User Research

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. Consistent with my assumptions, the primary user group identified through research was average online consumers who are not themselves artists nor have advanced knowledge of art decorating.

This research confirmed that all participants had a desire to purchase art prints or posters, but did not know how best to go about it. The research also revealed some pain points when navigating the app. Some users identified ways in which to make the design more intuitive and how to connect users with products they might like more quickly.

Personas

I developed the following two personas as an amalgamation of the targeted users and actual research participants.

Alvaro PersonaHelen Persona

Storyboards

Based on the most common user goals, storyboards were created to begin ideation of a solution. Here's an example...

Carla's Goals

Early Storyboard

Paper Wireframes

I made sure to, before the digital wireframes & mockups make revisions to the paper wireframes based on the research findings. The result was a set of final paper wireframes that matched the high-fidelity prototype almost exactly.

Paper Wireframes

Digital Wireframes

Note how closely the paper wireframes above match the digital equivalent below.

Paper Wireframes

Mapping the user journeys enforced many of my assumptions about the average person’s perceptions of buying art & framed art.

Mockups

It has been a constant challenge to design the shopping experience to be both intuitive & provide accurate product images. All attempts to best display a product image will always be an approximation, especially where color is concerned.

Early Mockup

The studies showed that, although the prominent framing suggestions was good, a prominent “FRAMEIT!” button made more sense.

Early Mockup

An unexpected result of the usability study was that, users thought stacking product thumbnails in offset columns made it hard to envision the actual product size. The solution was to confine all thumbnails within a set area & present them in even rows.

Final Mockup

The studies showed that, although the prominent framing suggestions was good, a prominent “FRAMEIT!” button made more sense.

Prototype Example

An unexpected result of the usability study was that, users thought stacking product thumbnails in offset columns made it hard to envision the actual product size. The solution was to confine all thumbnails within a set area & present them in even rows.

Low-fidelity Prototype

Using a partial set of digital wireframes, I created a low-fidelity prototype. The primary user flow I plotted included accessing user information, browsing products by color & adding a framed product to the cart. With this I was able to complete a useable prototype that was used in a usability study.

Final Mockup

Useability Study

Introduction
  • Title: Usability of Online Art Store App
  • Author: Peter Klein - Student - peter@xxxxxxxx.com
  • Stakeholders:
  • Stakeholder 1 - Position 1
  • Stakeholder 2 - Position 2
  • Stakeholder 3 - Position 3
  • Stakeholder 4 - Position 4
  • Date: 10/16/2022
  • Project background
  • We’re creating a new Art Store app, in which users can buy framed art prints, posters & photos. Traditionally, art galleries were where you went to buy art. The culture of galleries and their websites was exclusive or even snobbish. This store is designed to attract novice art buyers at lower price points. Most recently, a high-fidelity prototype has been created for usability testing.
  • Research goals
  • Determine if the design will lead to purchases from these novice art buyers.
  • Determine the overall design usability.
Research
Questions
  • What are the questions your research is trying to answer?
  • Does the design educate the user about product affordability quickly?
  • Does the design lead the user to art they like easily?
  • Does the design encourage the user to purchase products framed?
  • Does the design inspire the purchase of multiple products?
  • Does the design provide too much or too little art education?
  • Is any part of the design confusing?
  • Does the user have any feature suggestions?
Key
Performance
Indicators
(KPIs)
  • KPI #1 - System Usability Scale
  • KPI #2 - User Error Rates
  • KPI #3 - Conversion Rate
Methodology
  • Part Moderated, Part Independent usability study.
  • An online survey participant service will be utilized to build our body of survey participants.
  • Participants will be compensated indirectly by the service through which they will be acquired.
  • A screener survey will be used to ensure the participants meet the desired characteristics and agree to be recorded.
  • Study will be conducted online in 2 phases. The first phase will be a two-way video conference in which questions will be asked and discussion will take place. The second will be completion of an assigned task & completion of an online questionnaire.
  • Stakeholder #1 will conduct all video conferences with participants.
  • 8 has been determined to be a sufficient number of participants for the study. 10 will be selected to account for cancellations and no-shows.
Participants
  • Participants must…
  • …have ordered items online previously.
  • …are not themselves artists & have no advanced knowledge of the arts.
  • …be between 30 and 70 years old.
  • Physical and mental abilities of participants will be collected, but not used in the selection process.
  • Characteristics like gender, socio-economic status will be collected, but not used in the selection process.
Script
PHASE 1: Video Conference Q&A (Moderated)
  • Welcome the participant.
  • Thank the participant for taking part in the study.
  • Confirm that the participant agrees to be recorded.
  • Confirm participant’s answers on screener survey.
  • Are you differently abled, either physically or psychologically?
  • Inform the participant of the 2 phases of the study.
  • Do you have any questions before we begin?
  • Advise the participant they are not being tested, & to just be themselves.
  • Do you have a favorite artist, and if so, whom?
  • Do you have a favorite style or medium of art?
  • How interested are you in ready-to-hang art prints or posters?
PHASE 2: Participant Completes Task & Questionnaire (Independent)
  • Assigned Task:
  • Freely browse the app and make a purchase of 1 or more art prints or posters, but one must be framed. This includes checking out and receiving confirmation. They will be provided with dummy CC information.
  • Questionnaire:
  • Participants will score the following statements by selecting one of five responses that range from “Strongly Disagree” to “Strongly Agree.”
  • I found the pricing of items to be expensive.
  • There was too much information about art & related matters.
  • There wasn’t enough information about art & related matters.
  • I found the art framing feature easy to use.
  • I found the art framing feature difficult to use.
  • I think the app design encourages buying more than 1 item.
  • I think the app design encourages buying items framed.
  • I found the app confusing.
  • I was unable to figure out how to use some features.
  • Open-Ended Question: Is there any feature the app didn’t have that you think should be added?
Schedule
  • Recruitment starts: Nov 20
  • Study dates: Nov 26-27
  • Results available: Dec 10

Usability Studies: Findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Round One Findings

Users wanted a wider selection of products
Users wanted a wider selection of 2 framing options
Users wanted features requiring registration

Round Two Findings

Users found it difficult to access the user information screen
Some users found the “framer” tool difficult to use or non-intuitive

User Pain Points

The user research revealed pain points in the app design itself. But more critically, pain points were identified in both user perceptions and user experience in the greater marketplace that helped guide the overall app concept.

1
2
3
Cost

Art prints, especially when framed are thought to be cost prohibitive

Availability

It is not known where to go or how to purchase framed art prints & posters

Complexity

Online art catalogs &framing tools are overly complex and hard to navigate

The Design

The design of the resulting hi-fidelity mock ups and prototype is shaping up nicely. I think it's likely that the complete web and mobile app would perform what I set out to achieve.

Hi-Fidelity Prototypes