Blanton Museum Giftshop

 

Blanton Museum Giftshop Website

Created an online checkout and item browsing, I worked with information architecture, user research, and interaction design. Balsamiq was used to create wireframes and the user journey.

 
P2- Double Images.jpg

Concept sketches of the search and checkout pages.

 

 
 

Vision

Create a site for first-time users. While still allowing more advanced user to explore the store.
Convey the sense of bringing cultural home as the museum Giftshop does.
Bring more revenue to the museum to aid expansion and new exhibits.
The user should be able to Buy, Search, & Checkout.

 
 
Screen Shot 2017-09-12 at 2.37.58 PM.png

Research

 
 

User Research

User Interviews show that museum-goers focus on supporting the museum for its culture. They want to buy unique items from at the museum's store towards this goal.

The Blanton also has active Facebook and Pinterest accounts. Researching these page showed what museum-goers were interested in buying and who was buying. Pinterest's page provided specifics about the kinds of items that are popular. Facebook let me see comments and general data about museum goes.

 

Screenshot of the Blanton's Facebook page

 

 
 

Card Sorting

The participant of the card sort found the grouping titles to make sense and only wanted to put perfume into jewelry and apparel. So I add this item to both lists.

IMG_1783.jpg
 

 
 

Persona

Nancy, my primary persona, needs a straightforward site less with no complicated steps. She needs to have all the information readily found and understood.

Also, I kept my secondary persona Samantha in mind as well to provide some balance. Samantha needs less guidance with the online shopping and more flexibility.

Primary Persona

Secondary Persona

 

 
 

Comparative analysis

Metrics for choosing which sites to compare: easy user experience, museum perspective or a clear check-out process.

These sites all had different menu types, search options, and check out processes.

From Wish.com I got an idea for a straightforward checkout process. The Met Store give me the idea about how to do the about page. REI and Zuilly give me the ideas on how to display the product pages. Amazon inspired the rating system.

 

Sites Compared

P2 - competive.png
 
Wireframes - P2.png

Planning & Design

 
 

Sitemap

MindMeister used to create this sitemap. You can see the bones of the site listed on the sitemap.

 

 
 

User Journey

This user journey gave me a deeper understanding of what Nancy might have issues with while checking out.  She seems to have the most problems with the checkout process. So focused heavily on this flow.

Balsamiq used to created the User Journey based on the scenarios.

User Journey created with Balsamiq

 

 
 

Sketching & Wireframing

At this point, I create a few sketches for the new site. Getting a basic idea of the layout and location were each feature should be. Drawing where simple to iterate with but a limitation on how much I could explore. Once I was ready to look at more details, I move to wireframing.

You can see that I put a lot of thought into how Nancy would reach each page.  The process remained very simple and clear as she moved through checkout. Each step shows her what she has done and what she is about to do.

 

CO- Payment Info CC - Filled oUt.png

wireframing in Balsamiq

 
IMG_1770.jpg

Testing

 
 

Usability Testing

Went created my testing materials I included screener survey to find participants who were familiar with online shopping along with a user testing script.

I usability testing with four different users. Both online and in person with the InVision prototype website.

The issues users notices didn't impede their usages of the site. I used there remarks to create solutions as you can see in the link.

Usability Testing Summary

 
 

 
 

Wrapping up

Iterations that made the site more user-friendly were; when after user testing I made the header cleaner. Worked on adding a secondary search option in the global navigation.  Also making the up the footer easier to navigate.

Future Iterations:

The next step will be how to displaying items pulled by the search engine.