Scroll

E-commerce redesign that led to > 100% conversation rate increase

Frameology is an angel backed startup in NYC and their e-commerce is dedicated to printing and framing photos. We had data that was indicating some user experiences issues and I led the research and redesign of the website to improve them.

Interviews

4 users. Ages 28-40. 2 Women / 2 Men

Shared Point of Frustration

Frame buyers were concerned about how their photo would look in the frame, and if it would match their room decor.

Key Findings

  • 2 main intents: give a framed photo as a gift or frame something for home.

  • Willing to pay up to $50 to decorate their home vs. $60+ when giving a gift.

  • Modern styles and warm colors were preferred.

  • Users wanted to be inspired with great product photos, user generated content from other customers of their purchases, and popular product options.

  • Product reviews from customers were important for demonstrating quality.

  • Wanted recommendations and customer support when buying online.

Affinity Mapping

Main Group: “Frame and photo customization”

Users cared about visualizing their photo in a frame. Then, they wanted to try other frames or photos until they found the right fit. Recommendations for styling their frame and photo.

Persona
Problem Statement

"Frame buyers need to find the right frame style because they want something that matches their photo and taste."

Hypothesis

If we allow users to customize their frame while looking at their photo, users will feel more powered to choose the right frame.

Solution

We believed that by allowing users to upload a photo on the homepage and browse for frames with their photo already uploaded and positioned in the frame, Frameology would help frame buyers to find frames that fit their photo and personal style. We would know this to be true when the number of purchases per uploaded photos increases compared to the previous website design.

User Journey 1: Upload photo > Browse frames

User Journey 2: Browse Frames > Upload Photos

1st Usability Test

Overall, people understood the website flow and had a positive impression, but we needed to reduce the content and clarify copy. Recommendations:

  1. Simplify builder page: compile and review content hierarchy. Popular Features: similar frames, product photos, checkout button.

  2. Change homepage button copy to express the next pages better.

  3. Simplify interaction on the Shop page. Having two buttons per product (“View details” and “Upload Photo”) wasn’t clear.

  4. Make “Order” button clear on shopping cart and builder page.

Challenges

The main challenge was to simplify the web application on the Builder Page (page that shows photo in a frame) and keep browsing and customization features above the fold. It was important to have those features at the top of the page because users weren’t seeing below-the-fold content on the current website. Also, it was important for users to see similar frames, return to previous products, change frame size and photo. On the other hand, showing many features was overwhelming.

Improvements

In the shop page, it was added a filter to sort by most popular, new arrivals, style, size, format, and price on the shop page. In the builder page, customization features (e.i. add mat, change colors, zoom in/out, etc) and a recommendation component were added for faster frame and photo changes.

2nd Usability Test

What went well (+ Column)        

  • Users liked 2 buttons on homepage

  • Positive about “change frame” color 

  • Checkout details were clear 

  • Many clicked on similar frames

  • Filter tool was recognizable

  • Positive about “add mat” tool

  • People clicked on “detailed photos of frames”

What to improve (∆ Column):

  • Frame sizes looked the same

  • Too much copy on shop page

  • “Choose frame size” looks like a diagram

  • Need product details before Builder

  • Clarify what “Mat” means

  • Clarify “Save” feature