Ever Toys

Ever Toys E-Commerce

An E-Commerce interface design concept providing functionality and personality to shoppers

 

METHODS: Card Sorting, Competitive Analysis, Site Mapping, User Flow Charting, Wireframing, Prototyping, Usability Testing

TOOLS: Balsamiq Mock Ups, InVision, Omnigraffle, Sketch 3

TEAM: Solo     DURATION: 2 Weeks     CONTEXT: Class Project


Solution

An e-commerce interface design incorporating research based information architecture, tested web app interactions, and personable copy and iconography.

Objective

Design an e-commerce website interface that meets shopper and stakeholder needs while displaying the unique personality of the small business, Ever Toys.


 

The Design Process

 

Defining The Needs

 
 

Stakeholder interview

Key goals of the owners of Ever Toys:

  • “increase sales”
  • “expand our customers beyond our physical store”
  • "nothing too extravagant for our first website"
  • "it would be nice if our current customers can use it too"

Client Scenario

The owners of a fictional San Francisco based toy store, Ever Toys, decide to create their first online store in order to increase sales and outreach beyond local residents.

My role was to design the information architecture, content strategy, and interface of a user-centered online store platform to provide a seamless online shopping experience yet expresses the personal, small shop feel of the brick-and-mortar store.

 
 

Personas

Referring to the 3 personas provided along with the stakeholder's brief, I listed the necessary features sorted by priority. These stories provided the scenarios which determined the user task flow.

 

Research

Competitive Analysis

The evaluation of 5 competitor e-commerce offerings gave insight to best practices and what to avoid in order to give a shopper an efficient, yet personable online shopping experience. I referred to the higher marks as models and avoided the poorer interactions.

 

Card Sorting

I conducted 3 in-person card sorting exercises with 90 product items and 5 online card sorting exercises with 30 product items.

The results and analyses from the exercises revealed insight into how users' mental models for product item associations are structured, informing the information architecture of the navigation and categorization of the products.

 

Synthesis

Site Map

The insights taken from the card sorting exercises informed the page level site structure.

 

User Flow Chart

The tasks that the 3 personas would need in order to make their purchases were combined into a single flow chart. There are multiple pathways to the final page, signifying a confirmation of a cart purchase.

 

Iterative Design

The iterative process started with many wireframe sketches aimed at fulfilling the needs of the brief and personas. I turned the most sufficient sketches into a digital prototype using Balsamiq Mock Ups. I tested the first prototype with 4 users before creating an iteration of wireframes in Sketch 3.

Wireframe Sketch

Usability Test

First Prototype

Iteration Design in Sketch 3

The Final Prototype


Retrospective

  • When there is a large, complex list of needs and requirements, start sketching small then iterate. Understand the big picture before diving into details.
  • Balsamiq Mock Ups is useful for creating wireframes quickly but was not sufficiently pixel accurate for creating the final wireframes.
  • Use online or digital tools that automatically analyze card sorting exercises if the aim is to collect statistically significant data.