Pivoting Into a Remote Marketplace

Summary Cover 2.png

A conceptual project to add e-commerce functionality to a local toy store’s website.

Since May 2005, Whistle Stop Toy & Hobby has heralded itself as the “only family-owned, old-fashioned hobby shop” in Alexandria, VA. Offering a wide range of vintage and modern products, Whistle Stop’s brick-and-mortar space centers on memorable, family-friendly experiences.

With social distancing orders in full effect in 2020, I identified a gap in Whistle Stop Toy & Hobby’s existing operations. Although the small business had an online presence, its customers could not purchase through their website.

The Challenge

Users need a way to safely purchase items so they can obey social distancing orders and continue supporting their favorite, local toy store.

The Discover Phase

“People want things to be easy to find on a website… [I like when] the categories are very specific but also broad at the same time.”

― User Interview Participant

    • Reviewed the website’s current state

    • Gathered a sample inventory of 100 unique items representing the breadth and variety of products

  • I conducted 3 user interviews to gain insight on:

    • General online shopping habits;

    • How users search for products online;

    • What product information they value; and

    • Online check-out experiences.

  • This exercise helped glean users’ mental models and how they naturally categorize inventory.

    All participants began sorting items into games versus not games and broke them into smaller groups afterward.

    Some consistent groupings included:

    • Board Games

    • Trains, Cars, Planes

    • Outdoor Activities

    • Tools / Accessories

    • Puzzles

    • Art

    • Science

  • I explored the e-commerce flow and functionality of a few online retailers, some of which were mentioned in user interviews.

    • Amazon → Great for e-commerce, efficient from product discovery to checkout

    • Wayfair  → Provides detailed product information and reviews

    • HobbyTown → Most direct competitor with similar inventory descriptions

Sample Inventory

Sample Inventory

Open Card Sorting

Open Card Sorting

Competitive Analysis: Amazon Checkout Flow

Competitive Analysis: Amazon Checkout Flow

The Define Phase

Based on user research, the inventory categories were finalized to the following:

  • Games

  • Party Games

  • Adventure & Strategy Games

  • Toys

    • Trains

    • Airplanes & Drones

    • Cars & Automobiles

    • Outdoor Toys

    • Novelty Toys

  • Art & Science

    • Painting & Drawing

    • Scientific Activity

  • Puzzles

  • Tools & Accessories

  • Through this exercise, I Identified 5 user statements to focus on.

    • I enjoy websites that are minimalistic and easy to use.

    • I want to find a product quickly and efficiently.

    • I think reviews are important and reflect the brand’s credibility.

    • I want to see as much detail about the product as possible.

    • I want to purchase a product quickly, with minimal steps.

  • Another phase of card sorting helped me re-evaluate the initial inventory categories through 9 total sessions:

    • Round 1 → 3 card sorts via Miro

    • Round 2 → 6 card sorts via Optimal Sort

    The first round confirmed a few categories, however, some were still extremely varied. Thus, a second round of closed card sorting was conducted to flesh out the remaining categories.

    Note: Participants found Miro easy to use but it was quite difficult to capture meaningful insights, so the second round of closed sorting was facilitated via Optimal Sort to review the results in more detail.

  • Then, I synthesized my user insights into a proto-persona, Sabrina, to serve as the “North Star” in the design phase.

    Summary: Stuck at home due to the COVID-19 pandemic, Sabrina and their daughter have taken up doing puzzles together as a “quarantine hobby”. They enjoy the quality time but are running through their puzzle inventory quickly. Sabrina has also been disheartened by the closing of many small businesses because of the pandemic.

    As such, Sabrina wants to:

    • Continue their new quarantine hobby;

    • Support local small businesses; and

    • Stay safe amid the pandemic.

  • Before moving into designs, I created 3 user flows for the e-commerce integration:

    • Product Discovery

    • Checkout

    • Login / Sign Up

The Design Phase

"The Love section was really cool. I haven't really seen it in a separate space next to My Bag. This made it easier to see everything that I liked in one area and purchase it."

― Usability Testing Participant

  • I updated the existing IA to accommodate the new e-commerce feature. To do this I made the following changes:

    • Updated “In Our Store” to “Shop Our Store”;

    • Created clear structure and categorization for the products available; and

    • Designed a product detail page for individual items.

    Additional navigational elements were added to supplement product discovery through successful purchases.

    • Included search bar and filtering of results;

    • Added “Account” to house user information and order history;

    • Integrated “Loved” to easily save items while browsing; and

    • Built out “My Bag” to facilitate checkout processes.

  • Sketched different ways to design the e-commerce flow from the initial product discovery to successful payment.

    Translated the sketches into wireframes in Axure. Based on research, it was important to include the following components:

    • Multiple navigational elements, different ways to discover products

    • Individual product pages with detailed descriptions, photos, and reviews

    • Clear and efficient checkout process

  • I moderated 3 usability tests over Zoom, and my key takeaways included:

    • On average, participants completed all tasks in under 5 minutes but made 6.7 errors —slightly over the goal of 6 errors total.

    • Participants found the overall experience easy, straightforward, and similar to other online shopping experiences.

    • Participants appreciated having a clear navigation bar and reacted positively to new elements such as “Sign In/Account”, “Loved”, and “My Bag”.

Updated sitemap

Updated sitemap

Sketch of product page

Sketch of product page

Wireframe of product page

Wireframe of product page

Usability testing results

Usability testing results

The Deliver Phase

Changes made to designs based on user feedback included:

  • Reordering text hierarchy to prioritize the product name rather than the brand;

  • Reformatting product names for consistency;

  • Increasing the size of the breadcrumb navigation;

  • Moving “About Us” to the footer and “Contact Us” to the header navigation; and

  • Adjusting the “Add to Bag” interaction on the “Loved” page.

The final mid-fidelity prototype integrated a way to purchase products on the store’s website that allowed customers to:

  • Find products multiple ways;

  • Browse products related to their current selection;

  • Discover popular products;

  • Explore product images and reviews; and

  • Save products to review later.

The End Result

Adding an e-commerce feature to Whistle Stop Toy & Hobby’s website would allow users to easily purchase items, maintain social distancing practices, and continue to support a local business.

Project Retrospective

Future Improvements:

  • Conduct competitor analysis on Toys ‘R’ Us.

  • Integrate alternative checkout methods (ie: PayPal, Continue as Guest).

  • Add a Remember Me feature to log in.

  • Build out Account pages for returning and new users.

  • Explore onboarding for new users creating an account; and

  • Integrate additional functionality for existing users (ie: edit account details, view order history, check the status of an order).

Key Takeaways:

  • Everyone has different mental models (ie: different ways of sorting information)!

  • It’s helpful to have more explicit metrics for usability testing (ie: levels of completion).

    • 0 = Incomplete

    • 1 = Significant difficulty, prompting, or workaround

    • 2 = Completed with ease