diana
bloom
CONCEPTUAL CASE STUDY
Magic Toy Shop eCommerce Site
General Assembly conceptual project to design an e-commerce website for a local toy shop.
The Problem
The owners need to modernize and grow their business while retaining the charm and personality of the brick & mortar shopping experience.
The Solution
An e-commerce website designed to showcase the shop's unique product line, build a sense of community and provide shoppers with a clean, intuitive and easy to navigate interface.
My Role
Sole designer for the entire project.
DESIGN PROCESS
Information architecture / card sorting
The Magic Toy Shop provided 100 of their top-selling items to include in the category taxonomy. To kick off the project, two card sorting exercises were done which helped clarify shoppers' mental models and establish site navigation.
Findings:
-
Most people categorized by product type
-
A subset categorized by age
-
Preschool toys spanned multiple categories
The first card sorting exercise was based on my mental model and input from a cluster analysis done by the class online. The initial outcome was 13 top-level categories and 12 sub-categories.
I brought in several friends and family members who frequently shop for their own kids to get more input. The number of top-level categories decreased to 8 and sub-categories increased to 19.
In the final simplified site map, the product detail page is never more than two levels deep after login.
The first card sorting exercise was based on my mental model and input from a cluster analysis done by the class online. The initial outcome was 13 top-level categories and 12 sub-categories.
User scenarios & flows
For this project I was provided three personas and user scenarios. The user needs vary for each persona, but three primary areas stood out:
-
Finding products must be easy and intuitive
-
Checkout must be quick and flexible
-
Product descriptions and reviews must be readily accessible
There were also some secondary requirements:
-
Suggested products
-
Social sharing
-
Responsive design
The user flows reflect the needs of each persona, and reinforce the site map structure.
The personas represent three user types with different needs and technical abilities.
John is a tech savvy single dad who's short on time. He wants to find a Lego Star Wars Millennium Falcon for his 14 year old daughter. He locates the product category easily from the home page and uses the brand filter to narrow the results. He finds the item, and checks out from the product detail page.
The checkout process allows shoppers who have not already logged in three choices: - Log in and use saved payment and shipping information - Create an account and save the information for later - Check out as guest
The personas represent three user types with different needs and technical abilities.
Sketching layout ideas
While I was refining the site map I started sketching the home page, category page and checkout pages. I found I was making small changes to the site map as I sketched so it made sense to do it in parallel. To keep things simple for shoppers, the layout follows ecommerce conventions with a tabbed category menu at the top.
The home page is modular and is designed to allow Magic Toy Shop the flexibility to adapt to seasonality and trends.
A conventional tabbed interface was used to make browsing as easy as possible. After user testing, the blog was eliminated and "Gifts for Magicians" was changed as it was too specific for the home page.
The initial sketch of the category page included a list and gallery view. This was changed to gallery style only in the final iteration to keep the project in scope.
The first (very) rough sketch of the checkout flow included Paypal as a payment option and the create account option at the beginning of the flow. These were eliminated later to keep the project in scope.
A conventional tabbed interface was used to make browsing as easy as possible. After user testing, the blog was eliminated and "Gifts for Magicians" was changed as it was too specific for the home page.
Digital wireframes & prototype
After the design ideas were sketched out and tested, I created a digital version to use for a clickable prototype. To keep the project in scope and because of a tight timeline, the prototype follows the "happy path" for each persona.
Wireframes were created in OmniGraffle, and the prototype was developed in InVision.
The digital version of the home page includes a "Kid Picks" section to promote a sense of community and to help parents find gifts based on what other kids like.
The category list page is defaulted to gallery style based on competitive research and user feedback. Filters and sorting capabilities are included.
After the order is successfully submitted, a confirmation page is displayed with a print option.
The digital version of the home page includes a "Kid Picks" section to promote a sense of community and to help parents find gifts based on what other kids like.