UXDI Project 2: Pop-up book store website
Project 2 of the UXDI immersive was another solo project. I was given a project brief requesting that I design a “pop-up” store website for Strand books. This project relied heavily on information architecture. I was given 90 products and had to add an additional 10. In addition, there were several goals I had to meet in order for the site to be a success:
● Have clear ways of locating specific products
● Support a single page for each product which can be linked to directly
● Have an efficient means of purchasing one or more products
● Steer customers toward popular products
● Maintain consistency with the existing brand
● Allow customers to contact the business
From these objectives I came up with a few problem questions that I wanted to have in the forefront of my mind throughout the rest of the process:
“How can I facilitate a quick, painless, and memorable shopping experience for Daria?”
“How can I fulfill all of Strand’s needs without sacrificing anything mentioned above?”
Contextual Inquiry
I wanted to have a better understanding of the brand, culture, and I also wanted to see first-hand how the information was organized and categorized. At first I was overwhelmed by the maze of books, gifts, and people. I soon noticed a pattern — there was a method to the madness and even if you couldn’t find what you were looking for, the staff was incredibly friendly, helpful and knowledgeable.
The store was bustling with people of all ages. I spoke with a few people in the store… here are some things they had to say:
“ I would much rather spend my money here than give it to corporate suits like Amazon or Barnes and Noble”
“This place is my safe haven. All these books just calm me.”
“I wear it with pride (referring to strand hat he was wearing), The store is a staple of NYC.”
Personas
The primary persona I was designing for was Daria. She’s a very tech savy consumer who loves NY culture and purchasing gifts for friends back home. A few pain points of hers I wanted to address are: Lengthy checkout process, product details and providing large product photos.
The secondary Persona I kept in mind during the process was Roland, A grandfather of two who values simplicity in online shopping. Some issues I addressed with Roland in mind were: Simplicity — don’t overwhelm him with too many choices, Product categories: make sure they made sense, Payment details: the website should save his payment info for future purchases.
The Tertiary persona was Trung, a 38 year old single parent who struggles to find the right gifts for his 12 year old daughter. It was important to keep these things in mind for Trung: Product descriptions, shipping options, product ratings.
Information Architecture
I had to make an information structure that made sense to my personas. The method I chose was card sorting. Card sorting is a method used to understand how people organize information. Initially I gave users a stack of cards with the 100 Strand items listed above. Participants were asked to categorize the items in a way that made most sense to them.
I noticed that at first most users grouped items into similar item piles. Books and gifts became global headers in all tests. Smaller groupings began appearing shortly after. After the initial sorts, I noticed repeated pattern emerging. I also noticed areas of difficulty. Most people created a fiction and non-fiction section under books, some went deeper with more subcategories many of which overlapped with other users findings… this was excellent! One in particular completely stood out by sorting items based on very personal purchasing preferences such as for my son, xmas list, birthday list, books I’ve read, look at later. While it may have been an outlier, this gave me some interesting ideas for exploring personalization.
After reviewing my notes on the open card sorts, I honed the categories down as simply as I could and added additional secondary listings within the overall categories. In order to validate the way I laid out the structure of my information, I did 4 closed card sorts. In the closed card sorts, I placed all the categories and subcategory labels down and had the users place the items where they felt they belonged.
As a result, I discovered that most of my groupings worked however It was necessary to add more subcategories to fiction and non fiction. I also added a Kitchen category under gifts and home. Additionally I grouped posters, maps, and wraps together given that users tended to place these items interchangeably between the three. After a second round of closed card sorting I felt my information architecture was validated. With this information I create a site map. The site map is a listing of the websites navigation. I was able to determine what my primary and secondary site navigation would be.
Competitor Analysis
I created user flows of Strands competitors during various states of use. While creating these flows, it was important to keep the personas in mind. We took a journey down the flows of “product discovery” and “cart checkout.” I also ran the personas through various other different scenarios to get a better feel for the websites heuristics.
Daria had a hard time during product discovery on Barnes and Nobles website. She found herself in an endless loop of going through pages and pages without finding her product. She ended up giving up out of frustration.
By comparing the experience the persona had during each flow, I was able to see which websites excelled in specific areas. Clearly Barnes and Noble did poorly with product discovery while Amazon and Alibris shined in that category.
Sketches & Prototypes
After synthesizing my research, I was ready to begin sketching. I was ready to find the answers to my initial questions:
“How can I facilitate a quick, painless, and memorable shopping experience for Daria?”
“How can I fulfill all of Strand’s needs without sacrificing anything mentioned above?”
Although for this project, search was to be omitted, I included it for future implementation. I wanted an easy and simplistic navigation system with a hover drop down menu. Featured products and suggested products were also important to include on the home page.
It was important that the user know where they were at all times and had the option to back track. With that it mind, I made sure to implement a breadcrumb system. Below are some images of the prototype with detail explanations.
User Testing
In order to make sure the website functioned properly I ran some user tests. I created a scenario for the user where they were looking for a particular item. I made sure not to lead any of the subjects throughout the process. By using a script, I was able to repeat the tests numerous times in the same manor. Here is an example of a portion of the script used:
“Imagine you are shopping for a collection of sketches. Specifically you’re looking for a product titled “Every Person in New York.” The product is a collection of sketches the Author created of people he met in New York City. Using this website without the search feature, navigate to the product and proceed to purchase it along with any other items that may be in your cart.”
Because the primary persona Daria, prefers to shop using mobile devices, I also had users test the website on a smart phone and tablet.
Iterations
All users across the board had one issue with the website… The shipping page. I addressed the issue by adding more shipping options including ground shipping, 1 and 2 day shipping. I also cleaned up the page by separating the shipping and payment into different boxes. After testing the website again, things ran smoothly.
Next Steps
Once the initial prototype gets approved, the website will need to be updated so that it can work on all mobile devices and tablets. I would also like to fully implement the search function.