LAYING THE TRACKS

Using the 100 top-selling products as a guide, I explored various site organizations that would foster a customer experience that was helpful, understandable and also delightful. I worked with two other designers to conduct an Open Card Sort, keeping the goals of the overall site experience in mind.

I organized the toys into three main categories, defined by the feeling and emotional experience the products provided customers, versus their obvious category (i.e.: doll). These were:

learn

play

cherish

I then conducted a Closed Card Sort with five random volunteers of various backgrounds and experience with toys to test my categorization. While individual products fit into multiple categories, suggesting the need for cross-categorization/tagging, the main and sub-categorization was clear and approachable for the volunteers.

Open Card Sort

Open Card Sort

Closed Card Sort

 

Using these findings, I developed a Site Map. Like the tracks of a toy train set, this structure would determine the customer's experience throughout the site.

 

 

PLANNING THE ROUTE

I created user flows, accommodating the key tasks of the user personas as they navigated Curios.

 

SKETCHING

I incorporated my research findings into wireframe sketches. The designs strived for simplicity and clarity, with enticing and welcoming calls-to-action, brand personality (a teddy bear icon for Account in place of the traditional human icon) and easy to navigate product discoverability and form-based transactions.

I initially sketched the three main categories to be prominently and permanently showcased on the homepage with photos for each category. However, Play, Learn, and Cherish were not immediately recognizable on their own without the sub-categories to contextualize them. Thus, I decided the global navigation should include a header with the three main categories with sub-categories as dropdowns upon hovering.

I initially sketched the three main categories to be prominently and permanently showcased on the homepage with photos for each category. However, Play, Learn, and Cherish were not immediately recognizable on their own without the sub-categories to contextualize them. Thus, I decided the global navigation should include a header with the three main categories with sub-categories as dropdowns upon hovering.

WIREFRAMES & PROTOTYPING

I decided on an alternating image scroll for the front, overlaid with key branding messages for the company to communicate its unique offerings and culture. Next on the page is a module highlight- shown here a Classic Collection, giving the offerings a curated feeling. Upon sign in this module can also showcase individual recommendations based on shopper’s prior browsing and purchase history, personalizing the experience. The company values are clearly communicated, with symbols. Last on the page is an additional module to showcase specials, etc.

I decided on an alternating image scroll for the front, overlaid with key branding messages for the company to communicate its unique offerings and culture.

Next on the page is a module highlight- shown here a Classic Collection, giving the offerings a curated feeling. Upon sign in this module can also showcase individual recommendations based on shopper’s prior browsing and purchase history, personalizing the experience.

The company values are clearly communicated, with symbols.

Last on the page is an additional module to showcase specials, etc.

ALL ABOARD!

I walked five users through the prototype’s basic functionality. Their feedback led to numerous changes, including:

  • Navigational improvements - Additional breadcrumbs were added to product pages, and sidebar navigation was improved
  • Simplifying elements i.e.: removed scroll bar, clarification in pop-up language
  • Smoothened checkout flow
  • Additional help suggestions i.e. CVV popup, Add to Wishlist hint next to heart icon
When asked their first impressions of the site based on first glance at the wireframes, all five of the walkthrough participants stated themes along the lines of “Clean. Selected. Toys.” This indicates that the initial goals of the design were achieved.
 

next steps

  • Full site prototyping and usability testing — a more diverse participant pool is needed to fully test the Main and Sub-Categories and explore the emotional responses invoked by various words/labels.
  • Content strategy plan with stakeholders
  • Visual design and site development

learnings

Design is bone deep —  the infrastructure and organization of a site has as much of an influence on the overall feeling and experience of a product as its contents and presentation. Wireframes can convey the brand as much as a logo.

Usability testing unveils designer assumptions —  by having my own categorization and site map tested, I was able to discover unclear labeling I otherwise would not have seen.