Toys in the Attic Design Proposal

E-Commerce Website Proposal

by Rachel Sweet

The Set Up

This was Project 2 for General Assembly’s User Experience Design Immersive program. The set-up was that our instructors were acting as the stakeholders for their toy store, Toys in the Attic. They had specific ideas about what they wanted their e-commerce website to achieve, and we were creating a design that would support the goals of the stakeholders and the goals of their users.

Goals

  • Develop a clickable prototype of a design for an e-commerce website for a toy store.
  • Present the design proposal to stakeholders

Resources

  • Personas: we were provided with 3 personas that represented the types of users that Toys in the Attic typically saw in their store.
  • Sample products: Toys in the Attic also provided us with a list of their best-selling products.
  • Brand collateral: the stakeholders gave us an idea of the brand of their store and the feeling they were hoping for their users to get when using their website

Skills Developed

  • Wireframing
  • Interface Design
  • Prototyping
  • Usability Evaluation
  • Content Strategy
  • Using Personas
  • Contextual Inquiry
  • Balancing User Goals & Business Goals
  • Sketching
  • Ideation
  • Interviewing
  • Presentation Skills
  • Soliciting Feedback

Overview

  1. Business Analysis
  2. Understand User Needs
  3. Comparative Analysis
  4. Ideation, Feedback & Iteration
  5. The Design
  6. Next Steps

The Process

1. Business Analysis: Understand the Business Needs

My first step was to get a good understanding of the business, Toys in the Attic. The stakeholders kindly provided me with a brief that outlined the brand and some guidelines that let me know what they were looking to support on their commerce website. This brief was also supplemented with interviews with the stakeholders to make sure we were on the same page.

Business Goals — Main Takeaways:

  • Offer a full range of products online
  • Maintain a brand image of fun, tradition, and creativity
  • Show expertise
  • Provide high quality service

2. Understand User Needs

As I was getting an understanding of the business goals, I also began to get an idea of all the needs of the three personas we were provided with, as well as understanding which features would be most important to them.

User Needs:

  • Support
  • Flexibility
  • Simplicity
  • Inspiration
  • Relationship with the brand
  • Efficiency

Most Important Features — According to Users

  • Seeing what’s new
  • Suggestions based on past purchases
  • Easily accessible product details
  • User-generated content & reviews
  • Flexible shipping options
  • Purchase history

3. Comparative Analysis

In order to get ideas and inspiration, I checked out some award-winning e-commerce sites and took note of some components that seemed to match up well with the user needs and business goals of Toys in the Attic.

Here are a few of the most inspirational items for my own design:

Toms

I was impressed with Tom’s dropdown menu. It allows for a very simple navigation bar, and once “Shop” is selected, the user can see all the options without further investigation.

Reebok

Reebok had a very seamless way of providing users with a few more options when hovering over a particular shoe. I thought this technique would be a great way of addressing our users’ need of having easily accessible product details.

Mulberry

Mulberry made their checkout process seamless. The accordion style allowed the user to understand where they were in the checkout process without getting overwhelmed by form fields.

4. Ideation, Feedback & Iteration

Card Sorting

In order to understand how to create a navigation that would make sense to users and encompass all of the products that Toys in the Attic has to offer, I asked 6 different people that fit into varying user types to perform open and closed card sorts with the list of items that the stakeholders provided. During each closed card sort, I received feedback on items that were hard to place in the categories I provided, and I modified the categories before the next closed card sort.

Sketching

I sketched out some interface ideas, encompassing my research, business needs, user needs, and ideas, received feedback, and incorporated this feedback into future iterations.

User Flows and System Map

I began sketching out user flows and system maps to understand the scope of the website and how each kind of user would move through it.

Clickable Prototype and Usability Walkthroughs

After getting a good understanding of the design of the interface, I created a prototype in Sketch, and eventually moved the Sketch files into Invision. With both the Sketch files and the prototype on Invision, I walked 5 users through scope of the prototype and incorporated feedback between each walkthrough.

5. The Design

User Flows

Below are a few user flows that show how our three user types will move through the site.

Jason is looking to purchase a Lego Millennium Falcon for his daughter. He knows what he wants, and just wants to find the item and check out as efficiently as possible.

Jenny is looking for a beginner-level magic trick for her grandson. She isn’t quite sure what she is looking for, and wants support throughout the process.

Daniel has selected the Evil Knievel Stunt Cycle and wants to check out. He is looking for a seamless checkout process.

Wireframes

Below are a few of the most essential pages to the design. Comments about my design decisions are in red.

Product Listing
Product Detail Page
Checkout Pages

Clickable Prototype

https://invis.io/X84CAKQM6

6. Next Steps

For Me

  • Testing on mobile
  • Fully functional prototype, then usability testing!
  • Feedback from developers and stakeholders

For stakeholders

  • Provide feedback
  • Get started with assigning roles for content management:
  • How will the chat system be maintained?
  • Who will create and update product descriptions?
  • Who will maintain the website?

Takeaways:

  • Based on the feedback I received on my presentation, I have a few big takeaways:
  • Tell us what you’re going to tell us, tell us, then tell us what you told us.
  • Overarching theme should be “why?”
  • Explain design decisions during presentations.
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.