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.
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.
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.
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.
"Frame buyers need to find the right frame style because they want something that matches their photo and taste."
If we allow users to customize their frame while looking at their photo, users will feel more powered to choose the right frame.
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:
Simplify builder page: compile and review content hierarchy. Popular Features: similar frames, product photos, checkout button.
Change homepage button copy to express the next pages better.
Simplify interaction on the Shop page. Having two buttons per product (“View details” and “Upload Photo”) wasn’t clear.
Make “Order” button clear on shopping cart and builder page.
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.
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