The Art Institute of Chicago E-Commerce Website
A General Assembly UXDI Challenge
#Ecommerce #UX #Wireframes
Challenge: Redesign a e-commerce website for a local museum
Timeframe: 2 weeks
Background
To gain familiarity both with e-commerce sites, contextual research, user testing, and the software Sketch, our class at General Assembly UXDI was tasked with doing a redesign of a museum store website. The end-goal was to have a medium-fidelity prototype of a website after two weeks. I was really excited, feeling that I could bring some insight to the project with my background in museums. But I also knew I had to be careful- familiarity can breed blindness.
So to stretch myself I picked an art museum instead of a science museum- the Art Institute of Chicago to be exact. Voted best museum in the world by Trip Advisor in 2014, it’s an impressive institution close to my heart, and it deserves a store website to match.
Unfortunately. . . it currently doesn’t have one.
Audit
Quotes from user testing the current store.
The current site is cluttered, feels like a relic from the early 2000s, and doesn’t showcase items in a way that makes them seem enticing, luxurious, or even special. Which is a problem when what is being sold is - by definition- a luxury.
Research
Contextual Interviews & Observations
To learn more about the shopping habits of museum store goers, I observed and interviewed customers and staff in the Contemporary Store and Flagship Store. My goal was to watch and map shopping behaviors, talk directly to customers, and meet with the folks who knew these shoppers best: the museum store staff.
Birds eye-view sketches of dwell times. A 60 year old man moving from t-shirts to exhibit guides to jewelry to general art books. The takeaway? People aren’t going in with an idea of what they want- they are waiting for something to appeal to them.
After interviewing the sales staff and shoppers, I had a few takeaways:
Customers were completely unaware that there was an online store. Additionally, many were unaware that there was another store around the corner.
Postcards were the biggest purchase in-store. Online, staff informed me that customers bought the larger, fragile items that are hard to carry out of the store.
Roughly 50% of those making purchases in-store are members, many of whom drop-in to shop.
The stores are set up to tell a narrative tying back to the museum exhibits.
Browsing behaviors indicates that are browsing more than intentionally shopping.
1:1 Interviews
To get a deeper understanding of the emotions around the museum, I interviewed three people: two in an informal environment and on online through Skype. One was a lapsed Art Institute Member and older retiree, one an Art Institute student and active museum goer and one an out-of-town tourist who had recently visited Chicago.
An Art Institute student in her studio.
“The store reflects the place, and it’s a place of one-of-a-kind things.”
“Having things close to you that are beautiful- there’s value in that. And there are a lot of beautiful things in the museum and shop.”
“The museum is a collection of time shown through art.”
“As I’m looking [at online store items] I’m just fantasizing about having a nice home that would have nice things in it.”
Consumer Research
I looked for some consumer research, and came across a concept of "multichannel shopping."
Multichannel shopping, according to PricewaterhousCoopers* is a couple of different activities:
- Choosing the correct channel to fit a purpose, i.e. shopping online to due to time constraints, or clothing shopping in-store to confirm the best fit of an item.
- Buying goods from the same retailer, but doing it across more than one channel, i.e. researching a product online before picking it up in-store.
- Using a number of different channels to make a purchase. “73% of US respondents report that they research online when buying clothing, footwear, toys, and health and beauty products (vs. 60% globally). In other words, online research doesn‘t just lead to online purchases, it‘s also critical in leading to purchases through other channels and in driving traffic to physical brick and mortar outlets.” (4).
So how to make a convenient website that took into account the museum image, the brick and mortar store, and multichannel shoppers?
*McPartlin, Sue and Lisa Feigin Dugal. Understanding How U.S. Shoppers Are Reshaping The Retail Experience. PricewaterhouseCoopers LLP, 2012. Web. 20 Nov. 2016.
Insights & Design Directions
Design Principles
1. Stay true to and uplift the brand
2. Communicate art through the everyday, high-quality design and beauty within reach. Help visitors envision themselves surrounded by museum quality art.
3. Break the silos and build bridges. Unify the brand and the user experience through the website supporting in-store shopping and the museum experience, making the store more accessible for repeat visitors.
INSIGHTS
1. The museum brand garners trust and loyalty.
2. Purchases through the museum store and online are seen as an extension of the museum.
3. Shopping in the store and online are currently silo-ed experiences for users, and do not support a multichannel retail approach.
Sketches and Ideation
Design Principle 1: Stay True to and Uplift the brand
Bring the look of the main Art Institute page to the online museum store. In my sketches and initial wireframes I pulled the header and color palette of the museum main page, and mimicked the side panel navigation and general layout for branding purposes. This was designed for easy navigation back to the main museum site.
Sketches with the top navigation mimicking the Art Institute main website.
Design Principle 2: COMMUNICATE ART THROUGH THE EVERYDAY
DESIGN SOLUTION: USE IMMERSIVE PHOTOGRAPHS ON MOST PAGES TO STEER USERS TO COLLECTIONS.
These immersive photos would be images of items in a home setting, to help the user imagine living surrounded by museum quality art. Ex: an image of a tasteful living room filled with prairie style art and decor.
Additionally, verbiage should underscore the value of the items. Ex: “Unwrap a masterpiece. Shop gifts”
Design Principle 3: BREAK THE SILOS AND BUILD BRIDGES.
Determining the silos, and how they connect to the store.
To examine how multichannel shopping could work, I first determined what silos existed, and then sketched two user journeys to see how these could ideally be navigated.
Design Solution: make online items findable and reservable in-store.
- This would allow shoppers to reserve and purchase exhibit guidebooks (featured prominently on the homepage) before entering the exhibits, thereby supporting their museum experience.
- It would allow for speedy online research and in-store pickup for the museum member and/or native Chicagoans who would much rather spend their money on an exhibit ticket instead of shipping fees.
- Additionally, users could save items to favorites as a means of tracking what they would like to purchase in-store.
User Testing
Positive feedback:
- Immersive imagery and wording had a very positive response
- Users responded well to how the site matched the main website in feel and navigation.
- Users responded that most navigation was very intuitive (exception noted below).
- In store pick-up had a very positive response.
Workable Problems
- In incorporating the main museum navigation bar into the design, it became too easy to unintentionally click out of the shopping experience and be in the museum webpage.
- Navigation based on what the user might be trying to accomplish — “Wear” would take the user to apparel, “Eat” to tea sets, mugs, and platters for entertaining — quickly became apparent as vague and confusing language.
First Iteration
Second Iteration
Inventory navigation on the left was too obscure, and was resorted to a clearer navigation on the right. Additionally, navigation back to the main museum page was brought from the top menu to a category on the left navigation. This allowed for more intentional navigation away from the store page on the right, while still maintaining the color palate and layout of the main museum website.
Final Wireframes and Information Architecture
The final prototype was updated with the following:
- Clarified categories for shopping
- Cleaner menu navigation, keeping the user from accidentally leaving the shopping experience.
- A flatter design, with every page giving the user is one click from a purchasable item.
- Categories to facilitate both casual and directed browsing.