Frame Studio
Art.com
Usability Research | UX Design | Visual Design
Project Overview
Art.com has a warehouse in Ohio where they print and custom hand-frame artwork on demand to specs chosen by customers. Customers have 250+ frames, 100+ mats, and six glass and paper types to choose from in addition to other product types like canvas prints and wood mounted prints.
The page had been recently redesigned by another designer during a site-wide re-platforming project that moved the code base to React. The initial redesign was doing well with conversion, but customers were not framing their prints. I was tasked with getting to the bottom of why and coming up with a solution to fix the framing problem.
Over the course of this project I worked with 4 different PMs, the merchandising team and a team of 10 engineers.
Tracked Metrics
Conversion (+23% YoY)
Average Order Value (+10% in AB
Service Rate (8.1% lift in AB Test)
Add to Cart
Qualitative Feedback
Customer Service Call Reduction
Existing Design
Research
I ran some usability tests on usertesting.com asking people to pick 3 pieces of art and frame them for their home with minimal guidance and captured the main sticking points.
Usability Findings: Desktop
Users didn't know what service buckets were and the images used to showcase them were confusing, resulting in a lack of clicks.
The pricing on the service buckets was vague this far up in the funnel eroding trust and also reducing clicks.
Framing options were below the fold so many users didn't even know they were available.
Usability Findings: Mobile
There were no breadcrumbs letting the user know how many steps there were before completing the task. Because of this, many users reported feeling lost in usability testing.
There was no way to filter down framing options based on things like material, thickness, color, etc so users were spending a lot of time scrolling through options.
Users demonstrated frustration and confusion with the lack of ability to easily find important details like size or materials.
Scroll Map on PDP
Click Map on PDP
Click Map on Mat Selection Page
Most customers weren't aware we had framing options as the majority of customers weren't scrolling past the fold before bouncing or hitting Add to Cart.
Most customers were comfortable playing with size and paper options next to the artwork but didn't engage with the framing options below. The highest clicked item below the fold was "customize" that unlocked hundreds more framing options and brought the user to a new page.
The second-to-last page of the framing experience where users could add or edit mats was described by most during usability testing as fun because of all of the colors and easy to play with options. It was highly engaged with and our highest converting screen in the experience. .
Step 2: Wirerames
I outlined several options for a more progressive disclosure of framing options that were above the fold. I prototype tested these as well and worked with the merchandising team to brainstorm the smartest way to showcase a list of frame recommendations to help guide users.
Option 1: All Options on the PDP
Option 2:
Recommended frames on PDP with a separate frame studio
Step 3: Final Design
We chose to go with option two. In user testing many users used the word "overwhelming" to describe our site, so we wanted to hide the majority of options behind a click and provide a small sample of recommended options with each frame. This progressive disclosure allowed for a 23% increase in conversion, 10% increase in AOV and an 8.1% increase in Service Rate. 13% of users wound up using the frame studio, of which 87% framed their prints.
I built out these mocks and all of the essential components using atomic design principles and started a true UI kit for the design team to use moving forward for a more cohesive feeling experience.
PDP with recommended Frames
Frame Studio
Updates
- Less important inputs like paper type were removed from the PDP and placed in the Frame Studio to make room for framing options
- The 11 Grab & Go items hand-curated by the merchandising team were reduced to chiclets with close ups of the frame corners and placed next to the artwork. A hover state on desktop shows more info about the frames.
- All important information about the piece is put inside of one of three easy-to-find tabs on desktop and accordions on mobile.
- The customize button is moved top of fold, which opens up a single page work space for users to play in.
