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
An e-commerce interface design incorporating research based information architecture, tested web app interactions, and personable copy and iconography.
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
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"
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.
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.
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.
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.
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.
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.
The Final Prototype
- 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.