Overview
The objective was simple: redesign Hasbro's online toy shop experience while being true to their brand, integrating it to the main site, and crafting a stellar user experience.
Challenge
We started with research and looked at who was doing e-commerce well. We looked at inspiration from New Balance, Nike, and of course Hasbro's direct competitors. Nike had a great user experience especially in areas of sneaker customization. A user could easily get overloaded with a large selection of customization. The New Balances site was beautiful, but their sneaker customization had so many options a user would get lost. Nike cut to the chase. Simple, clean, intuitive. That's what we set out to do... but that's not as simple as we thought.
Our research led us to a few different user types The "tier zero" user and the "mother". We had a design thinking workshop with the client to discover their ambitions for the new site and understand how we could help them. We developed some key findings which focused our attention towards the mother persona. We conducted interviews with a small user base to discover insights about our user. We learned that while the mother is probably the best in knowing what to buy for a child but they are also the ring leader. They have to help grandparents, presents for birthdays, holidays and all sorts of different points of purchase.
We conducted a heuristic evaluation of their original site. The modern refresh wasn't the only thing that needed to happen. There needed to be a better way to filter or discover new toys. From new to familiar user.
Solution
We wanted to make sure the experience was delightful from the landing page through the point of sale. As a team we focused on what Hasbro had established on their main site which would lead you to the toy shop site. The user can easily sort types of toys by play style or brand.
The product space was given a lot of clean, white space to allow the toys to shine. The user could explore new ways to enhance their children's playtime by filtering "creative toys". They could see what was popular for each age and share it to anyone looking for a gift, or purchase it themselves quickly.
My Role
I was the lead designer on the project and was responsible for more than just the look and feel... design is more than that. I wanted to make the website fresh and modern. Early on, I worked with our information architect to establish the flow of our site. I helped build annotated wire frames while working on design concepts. There were a lot of concepts created with different approaches for each. We selected three different styles to share with the client. Once the design approach was approved by the client we started on a design style guide.
We then started building a functional prototype that we could produce for user testing. The prototype was built in Axure where I built different paths. For instance, a path where the user needed to find a product and make it to checkout. We had 20 users take part in the testing over the course of 3 days. Half way through the first day we replaced the filtering options placement because our users completely overlooked them. I redesigned the filtering on the spot and replaced the prototype the same day.
After everything was designed and tested, I worked closely with development to ensure our designs came to life. The developers had some great insights that I adapted into the final design and it greatly improved the functionality. I needed to ensure the website followed accessibility standards. I tested the site and had it checked several times with accessibility experts within IBM.
Our Persona
