The Treasure Chest – a new direction for a local retro store

The problem

The Treasure Chest is a 30-year old local toy store that specialises in a quality, curated inventory with a strong focus on personal service. They are ready for their first e-commerce site, which needs to capture the essence of the in-store experience including the traditional, fun and creative atmosphere.

Details

  • Hypothetical, individual project
  • 2 weeks (+1 week of refinement)
  • Markers, paper, Axure 7 and OptimalSort
  • View prototype

Design process

Research

Stakeholder interview

Comparative analysis

User research

Define

User stories

Feature prioritisation

Card sorting

Design

Site map

User flows

Sketching

Build

Interactive prototype

Test and refine

Annotated wireframes

Research

Stakeholder interview | Comparative analysis | User research

The project commenced with a stakeholder interview. This revealed that for over 30 years the store has focused on selling traditional toys for children, but now offers a full range of new and vintage toys to appeal to children and adults. Hand-picked, curated toys are favoured over a large-scale inventory. And retro toys can be sourced upon request.

A comparative analysis helped to learn about the e-commerce toy store space and to guage where the Treasure Chest stands compared to competitors. Other motivations were to: experience usability issues, uncover current trends and generate ideas.

Key findings:

Each site had pros and cons, with some sites having a simplistic feel and others looking professional and well organised. The items highlighted in blue could work well on the Treasure Chest site, while the red items would not.

Comparative Analysis

To get a feel for e-commerce site design a range of sites were looked at in terms of their usability, features and visuals.

Kidstuff toys website

Kidstuff: has more features that the Treasure Chest needs. Great visual appeal and easy to navigate.

Wrightwood furniture website

Wrightwood Furniture Co: a stylish, clean and informative site. With compact and functional product navigation.

The Home Depot lifestyle website

Home Depot: presents like a traditional catalogue. Detailed secondary navigation supports huge inventory.

My own bike bike website

My own bike: clean visuals with minimal typography and unorthodox secondary navigation, creates a subdued experience.

The stakeholders supplied their own user research in the form of three personas:

The personas guided the design process, keeping it realistic, by reminding of who the users were.

Define

User stories | Feature prioritisation | Card sorting | Ideation

User stories were developed from the persona needs and pain points. These helped shape design features with a user-centric focus and placed the user needs firmly within the design process.

User stories

A feature prioritisation was supplied from the business point of view. It outlined the sites most to least important needs, providing further direction for the design process.

Must have

  • Have clear ways of locating specific products
  • Support a single page for each product which can be linked to directly
  • Have an efficient means of purchasing one or more products
  • Steer customers toward popular products
  • Establish the brand and its points of difference
  • Allow customers to contact the business.

Should have

  • Allow customers to browse products related to their current selection
  • Allow customers to read and write reviews of a product
  • Provide information about the stores heritage
  • Reward loyalty for repeat customers.

Could have

  • Allow customers to shop by major brands (e.g. Lego, Star Wars, etc.)
  • Allow for multiple images per product
  • Adapt the experience appropriately across desktop and mobile.

Won't have (right now)

  • Separate products along gender lines
  • Offer advanced wizard-like 'product finder' tools
  • Offer online activities unrelated to purchasing products.
Cardsorting

A list of 100 typical products was supplied to help design the information architecture. An open card sort was completed online by 20 people using OptimalSort. Numerous categories were formed and some merged with nine final categories were settled on.

Design

Sitemap | User flows | Sketching

The sitemap was designed by taking into account the business and user needs. The aim was to create an uncluttered and easy to navigate site.

Site map

Three user scenarios were provided to illustrate how customers would typically use the site. User flows were created and illustrated the 'happy paths' for customers completing different tasks. This confirmed that the information architecture was functional.

1A father visits the website for the first time to purchase a Lego Millennium Falcon for his daughter.

User flow, father

2A grandmother returns to the website looking for a beginner-level magic trick for her grandson.

User flow, grandmother

3A retro-collector has selected an Evel Knievel Stunt Cycle, and now wants to complete the check-out process.

User flow, retro collector

Sketching provided the chance to experiment with different configurations and to turn the sitemap and features into something tangible before creating a digital prototype.

Sketches

Build

Interactive prototype | Test and refine | Annotated wireframes

Sketches were transformed into an interactive prototype using Axure 7. Additional pages were added, as well as a minimal amount of interactivity, to create a more realistic website experience.

User flow – father

User flow – grandmother

User flow – retro-collector

Usability testing with two people provided information on general usability, interactions, navigation and page layout. The most important feedback was applied during the first iteration and the remainder will be in following iterations.

Annotations 1

Feedback not yet applied

  1. Add a filter by price option to the product pages
  2. Place the product page navigation above the products as well as below.
Annotations 2

Feedback applied

  1. Rethink the wishlist icon so it can't be mistaken for something else
  2. Have a feedback message when an item is added to the cart
  3. Move reviews closer to product description.

Next steps

If the project were to continue, testing with at least five more users would take place. After feedback had been applied, the project would be presented to the client before considering additional features and the design of a high fidelity prototype before futher testing.