Case Study: Clickable Prototyping


About 1.5 million people annually visit the Art Institute of Chicago Museum. People from all over the world come to see exhibits and diverse art pieces and afterward also pay a visit to the museums gift shop.

I was tasked with identifying problem areas within the gift shops online website. To do this I went on the website and the first thing that I noticed was that it was overdue for a huge updated redesign. However, Aside from that I wanted to identify the problem areas from customers who frequent the museum gift shop as well as the website.

Research Methods

Going into the store I wanted to learn why people shop in-store versus online. Along with that, I wanted to know what kind of people shop in the store whether it were art appreciators or someone coming in just for gift. I also wanted to speak with some of the sales associates to find out when the store was added busiest and why traffic maybe hight at those particular times.

While in the gift store I spoke too many customers from all over the country many of them from the Chicagoland area. However two customers that I spoke with gave me detailed insight into their experiences in store and on the web.

I highlighted these two scenarios because these were two that I heard a lot in my interviews with customers. With that I created a story board around these two scenarios to better visualize my data.


From my research I drew two insights:

  1. The warm atmosphere of the museum shop coupled with its simplistic navigation, allows customers to browse easily and promotes an enjoyable shopping experience.
  2. The unorganized website does not provide a great experience for customers, which results in them coming into the brick-n-mortar stores to purchase.


Now that I have conducted research and have my insights, my Business goals consist of a few things:

  1. Adding a section to the online website that allows customers to browse leisurely and areas in areas of interest while being able to add items to their cart, that's resulting in additional sales.
  2. Reorganizing the website and away that will be more visually pleasing and provide a better shopping experience thus resulting in additional sales.

Design Strategy

Prior to coming up with the design strategy I created the sitemap for the website where I recategorized the navigation its sub categories. To do this, I did some card sorting, and came up with the final navigation here.

While thinking about my design strategy I found that, the online store should allow customers to feel cozy, relaxed and confident when shopping to promote a relaxing experience similar to the one they might have in store and at the museum. After coming up with a design direction I created paper prototypes sketching out what these changes look like and created medium fidelity wireframes. The tasks I tackled were as follows:

  1. Create option to shop by exhibit and featured items to promote leisurely and interactive shopping
Video showing the the user flow from the homepage to the new “Shop By Exhibit” page

2. Add zoom in and video feature to product page for better shopping experience

3. Increase the size of product images on product category page for better viewing experience

4. Create Drop down in global navigation to prevent customers from having to go to another page to make a subcategory selection

After the wireframes were created they were tested by a series of users. Each tester went through a moderated testing in which they were asked to complete specific tasks. Based on the feedback from the users I was able to see if my deliverables were being met.

The zoom in feature is super helpful. The video is awesome too. I’d definitely buy online more if I felt confident about it. -User Tester 2

Result: A More Enjoyable Experience

This is the second UX process that I’ve gone through, and I’m starting to get the hang of it a bit more. Always referring back to the business goals and design challenge has become a great rule of thumb for me. The goal was to improve the experience of the online store to match the warm, interactive and leisurely browsing feeling that the brick-and-mortar store promotes, and I believe I nailed it.

The business results are as follows:

  1. Customers can browse exhibits/featured items and shop items that correlate at the same time resulting in higher sales

2. Customers have an interactive product viewing page resulting in higher sales

3. Clearer indication of where they are in the checkout process resulting in a happier customer

Moving forward

Since this project was strictly focused on wireframing, next I want to add color and images to the site to give it a look and feel. I’d also want to user test the site again for additional feedback. I’ve added some inspiration that I’ve pulled from to help with next steps.

Like what you read? Give Ashley Janelle a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.