A Heuristic Approach to the IA of an Online Shopping Experience
CLIENT: A boutique NYC kitchenware company with an authentic story and unique product offerings
PROMPT: Design a new information architecture and content strategy around the online shopping experience for existing users of the site in question. The design should meet the goals of the user, the goals of the business, and the goals of the brand. It should be tested by users and follow IA heuristic best practices
TOOLS: Pen & Paper Sketching, Card Sort, Sketch3, Omnigraffle, InVision
TIMEFRAME: 9 days
DEFINING THE OPPORTUNITY
How can we redesign the client’s website so it serves as a beginning to end, one-stop shop for all kinds of users- thereby boosting sales and brand recognition for the business, as well as user satisfaction for the buyer?
GOALS TO SATISFY
METHOD: I started my research process by visiting my client’s store.
FINDINGS: The store was quirky, special, and most of all, authentic. It was packed with artfully stacked piles of plates, vintage salt-and-pepper shakers and creamers, flatware and glassware. Many of the cheeky patterns are designed by celebrity partners.
“I’m looking for something vintage that catches my eye”
“I love the styles, colors and hilarious little sayings that come on these dishes”
COMPETIVE USER FLOW & HEURISTIC ANALYSIS
“A faster checkout means a more satisfying user experience”
METHOD: My client’s business does not have many direct competitors as not many companies are targeting the vintage dinnerware market. I decided to look at the websites of the most successful retailers that sell kitchenware.
FINDINGS: On Amazon, it would take a user 10 clicks and and 6 pages to get to check out, on Bed Bath and Beyond it would take 8 clicks and 4 pages, whereas on Mikasa, it would only take 6 clicks and 4 pages.
OPEN & CLOSED CARD SORTING
METHOD: Open and closed card sorting helped me to improve the labeling, and grouping of the client’s products.
4 open — participants created their own names for the categories; very consistent between participants.
4 closed — predetermined set of category names; each session served as an iteration to refine the final content hierarchy
FINDINGS: Closed card sorting helped me to name the categories.
Iteration after 8 user tests
FEATURE: My site map would have 6 categories:
PERSONA & AFFINITY MAPPING
METHOD: I reviewed the 3 personas focusing primarily on John.
FINDINGS: This led me to my last finding. The users would value efficient navigation and a responsive site with large product photos and the ability to read and write product reviews.
The web site must:
Have clear and intuitive navigation | Steer customers toward popular products | Show multiple images for each product | Have product descriptions | Have suggested items | Highlight on new additions
Efficient means of adding to and editing a shopping cart | Offer several shipping options
COMPETITIVE TESTING: I ran competitive tests with participants in order to see which areas they would get confused or lost in, and which areas they felt were helpful.
PROTOTYPE TESTING: After completing competitive testing , I tested my prototype on 5 participants in order to validate my research findings. I found a few pain points:
- All participants were able to navigate and complete the task without any major issues
- Quick info was not readily apparent to some users but for those who saw it, they used it rather than going to product page
After 4 more tests I felt good about my decisions and I moved on to the next step.
NARRATIVE: In order to take the client through my prototype, I created a narrative based off of one of the personas I was creating features for. Here is John’s scenario:
John has just moved to a new place and invited a few friends over. Then he realizes that he does not have enough glasses for everybody. He goes to the web site and looks for stemless glasses. He wants to read reviews to know if it’s a good product along with additional product descriptions. He likes what he sees and decides to buy 2 glasses.
Prototype user flow
SHORT TERM: Build out the mobile prototype and to put it through usability testing.
LONG TERM: Continue testing navigational titles
GRANULAR: Experiment with icons, text and color palettes.
Test more rough prototype ideas rather than one clean prototype: Due to my perfectionist tendencies I only had enough time to test one prototype. Making the prototype as clean as I can before unvealing it to testers ate up a lot of my time. So I think it will be helpful in the future if I spent more time testing various iterations rather than one perfect one in order to discover which would be the best and most usable.