HERE’S THE GIST:
The main objective of this project was to redesign an existing e-commerce store to better reflect the needs of the user and business. I selected the Museum of Contemporary Art for this project, a museum whose speciality is in exhibiting unconventional pieces, that also offer work through their online gift store. I determined through my user research that customers were engaged with the store environment itself, and I sought to replicate this experience through my design solution. My final presentation provided a prototype of my redesign for their e-commerce website.
Team Member(s): Mark Pragides
Duration: Two weeks
Tools: Adobe Illustrator, Marvel
SO WHAT’S THE MUSEUM OF CONTEMPORARY ART?
As the name suggests, the Museum of Contemporary Art (MCA) is a contemporary art museum in downtown, Chicago. Its mission is to promote the works of up-and-coming young artists, and provide a space to contemplate modern art and culture. They specialize in promoting unique and onthodox artwork, and their onsite/online gift shop provides souvenirs of their exhibits.
THAT’S COOL, BUT WHAT ARE YOU TRYING TO SOLVE?
Well, the MCA’s brand identity is very much solidified in its expression of the unique and unconventional. And to it’s credit, that extends to the interface design of their e-commerce website:
As our subsequent research determined, there weren’t as many sales through their e-commerce website as opposed to their onsite store. Based on this information, I established the following problem statement:
How am I going to design the MCA’s e-commerce site so that it increases online sales while meeting the goals of the users, the brand, and the business?
GREAT! TELL ME ABOUT YOUR RESEARCH.
CONTEXTUAL INQUIRIES and USER INTERVIEWS
Being that this business is an art museum, I determined early on that onsite research would be crucial to this project. As a result, I visited the MCA in person, their gift shop in particular, to learn more about how they operate.
I first conducted contextual inquires within the gift shop, taking notes about the store’s layout, their product displays, and how customers make purchases. I found that the MCA’s store is bi-level, with products arranged in a circular fashion. This led to customers browsing the store in a similarly roundabout way, and based on talks with the staff, this was inline with the MCA’s branding of uniqueness.
The second main research tool I used was user interviews. I first engaged with the MCA’s employees, learning more about their role in the business and the store’s history. Likewise, I conducted interviews some of their customers, inquiring about their shopping habits, hobbies, and their relationship to the store.
“I wouldn’t really use the website; I’m just interested in browsing the store.”
– Customer
“We’re an international and localized voice.”
– Employee
“I usually never shop for myself. I mostly just shop for gifts for other people.”
– Customer
ANALYSIS TIME! WHAT DID ALL THIS TELL YOU?
OBSERVATIONS & KEY INSIGHTS
Following my research, I then compiled my findings into an affinity map, carefully noting any correlating trends between the customers and the museum’s staff. By threading these observations about the MCA’s store with the data about the users, I discovered a variety of key insights. Most prominently, that the users were engaging with the store itself as opposed to any particular products, as if deliberately taking the role of an observer.
Observations
- Emphasis on a “unique” store layout.
- People are initially drawn to the unfamiliar aesthetic.
- For those who have seen it, the confusing website design turns people off.
Key Insights
- The store’s merchandise doesn’t always reflect the desires of the shopper.
- The store itself is the experience.
- People don’t want to commit too much right away in what they don’t understand.
OKAY, HOTSHOT. WHAT’S YOUR DESIGN STRATEGY?
As you can see, these were some truthfully enlightening insights I gained about the user’s relationship towards the MCA. The next step for me was to translate these insights into design principles that could be applied to an e-commerce design solution.
DESIGN PRINCIPLES
Before moving ahead to the solution, I established the following design principles:
- Emulate the in-person experience of shopping at the Museum of Contemporary Art.
- Replicate the curiosity and wonder found in the actual store.
- Retain the MCA’s business goal of supporting young, diverse, and emerging artists.
AND…WHAT’S YOUR DESIGN SOLUTION?
The key takeaway from my research was that users enter the gift shop not necessarily to shop for anything specific, but experience the store as its own entity. Linking this insight with my design principles, I came to the following solution:
Envision an e-commerce website that simulates the experience of entering the real store and making a purchase, while mimicking the MCA’s promotional endeavors.
CONCEPT SKETCHING
I began by drawing up a couple of concept sketches to illustrate how to best convert the physical store experience to a website interface. Some of the more prominent ideas include an immersive introduction page, an art gallery-style layout, a sidebar with a scrollable center, and pop-up screens to invoke depth.
BUILDING THE SITEMAP
To reconstruct the website’s information architecture, I sampled products that are currently on the MCA’s website and user-tested them via card sorting. Some of the product categories include “Art Objects”, “Books”, “Gifts”, and “Houseware”.
THE USER JOURNEY
With the concept sketches of the website and the sitemap setting up the foundation, I then made a user journey flow to envision how a user would navigate the website.
WIREFRAMES
The final preliminary design artifacts I built, and what would eventually be used for usability testing, are a series of wireframes that conceptualize all the aforementioned design assets. These were soon constructed into a prototype.
WHAT ABOUT USER TESTING? HOW’D YOU VALIDATE THIS?
When handling usability testing, my approach was to take the prototype and run it though a number of beta testers. Specifically, testers that have not been to the store before. I had them perform basic tasks and observed their actions, resulting in the following insights:
Positives
- Navigation went exceeding well.
- Landing page was well received.
- High learnability.
Negatives
- Validation issues during the shopping process.
- Users felt distrustful due to a lack of presence from other users.
- Restrictive user flow.
BRING IT ON HOME! WHAT ARE YOUR FINAL DELIVERABLES?
Now that I had relevant usability testing results for which to improve the design, my final step of my project was to create a high-fidelity prototype of my redesigned e-commerce website. The key changes I made to the prototype was to simultaneously loosen up and increase confirmation responses in the user flow. This ranged from applying a style guide, adding user reviews to the products, and visibly showing progression for the user during purchases. The resulting prototype was presented as my final deliverable.
WHAT WERE THE FINAL RESULTS OF YOUR PROJECT? NEXT STEPS?
My redesign for the MCA’s e-commerce platform recieved a positive reception for addressing both the needs of the users and the business needs of the museum. The visual design also left a strong impact for being reflective of the MCA’s brand identity while improving upon its navigation issues.
One point of improvement that could be made was in creating a persona of the artists that the MCA actively promotes and applying it towards the user flow. As the MCA has such a niche user, I agreed that addressing this “secondary user” would prove beneficial to both the user and business.
If I were to return to this project, one essential improvement I would make would be in applying responsive website design to my prototype. To that extent, I would take a mobile-first approach and redesign the platform to fit the UI standards for Material Design and Human Interface design. Overall, I see vast room for enhancing the visual design of my final prototype.