4

5

E-commerce

Project Overview

The Magic Toy Shop

E-Commerce Experience

Brief: Design the online shopping experience facilitating the goals of users whilst adhering to the business and brand goals of the company. Through their new website, they want to showcase their products, while maintaining their brand image of tradition, fun, and creativity. Unlike e-commerce retailers such as Amazon, The Magic Toyshop offers a highly-curated inventory focusing on handpicked quality over quantity.

I created the brand line "Memories of yesterday, moments of tomorrow"

Timeline: Two weeks

Process: Open Card Sorting, Interviews, Closed Card Sorting, Sketching, User Flows, Prototyping & Usability Testing (inVision).

Open Card Sorting & Closed Card Sort

To kick off the approach for designing the product, we conducted taxonomy card sorting. This was an observed post-it note session with two users, which assisted in defining the groups of items from a users’ perspective. The categories were then taken into an online card-sorting tool to see how a wider pool of people viewed the items association with the categories suggested.

Results

  • Confusion existed around retro items
  • Choice of categories and their ordering quite subjective
  • Parents had the best grasp of the range of items depth and categorisation
  • Users acknowledged a need to search by brand and category for items
  • Additional feedback from users (both parents) of wanting to filter items by age and price to refine search results

Customer Needs Summary

John

Needs - Easy navigation, clear new additions, easy check out, trouble free return of items.

Pain Points - No details, poor navigation, retailer trust, unclear brand names.

Tamsin

Needs - Reliable service, specialist items, value for money, clear pricing, affordable shipping costs.

Pain Points - Bad categories, hidden contact details, poorly named magic items.

Dexter

Needs - Meta Data, thoughtful categories, regular updates to categories, clear direction within the site.

Pain Points - Lengthy checkout, lack of product detail, poorly written products.

Information Architecture

Category Array

A structure was created for The Magic Toy Shop that would effectively match the business needs with the users needs in product location. The first step was drafting a category array to house the 100 products provided by the Magic Toy Shop. This was then integrated at a later stage into the site map.

Information Architecture & Site map

A detailed site map was prepared as part of the UX artifacts to be supplied to the Magic Toy Shop. This featured three tiers including; the main pages, the secondary shopping features and the third level of about/contact, faq and returns. It balanced the needs of the business with the users’ desires drawn from the persona's specific tasks and, additionally, the informal inquiry with users during the card-sorting task.

  • Clear context as to where they were located on The Magic Toy Shop website
  • Clear shopping choices, meta data, navigation and search functions
  • Product recommendations based on user interests
  • Clear calls to action

Category Array / Product Taxonomy


Close

Site map


Close

Wire frames - Lo Fi

User Journeys

John's Journey


Close

John

Use Case - Visits website for the first time to purchase a Lego Millennium Falcon for his daughter. Take John's journey.

Tamsin's Journey


Close

Tamsin

Use Case - Returns to the website looking for a beginner level magic trick for her grandson. Take Tamsin's journey.

Dexter's Journey


Close

Dexter

Use Case - Assist co-parented teenage son's purchase of an Evel Knievel Stunt Cycle online. Take Dexter's journey.

Testing Summary

Positively Received

  • Easy of use
  • Overall general flow made sense
  • Easy to navigate
  • Good structure
  • Multiple scenarios have been accommodated

Could Improve

  • Terminology required clearer relationship to objective
  • Users wanted fewer steps in checkout
  • Checkout needed more detail
  • "Thanks for shopping." Better purchase acknowledgment
  • Trouble's gaging really low fidelity of wire frames

Website Flow Map

Conclusion

Summary & Learnings

Research and validation with users helped narrow in on the final design for The Magic Toy Shop. In the research stage the card sorting sessions helped formulate the creation of a flexible interface that could be navigated according to user taste. This solution gave people the choice to use it as they saw fit, and was greeted positively in user testing. The competitor landscape also offered some valuable insights in terms of what users liked in the marketplace and additionally informed where pain points were in preexisting e-commerce solutions.

Sketching and testing early laid a good platform for feedback and ensured the user flows were on track. Invision App was a little limited in features; continued testing would need to be moved to Axure.

Annotated Sample


Close