Toys Etcetera: Website Redesign

Task

To redesign current e-commerce site to better fulfill consumer needs and user expectations.

Timeline | 2 weeks

The Brand

Toys Et Cetera is a an independent toy store based in Chicago since 1976. They specialize in educational and specialty toys, and are known and loved for amazing customer service and expert toy advice.

Research and Analysis

Assessment of Current Experience

Through contextual observation I discovered the reasons customers enjoy the current in-store experience at Toys Et Cetera:

free gift wrap!
expert recommendations
together, these mean you can pick up and have a gift wrapped and ready on the way to a party
convenient
can also plan birthday party there • rewards
wide selection
specialty and educational toys
nostalgia
familiarity with store and neighborhood
toys for all ages
small business
american-made toys (also European)

User Personas

I was also given 3 personas who’s needs I had to keep in mind:

John

• has a 12yr old daughter
• likes exclusive toys
• likes being able to participate

Edda

• has a 9yr old grandson
• needs help finding right toy
• likes cheap shipping

Dexter

• loves legos and new toys
• money is not an issue
• likes reading reviews & good copy

Insights

I was able to make some observations based on the existing store experience:

A majority of users are shopping for gifts for children, but some are shopping for themselves, or for adults who want nostalgic toys or board games.

Regardless of who they were shopping for, users only really seemed to have a couple of pain points:

Where do I find anything?

and

How much does it cost?

I was able to make some key observations from this information:

One of the key components of toys etc is that they will help a customer find the right gift, even with limited time. They trust and value their opinion.
While consumers enjoy having a vast selection, they have difficulty navigating it. Both the in-store and online experience of Toys Etcetera could benefit from better organization. What makes the in-store experience better, is the employee helping them find items.

The combined needs of in-store customers and our personas gave me a key insight:

When shopping online, users want an experience that’s quick and easy to navigate, from browsing, to decision making, to checkout and shipping. They also want the advice and help they can get when shopping in store.

Design Direction

The Problem

People love the customer service at Toys Et Cetera, but that same friendly help and advice is absent on their website. And while customers love the vast selection of specialty and educational toys, they have a difficult time finding what they want in both the store and the website due to the lack of organization.

The Solution

This gives us the window of opportunity to improve the Toys Et Cetera online experience by translating the great customer service users expect at the stores to their website, and assuring the website has a clean layout with intuitive navigation that makes it easy to find their specialty products.

This would be achieved by the addition of some features to translate customer service to the online store:

• gift guide
• recommendations
• live chat
• shipping options
• easy payment
• order history

Most important is simplifying the layout and navigation, and making sure it’s easy to find the search. Users also value being able to read other user’s reviews and seeing a strong social media presence.

Ideation

I began implementing these changes by first clarifying the structure and navigation in a sitemap.

Then I began sketching the new features into my redesign:

And created two wireframes in Sketch — a constrained 960 grid version, and a full-width version.

User Testing

I created prototypes in Invision and conducted user testing on both versions. Users seemed to prefer the full-width version overall, but felt it was too busy and the font was too big. The users also said:

“I love when there’s social media cause then you can connect with them more.”

“I like knowing there’s a physical location nearby, I would even pick up in store.”

“I would like to be able to do a keyword search in the reviews.”

“What if I want to remove an item from my cart?”

“This all works fine for me, but I’d like to do less scrolling.”

“I had no idea what the birthdays link was for, maybe talk about it on the homepage.”

“The checkout process can fit on one page.”

Other changes they wanted:

Map on locations page
button to open in maps
Have clearance/specials closer to top
way to get back to category page from product page
return button next to tracking
being able to zoom into images

Prototype

With the user feedback in mind, I created a third (current) prototype. Click the image to check it out!

Solution Statement

I am confident that the problems previously found on toysetcetera.com are solved, and that users can find what they need with ease on this improved platform, and that the added social features recreated the welcoming experience customers find in the store. Users can easily use the “Find a Gift” tab when they aren’t sure what to buy (which one user said he likes because he “feel(s) like I actually put in effort into picking this gift”), and can use the Live Chat when they have additional questions they can’t find the answers to online. The recommendations are tailored to their shopping history, and the reviews, blog, and social media presence replicate the feeling of familiarity and trust users already associate with Toys Et Cetera. The site is now as friendly and helpful as a store visit.

Storyboard of friendly in-store experience

Storyboard of old chaotic online experience

Storyboard of new, friendly online experience

Each of the user personas can find everything they’re looking for:

Next Steps

Improvements to make moving forward:

keep condensing
smaller font, less scroll
create mobile where users can share their wishlist in-store when looking for item they saw online
add feature that refers you to other independent toy stores when items is out of stock
buy toysetc.com domain
• test test test!