ART PREVIEW
Preview art on your walls using your phone's camera and AR (augmented reality).​
​
THE PROBLEM
It's often hard for art buyers to picture how art will look on a wall until its actually hung there.
​
So I conceptualized an app that would allow people to preview art using their iPhone.
Let's Stop Photoshopping Art Onto the Wall...
​
Over many years of producing oil and pastel paintings, I've sent hundreds of digital images of my work to prospective art buyers.
This was part of following up with them after they'd seen one or more of my works at an art show.
In emails, I would offer to Photoshop my painting(s) onto their wall (above). Enthusiasts often took me up on that, and many found it pivotal to their buying decision.
​
This led me to think up a web app (back in 2011) that would make this previewing process easy for art buyers and less manual for artists.
​
Then, in mid-2017, Apple's did something...
...with its release of ARKit for iOS developers, the power of augmented reality was headed for the masses.
​
This prompted me to revisit my old idea and bring it into the smart- phone era.
HIGH LEVEL TIMELINE
6 weeks.​
(June - July, 2018)
MAKEUP OF THE TEAM
-
Researcher/UX/UI Designer
-
Project Owner/ Mentor
KEY GOAL
Research, design and test a mobile app that can preview art with AR.
Which will they choose?
Art fans and interior decorators want to preview what art looks like on their walls.
Often they're making a choice between two or more pieces.
MY ROLE
I performed all research, user experience and user interface design for the project.
RESEARCH
-
Competitive Analysis
-
Survey
INFORMATION ARCH.
-
Initial Screen Ideation
-
Application Map
INTERACTION DESIGN
-
Task and User Flows
-
Mid-Fi Prototype
UI DESIGN
-
Style Tiles / UI Kit / Branding
-
High-Fi Prototype
TESTING & ITERATION
-
Facilitated, In-person User Test
-
Post-test Iteration
TEAM
-
Researcher/UX/UI Designer
-
Project Manager/Mentor
UNDERSTANDING THE USER
It's for art enthusiasts, decorators, galleries and artists who want to make art shopping and purchases more efficient and joyful.
Anyone involved in the art world... with a desire to "see it in the space"... would benefit from using Art Preview.
Angel, Collector
I want to play around with where I'd put different pieces, at my own pace, without feeling pressure to purchase.
Shannon, Decorator
I would love to be able to create different collections of possible pieces... then try them all out for comparison, one after the other.
Phillip, Painter
I want a place to upload my paintings; where people can see what they'll look like on their wall, and be able to purchase right from the site.
SCOPE & CONSTRAINTS
Time bandwidth was the largest constraint, given all of the individual activities I needed to complete.
Still, there wasn't time to design everything.​
​
These major capabilities would be required for a full-fledged app, but were left out:
​
-
checkout/cart
-
database uploads/management
-
user accounts/dashboards
BREAKING DOWN MAJOR PROCESSES
Competitive Analysis ⇀ Art Buyer Survey ⇀ Initial Ideation ⇀ Application Map ⇀ Task & User Flows ⇀ Mid-Fi Prototype ⇀ UI Design ⇀ High-Fi Prototype ⇀ Testing & Iteration
Competitive Analysis
I researched 4 companies that were early adopters of AR technology, to learn about what they were doing, how they delivered AR... and what they might be missing.
Who's Already Doing AR?
​
I began with competitive analysis to see who was already using Augmented Reality ("AR") technology in their mobile art shopping apps... and how it was being done.
Art.com, Pixels.com, Amazon and Houzz.com were all incorporating AR capabilities.
​
I identified strengths and weaknesses in each of them (as detailed below). A summary of my findings there would help guide my mindset going forward.
The "Lineup": Simulating an Art "Home Show"
​
In my research, I didn’t find any app using the concept of a ‘queue’ — a place where you could save multiple artworks in a group or "lineup", then preview and compare them one by one in sequence.
Art Preview, then, would have one. Why? Because this "Lineup" would simulate the "home show" experience where an artist takes multiple paintings to a collector’s home, and then manually holds each of them up against the wall to find out which fits best.
Art Buyer Survey
A survey of art buyers indicated that they'd use an app like this to help them shop for art.
35 Art Buyers Say...
​
I surveyed 35 of my own original art buyers to find out how they might appreciate or use such an app.
​
Specifically, I wanted to find out:
​
-
if they had bought art online, and how those experiences panned out.
-
what they thought of the idea of 'previewing art on their walls'.
-
if they'd ever asked an artist to superimpose a piece of art on a wall.
​​
Here were the results:
had bought art online...
(but it was usually for less expensive prints or reproductions)
had asked to have art superimposed on a wall for them.
said it would be useful to preview art on a wall
with a mobile app.
Initial Ideation
Along with the Home screen, ideating the concept of the "Art Lineup" would help guide the visual design and overall experience.
Sketching 2 Main Screens
​
I began ideation by creating variations of two major screens: Home and "Lineup".
Because I wanted the Lineup feature, ideating the Lineup screen here would help me set the tone for the app.
​
Shown below, 3 variations of the Home and Lineup screens:
1
2
3
Application Map
A Map confirmed that I needed to take extra care with Information Architecture and Interaction Design to keep navigation through the app clear, relevant and intuitive.
After outlining a rough application map on paper, I used Sketch to design one at higher fidelity and detail.
​
Some of the more important screens are shown below:
Application Map (detail)
​
-
User selects a category of art to browse.
-
A piece of art is selected.
-
Selects "Live Preview".
-
AR Setup Screens 1-3: Follow 3 simple camera calibration steps to get to...
-
The AR Viewing Screen. From here, the artwork can be added to favorites, a "Lineup" or a cart.
-
Chose "Add to Lineup" on previous screen.
-
User may add it to one or more Lineups, and create/delete Lineups.
1
2
3
4
6
7
5
TITLE OF THE CALLOUT BLOCK
Task & User Flows
The flows, along with the competitive analysis helped me carefully analyze the physical steps a user has to take — moving around a room — to "calibrate" a space for AR.
Just One Good AR Experience... and You "Get It"
​
The first time you calibrate a room for augmented reality, and then see it happen on your screen, you instantly "get it".
​
How do we turn first time users into confident, consistent AR-wielding art shoppers? I mapped out task and user flows to start hashing that out.
​
Below, an "ideal pathway" task flow:
The user flow below maps out the major paths a user might take inside the app.
Mid-Fi Prototype
During the mid-fi prototype work, I realized we wanted users to take 1 or more of 5 actions.
The 5 desired actions are:
-
Browse for art
-
View art in a live AR preview
-
Add art to a Lineup
-
Add art to cart
-
Add art to favorites
​
Some combination of them should always be within easy reach, depending on context... so they make up the main buttons at the bottom of most screens.
Mid-Fi Prototype (detail of 6 screens)
​
How to select an artwork, preview it, then:
​
-
add it to an existing lineup
​​
-
create a new lineup
IxD Findings: Seeing Usage Patterns
​
Mapping out task and user flows allowed me to see patterns emerge in the different ways a user could move through the app. That led to a clearer interaction choices in the mid-fi wireframes.
The mid-fi screens helped solidify user goals and provided a solid framework for the UI work ahead.
UI Design
Guiding UI Principle: an art app should bring attention to the art... not itself!
In the Art World, a Neutral Background Is the Key
​
...to avoiding clashes with any color that happens to occur within any of the artworks themselves.
So you'll see white, grey or black or otherwise neutral walls in most galleries and museums... they want you noticing the artwork, not the surrounding architecture and interior design!
So, the app's color scheme would be minimal and understated, just like the walls of an art gallery.
​
This principal guided style tile explorations:
In the UI Kit below, I was guided by adjectives from the rightmost tile: 'flat', 'subtle', 'warm' and 'clean' as guiding sensibilities. Those words described the inviting place I wanted to create.
The scope of this project included UX/UI as well as branding and identity design. After some initial pencil sketching, I refined wordmark/logo ideas in Sketch:
The logo pays homage to the viewfinder in an SLR camera, combined with Art Preview’s initials:
High-Fi Prototype
After seeing the confluence of elements in full color and proximity? Refinements needed.
I initially thought a dark background would work best for the app, but the UI tasks led me to a lighter, cleaner-feeling background.
​
When all the elements came together in color, spatial adjustments were made. To preserve space, I replaced text on buttons with icons.
1
2
3
4
5
6
High-Fidelity Prototype (detail)
​
-
User chooses to preview a piece.
-
After going through AR setup steps, user is shown AR preview.
-
Selected "Add to Lineup".
-
Chose the "Entry way - East Wall" Lineup and saved it to the selected Lineup.
-
Any of these 4 artworks in the Lineup can be shown on the wall by tapping on them.
-
During high-fidelity work, icons replaced text for major buttons... there just wasn't room.
Testing & Iteration
With a test plan and a workable InVision prototype, I facilitated in-person testing and recorded the sessions.
How Easily Could They Go From Art Selection To Art in the Cart?​
​
With high fidelity prototype completed, I created a test plan, then uploaded a workable prototype to InVision for user testing.
​
I facilitated in-person testing using InVision on the iPhone. I recorded the test subjects working through the test tasks with the camera on my laptop.
​
Test tasks focused on this sequence of questions:
Search
Could they navigate to a subject category (ie "landscapes") ?
​
Select
Could they select an artwork from the category?
​
​
Preview
Could they set up and view their selection in the AR Preview?
​
Save
Could they save an artwork to a Lineup?
​
​
Choose
Could they review the artworks in their Lineup, and add one to the cart?
Pain Points and Iteration
​
While four of my five test subjects had a 'fairly intuitive go' with the test, it revealed some common user pain points.
​
The test revealed that some of the icons I initially used weren’t prominent enough or recognizable enough to be intuitive.
​
Specifically, with the "Add to Lineup" and "Live Preview" icons, I needed to make these tools more obvious in the onboarding screens.
Testing & Iteration
How easily could they go from art selection to art in the cart? Would they "get" the AR?​
Facilitating in-person testing with 4 subjects using an InVision prototype
​
I created a test plan, then uploaded a workable prototype to InVision for user testing.
​
I facilitated in-person testing with four volunteers, with the prototype on the iPhone. I recorded them working through the test tasks with the camera on my laptop.
​
Test tasks focused on this sequence of questions:
Search
Could they navigate to a subject category (ie "landscapes") ?
​
Select
Could they select an artwork from the category?
​
​
Preview
Could they set up and view their selection in the AR Preview?
​
Save
Could they save an artwork to a Lineup?
​
​
Choose
Could they review the artworks in their Lineup, and add one to the cart?
Pain Points and Iteration
​
While 4 of 5 test subjects had a 'fairly intuitive go', the test revealed some common user pain points.
​
Some of the icons I initially used weren’t prominent enough or recognizable enough to be intuitive.
​
Specifically, with the "Add to Lineup" and "Live Preview" icons, I needed to make these tools more obvious in the onboarding screens...
Before and After: Onboarding Screen Improvements
Post-test changes:
-
removing the Art Preview logo for more vertical space.
-
increasing the iPhone image size (and the hand) — to make the icons being discussed more visible.
-
moving the "Next" button and progress indicators down for more space + updating button style to something bolder and flat.
-
improving and reducing the copy on the screens.
Additional Changes From Testing​
​
Improvements to navigation came as a result of testing:
-
changing the "Live Preview" icon to a camera (from something less recognizable).
-
moving the "Live Preview" icon to the more prominent leftmost spot on the bottom nav bar.
-
increasing the height of the bottom nav bar.
-
changing the "View Lineup" text links on the Lineups List screen to buttons - which are larger and more prominent.
​
Facilitated in-person user testing at a local cafe.​
OUTCOMES & LESSONS
This project sharpened my understanding of, and capacity for, mobile design.
Challenges Honed Instincts
I experienced challenges designing for the smaller mobile scale.
It would give me better instincts... earlier on in my design process... next time around.
Better at Testing
My comfort level with facilitating in-person testing grew substantially.
​
I improved at not "leading" the test subject as much, not jumping in too early to 'rescue' them and got better at asking questions.
Enough to Spark a Beta?
I took this concept far enough that I might still try to develop the project in beta.
​
I became a believer in the power of AR... seeing really is believing!
