UX Design Project: E-Commerce Website & Clickable Prototyping
The User Experience Design Immersive at General Assembly in Chicago continues!
For project two, we had two weeks to go through the same design process we did in project one, but this time with more detail. Utilizing research methods, mind mapping, information architecture, user journeys and personas, we were tasked with designing a clickable prototype around an online shopping experience. Unlike a usual retailer however, we were given a list of museums here in Chicago that have on-site stores as well as online experiences. Coming from an arts background (and knowing how disparate in-person shopping experiences can be from online ones), I was excited to see what our options were.
Museum Selection
I chose to do my project on the Chicago Design Museum. (Hereafter referred to as ChiDM). Founded in 2012, “ChiDM strengthens design culture and builds community by facilitating the exchange of knowledge through dynamic experiences.” This starts in the museum with exhibits, continues in the space with classes and special events, and extends to their current e-commerce site, if you know where to look. I have volunteered with ChiDM on numerous occasions since it opened its permanent space in 2014, so I felt a pull to this museum more than the others. Also knowing how their current website is set up I knew it would be a challenge, but working on an organization I have a connection to was enough to motivate me to give this a try.
Research Interviews & User Observations
First things first was to go and see users in action on site at ChiDM. The museum is situated in a shopping center, so I hoped that going during the middle of the day when tourists are stopping in and out that there would be a good amount of foot traffic. I was rewarded with a semi-full house, probably fifteen people or so. I didn’t want to bother patrons going through the exhibit, so I talked to the intern near the front for a while and waited for people to approach the merchandise area, which is on the way out. Eight people graciously agreed to talk to me about shopping on-site at the museum. A few of the quotes that stood out to me:
“My goal wasn’t to shop — I came here for the exhibit and didn’t even know they sold things.”
“I like that the things in the shop are by Chicago artists. I wish I could find out more about them, though.”
“This set-up is a little off. Seems kind of like an afterthought.”
Of the people I spoke with, all but one had been to the museum before, but none of them had ever purchased an item on-site. When I asked why, they told me individually that they usually just forgot about it, since they couldn’t connect with the artists in the store the way they could connect with the exhibit artists, or because they never remembered to bring money. Most told me that if they really wanted something, they would often go the website later and look it up there.
Connection was a word I would continue to hear over and over again throughout this process. It will come up again later in personas, but keep it in the back of your head for now.
Two important things to note before we move onto the online store observations:
- The design of the on-site store is absolutely contingent on space. Because ChiDM is a small staff with a limited amount of real estate, they dedicate most of the museum area to their featured exhibit, as they should. The remaining area of the room where merchandise is displayed is off to the side, simply displayed along a long wall. What you see is what you get, and it definitely is not the purpose of a visit for most people. The photo below shows how the store is still very much a part of the museum space, but it is not front and center like a dedicated retail space would be.
- Artists sold in the store have no correlation to the artists on exhibit. This created a visible disconnect with some users because they’re used to going to an organization like the Art Institute, seeing a painting, and then being able to buy a recreation of it on postcard for their grandma. While users loved the museum for its educational purpose of teaching about design, they expected that mindset to carry over into the retail side: the informational mindset. Having a few steps ago been able to see an artist’s work and read about them, they were disappointed they could not do the same in the store. In a short conversation by email with the Executive Director, he mentioned that one reason he offered local artist merchandise in the store (as opposed to exhibit artists, who are coming from all over) was to strengthen their mission of community in Chicago. They may be a national design museum, but they never want to forget where they’re coming from. Since he can’t always dedicate exhibit space to local artists, this is his way of bringing design education and community together in one place, which I thought was a smart move.
Going back to our on-site user who said they would visit the website to make a purchase at a later date, it was evident that this was the way that most people encountered the store website. Not one person I talked to had ever gone to the museum store website before the museum. It was always after having been to the museum in person and revisiting.
Once that user visits the store online however, it becomes increasingly difficult to find anything. The store is currently set up in three arms: One for ChiDM, one for Threadless, and one for Cards Against Humanity. When buying one of the exclusive items from ChiDM, the user stays on the original website. Buying an item from a Threadless artist or the special design-themed card pack from Cards Against Humanity takes the user to an external site. (Note: This is lean business decision. Again, ChiDM does not have the staff to fulfill all these merchandise orders. Setting up a Threadless store is free and all they need to do is supply the product photos. Same for Cards Against Humanity.) Additionally, inventory on site is probably three times what it is online. Users were frustrated that they had seen something in store that they could not find online, and if they did find products they liked, they were disappointed at the lack of inventory. The visits to the online store consistently resulted in a loss: both in revenue for the museum and in lack of knowledge for the user. Some quotes that stood out:
“This is really disorganized.”
“Am I still buying from ChiDM? It’s hard to tell.”
“I loved that one artist at the museum…why isn’t any of his stuff online?”
For the purposes of this project, I assumed a scenario in which ChiDM would have the infrastructure necessary to handle all order fulfillment and inventory on one site, instead of contracting out to their partners.
Personas and Insights
Gathering all of this research together and hearing from audiences who both saw the store in-person and shopped online, it became very clear who I was designing for:
This audience is an intelligent, inquisitive bunch that wanted context and connection (see? told you it’d come back) behind their purchases. This is a niche group, to be sure, but at this point in time, this is who knows about the museum, visits it often, and visits the store online. These people are visiting ChiDM because someone has brought it to them. They have a personal connection either because they are in the design community already, or they know someone who is. You’re not going to stumble upon ChiDM. Rather, it’s going to be a conscious choice. This audience’s necessity for information, their willingness to explore, and their desire to be involved in the community by supporting local artists helped nail down a cohesive design direction, further supported by three key insights:
- These users are ready to go on a journey Their primary goal is education and information, and shopping is secondary.
- When they do shop, they’re expecting mirrored experiences Because our user may not always buy on site, but may take note of something in person to look up later, they’re counting on the fact that the online store will match their previous experience.
- ARTISTS ARE EVERYTHING To feel the same connection they felt in the museum, users want the store to inform them about artists and their work, just like exhibits inform them about those artists. This also helps them feel more connected to the Chicago community because they know they are supporting and learning about local artists.
Design Principle
While it seems counterintuitive that the first goal of a store would be to educate, this particular persona is constantly curious. They’re a designer or artist because they want to stretch their brain. They’re studying design because there’s always something new to learn. And friends are going to the site because a connection has given them a reason to.
It’s not that these people won’t buy items. But for this audience, they will not buy without background, as was made clear by both the casual approach to in-store merchandise and carrying over to the disorganized and bounce-heavy experience online.
User Flows
When considering how to set up the site to make artists and information the focus, I had to think about the path this informed user would take. My first user flow is a returning user who is familiar with the museum, has seen an artist he likes, and makes note to look it up later. Thinking about how he may be navigating the website after seeing an exhibit was a good exercise in knowing which pages were necessary. This user path is very clearly artist-motivated, taking him the the artist’s individual “store” within a store and leading him to a quick and easy checkout.
Although I moved forward with the design-focused, educated persona for this project, I still wanted to take into account what a user would go through if she just happened upon the site, or was told about it with no context to the museum. This meant making museum information like contact and museum hours easy to find, and still create a shopping experience that she could tailor to her needs. While she may not search directly by artist, giving the user the opportunity to shop by category first and then find out about the artists furthered the educational mission of the museum and gave her a more informed story of her purchase.
Artist Centered Design
The crux of my design was finding out a way to make information and commerce come together as seamlessly as possible, with artists at the forefront. Having artists be searchable had a big impact on user testers. Given the context of the kind of user who would be utilizing this feature, they said that they, too, would know exactly what they’d be able to accomplish here and that it was easy to navigate. Testers appreciated that they could see all featured artists at once, and wouldn’t have to click around on odd items throughout the store to find out who designed what, as with the old site.
From there, each artist had their own store inside the store. A place for a bio to mention previous and current work, an area that showed all other pieces that they had designed, and a way to browse related artists. Testers said that they would enjoy using this feature if they had time to browse, and that the artist connection was clear. This setup also continues the education experience and is looping the customer back in to the design museum and its mission, even when they’re not physically in the museum.
Results and For the Future
I am very pleased with how this project came out. Coming from a place of familiarity with the organization, I had a special investment in making sure that the design problem was identified and solved. Seeing how important artist connection was to this audience, I enjoyed building something that would serve their needs as well as reinforce the goals and mission of the museum.
As I continue to build this project out, I of course want to add photos and color to drive home the artistic side of the organization. Additionally, I’d like to explore adding a featured artist to the homepage, find a way to incorporate national exhibit artists into the store, and most importantly, explore the possibility of interactive artist profiles. If a user could use a “click to chat” feature to find out even more about their artist, that may make the buying process even more meaningful.
Finally, we approached this project from a user experience, but given the subject matter and the way the design came out, I would also like to investigate the artist experience. If each of these local artists is going to have a page on the website, what do they want their store to look like? What information is important to them? How would they like to be connected to the other artists? And so on. Overall I just can’t wait to move forward with this project, but that will be more for a portfolio build. Until then, thanks for reading!
