Macbook-Pro-And-Coffe-Cup-Mockup-.jpg

Museum Shop: UX Clickable Prototype

 
 
 
 
 

Problem

 

 
 

The Art Institute of Chicago Museum’s brick and mortar store is a pleasant place to browse and shop, however its website lacks an interactive way to view products and a clean layout. 

 

Research

 
 

 
 

What I Wanted to Know:
• Do you prefer shopping in store or online?
• How does the shopping experience in store feel?
• How do you usually shop for things?
• Are you an appreciator of art?



My Research Methods Consisted of:
• User Interviews (People who shopped in store and online)
• Competitive Analysis



Qualitative data:
• The warm atmosphere of the museum shop coupled with its simplistic navigation, allows
  customers to browse easily and promotes an enjoyable shopping experience.

• The unorganized website does not provide a great experience for customers, which
 results in them coming into the brick-n-mortar stores to purchase. 

 
 

Research Synthesis

 

 
 
 

I began my research exploring the reasons why customers chose to come into the brick-and-mortar store to make a purchase as opposed to going online. With these insights in mind, I was able to develop my challenge statement: To improve the experience of the online store to match the warm, interactive and leisurely browsing feeling that the brick-and-mortar store promotes.
 

 
 
 

Personas

 

 
 

After gathering data, I created personas based on in person interviews.

 
 
  Mia, 42  Chicago, IL   Goals:  Loves to browse the physical store   Frustrations:  • Came into the store because she was frustrated shopping online because she felt like the site was cluttered • Wishes there was a better way to interact with the items online

Mia, 42
Chicago, IL

Goals:
Loves to browse the physical store

Frustrations:
• Came into the store because she was frustrated shopping online because she felt like the site was cluttered
• Wishes there was a better way to interact with the items online

 
  Jan, 38  Detroit, M    Goals:  • Loves to spend hours browsing the brick-and-mortar stor  • Enjoys the physical store because she can see and touch everything     Frustrations:  • Wishes the online store felt more like the physical museum 

Jan, 38
Detroit, M 

Goals:
• Loves to spend hours browsing the brick-and-mortar stor 
• Enjoys the physical store because she can see and touch everything  

Frustrations:
• Wishes the online store felt more like the physical museum 

 
 
 
 

Information Architecture

 

 
 

Organization of the navigation depended largely on having the least amount of categories as possible. Instead of putting items into categories with broad themes, I renamed categories and used card sorting to determine where items belonged to promote a successful search experience. 

 
 
 
 
 

Sketches

 

 
 
 

Wireframes

 

 
 

Although much of the premise behind my design direction has a lot to do with color and look and feel, the low fidelity wire frames show the framework behind those intentions. I’ve also included a mood board to aid in trying to communicate my intent for the gallery pages. 

*Click to enlarge

 
 
 
 
 

Prototype

 

 
 
 

Click here to view the final prototype in Invision

 
 

Final Thoughts

 

 
 

Since this project was strictly focused on wire framing, I was able to focus strictly on the functionality. One of the most interesting parts of this project was trying to convey a leisurely browsing experience that has a lot to do with imagery and color through wire frames. However it forced me to imagine the site the way I wanted to see it, as well as come up with specific details that would really come out when the imagery and color was added. 

Please check out my case study for this project here!

 
 

Website Design and Content © 2017 Ashley Jackson