CHALLENGES

PRODUCT EXPERIENCE

One of the best parts of this brand is that the products speak for themselves. Customers have a chance to explore thousands of images, but how do we deliver them so that one might leave a lasting impression more than others?

PRODUCT PAGE, BEFORE

• Hero images tend to be small; we observed on heatmaps that users tediously look through all or most of the thumbnails when there are some - this will take hours if you are going to sift through tons of images

• While the page is short, which tends to be a good thing in e-commerce, it's missing out on opportunities to suggest similar images for customers to browse through to keep people on the site

SOLUTIONS

• We wanted the section above the fold to act as a museum experience; a large, single breathtaking photo with a small blurb underneath to draw people into the image with a story behind the photo

• One of the major focuses on this site was to make it feel like it is not an e-commerce website, so we put all the buying info under the fold but still readily available Added various ways for customers to keep exploring the site including Cross-sells, Related Categories, and links to major collections

New Product Page, Panoramic Images

New Product Page, Portrait Images

CHALLENGES

DISCERNING COLLECTIONS

Mangelsen has a lot to offer - different classes of images in multiple sizes, formats, and finishes - some 10,000+ SKUs. Designing a product page that accommodates the various types of products while finding a way to celebrate their breathtaking images was the biggest challenge, UX-wise. We strategized quite a bit on how to best educate their non-art fluent customers on how to communicate the different image categories and how best to present them.

• Hard to discern which collection the image belongs to; the category name and product name have the same hierarchy

• Buying info is hard to find; no clear CTA and the copy indicating how to buy this collection gets lost in a sea of text

• Section to educate the user about the differences between collections/what is special about this particular collection also gets lost; it deserves more of a highlight

SOLUTIONS

PRODUCT LABELING, AFTER

• Visual cues to inform users of which collection the image belongs to:

1. Collection label

2. Differentiate the main product image background from all other collections to give it a premium feel

CHALLENGES

ASSUME NO ONE KNOWS ANYTHING

We all get sucked into our own little bubble and throw around jargon and expect people to get on the same level as us. As it happens, in the art world, there's a lot of jargon and people get confused, or worse, don't ask questions because they feel embarrassed.
These moments contribute to the loss of customers so there's a lot that needs to happen to avoid confusion; one of them being very clear about what options are being offered.

FORM INTERACTION, BEFORE

• Dropdowns were hidden so it was hard to see what size options are available at a glance 

• The grey section below the hero image area shows the various options available, but no one was scrolling far down enough to engage with this are to educate themselves of the different finishes 

• When users did engage with this area, it was a PDF that they read through and the images that showed a representation of the product to be, didn't get updated with the current product selection

• The product selection became interactive so that users can get a preview of what the final product will look like based on their selections

• Sizes and options are laid out at a glance with supportive text when selections are made for an educational and informative moment

THE FUN!

TELLING A COMPELLING STORY

Telling the right story of Mangelsen's career that needs no introduction is no easy feat. What it meant is showcasing milestone timelines, leaving enough room to breathe between each section, and making sure to highlight his celebrated images and approach to his art.

• The huge block - page, rather -of text makes it hard to be engaged; a perfect candidate for TL;DR syndrome
  

• We saw plenty of people navigating to this page so we wanted to make sure the page lived up to people's expectations to get them emotionally involved with the brand
  

• Doesn't necessarily show the artist's character

• We wanted to give it a little more love than what looks like a blog post page with more imagery and hierarchy of information

SOLUTIONS

• Information is much easier to take in because there's a lot of white space and hierarchy

• Furthermore, we combined contents from 4 or so other pages that we all scattered onto this page so that users aren't having to navigate to multiple pages to get to know the artist

• We reinforced Mangelsen's brand by bringing in the imagery of him and his work on one page
  

BRANDING

KEEP IT FRESH, MODERN, AND A LITTLE CLASSIC

The colors are rich and warm, complementing any color tone of the various images offered. Fonts bring the classic with the bold serif, while open sans keep things fresh and modern.

Noto Serif Regular

Quotes

Headers

Titles

TOOLS

SKETCH
INVISION
GOOGLE ANALYTICS
LUCKY ORANGE
PEN & PAPER

SEE MORE WORK