Our second project for the User Experience Design Immersive at General Assembly was to create an e-commerce website for The Magic Toy Shop, a 30 years old local shop with a very precise — and exciting mission: to create and recreate the magic moments of childhood.

In two weeks, I went from the initial research to prototyping and testing a clickable prototype of the website. With this article, I would like to tell a bit about my journey.

The challenge: imagining a brand-new website for a vintage toy business.

Understanding the vision behind the product has been a very important step to guide my design journey. I found it useful to illustrate the ethos of the brand of Magic Toy Shop using the juxtaposed image of a timeless, and loved toy, Bunny, to a gigantic pile of useless plastic toys, that are not going to be loved nor remembered.

The opportunity: bringing online the curated shop experience, and a unique brand personality

Analysing competitors proved to be a very effective way of creating a strategy behind my design. Mapping out the competitors in a polar graph, i was able to find the perfect place for the Magic Toy Shop. A curated shop that goes beyond merely specialising in Toys, but delivers special objects in a very special way.

Who is going to shop here?

I have then started considering the typical users that would be shopping at The Magic Toy Shop, and realised the typical user is a young, tech-savy parent that wants to find ‘cool’ presents for his daughter, to be seen as a cool dad. Other types of users are people shopping for magic tricks, for children that are specialising in magic and ask for very specific items, and collectors, that shop for vintage and cool items for themselves. All of them had a different type of needs and use of technology, that needed to be taken into account.

The experience behind the design

By the end of my research, I was able to summarise the type of experience I wanted to craft with my design, that I have put effort in reproducing with small and big design details.

The first aim of my design was to give easy access to content that is not always easy to find, and encourage the discovery of new, previously unknown, items.

To achieve this, I have worked on making content accessible in different ways, that reproduce the normal way of both ‘browsing’ and asking for help when shopping in a ‘offline’ toy shop.

I have started analysing a series of possible user journeys using diagrams like this one:

And moved to organise items into groups, using card sorting, and having each item on a single post-it, grouping them into categories:

By the end of this process, I translated my work into the design of the homepage, where content is made accessible for browsing trough structured categories at the top, but also in seasonal and other curated categories directly linked to banners in the body of the page.

To help users finding the most popular items, and reproducing natural shopping patterns, I have created search pages for specific brands, linked from the homepage:

To create a competitive differentiator and to bring online the offline experience of such a special curated shop, I have then introduced in different parts of the website the presence of The Experts, specialised in different fields, from the Mum to the Collector, that can help with the choice of a special item ( from the Help section), or explain why the item deserves to be their ‘Expert’s Pick ( from the product page).

My second step in the users journey, and in the design, was to make sure products are clearly displayed and easy to compare. I have focused on creating a dinamic relationship between the product page and the ‘Magic Hat’ — the basket — to make sure items could be easily added, removed, and compared from the basket.

I have applied Nielsen’s principles about basked usability for e-commerce websites, such as making sure pictures are big in size, and comparison elements are well present and summarised.

The last part of my design was aimed at designing the most crucial part of any e-commerce site: the check out process.

I put a great amount of effort in sticking to the basic principle of asking for only the information that was strictly needed to the user, while keeping in both in control of the experience ( one page form) and as happy and satisfied as possible ( focusing help, security and support, transparence of the process, but also clear but personal copy style). Here is the result:

Finally, I wanted to add a more personal touch and offer the possibility to users to contribute to growing the personality of the shop itself, while getting rewarded for their purchase. I build-in a marketing initiative that incentivise and rewards users that want to leave a picture of their favourite toy and share their story with other Magic Toy Shop customers.

This initiative is only accessible after making a purchase, from a link positioned in the confirmation page:

Once finished building my prototype, I have run different session of testing with about six different people, and soon identified what the recurrent problems with my design were:

• In the homepage, was not completely clear how to get help about purchasing an item
• The presence of experts and editorial content at the top of search pages was received with negative surprise. Users wanted to see content and not get distracted.
• Messaging in the payment form and at the end of the check out processes needed improvement, more feedback and options ( e.g. how do I receive a copy of the confirmation?) .

I have taken into account these and other feedbacks to iterate and realise the final prototype. Here is some example of the changes I made:

My final prototype was finally ready. As in the finished product, people could simulate actions such looking for known or unknown items, adding the item to the basket and proceeding to check out.

Thanks for reading!

If you want to know more, email me at martafioni@gmail.com, or have a look at my UX portfolio