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.
- Develop a clickable prototype of a design for an e-commerce website for a toy store.
- Present the design proposal to stakeholders
- 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
- Interface Design
- Usability Evaluation
- Content Strategy
- Using Personas
- Contextual Inquiry
- Balancing User Goals & Business Goals
- Presentation Skills
- Soliciting Feedback
- Business Analysis
- Understand User Needs
- Comparative Analysis
- Ideation, Feedback & Iteration
- The Design
- Next Steps
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.
- Relationship with the brand
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:
4. Ideation, Feedback & Iteration
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.
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
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.
Below are a few of the most essential pages to the design. Comments about my design decisions are in red.
6. Next Steps
- Testing on mobile
- Fully functional prototype, then usability testing!
- Feedback from developers and 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?
- 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.