Project Overview
Anatal is an Israeli company that imports, distributes and markets toys and games. They have a showroom for businesses and an E-commerce store with creative wooden toys that empower children to explore and reach their full potential.
In this case study I will present my suggestion for the redesign of the e-commerce store, research I conducted of the 'Anatal' company, competitor analysis, the unique visual identity, and the upgrade to the user experience.
My Role In This Project
Research
In a competitive world where there are lots of toy stores and a lot of suppliers, it is important to create a unique shopping experience that will make people choose to buy from this particular store. The first thing I did was to read into Anatal’s company profile, its products, exciting website, and social media.
Competitor Research
After looking into AnataI moved to the competitors' research to identify what the competitors are doing well, and what can we learn from them.
In the competitor research I identified 5 key conventions to follow when you are approaching a toy store design:
01
Navigation - The navigation should be intuitive and easy to follow, especially the search option and the different filters.
03
Hierarchy - is an important element especially when there are many available products so the customer can easily find the most important element on the website.
02
Clear and clean design - To bring out the toys and not overwhelm the customer.
04
Images - Not only of the product itself but also supporting images of kids using the toys ignite the customer’s imagination.
05
Emphasising the information the customer looks for - answering their concerns and providing any additional details that might encourage the purchase such as toy safety and ISO.
Expert Usability Review
The next step was to conduct a usability review, and here I identified several usability issues:
-
The existing website is outdated and not inviting.
-
There is no hierarchy in terms of components, few images, and a lot of text.
-
Multiple decision nodes, making the purchase process difficult.
-
There is no consistency in the color and usability of components on the site.
-
The color palette and UI elements stand out and do not serve the purchase process.
User (Proto Persona)
Yael Gil, 35
Married,
Psychologist
Motivation
She wants her kids to play with high-quality educational toys in order to support their development.
The safety of the toys and their materials is very important to her, so she always double-checks the instructions before using them.
Pain Points
Due to the birth of the baby, she does not have time to go to physical stores and choose toys.
There are many toy stores that sell plastic toys of low quality and low durability.
Furthermore, it is difficult to obtain additional information from the seller.
Toy stores online are overwhelming, difficult to navigate, and hard to find the right toy by age group and developmental stage. There are also sometimes difficulties navigating the categories and a lack of information in them.
Goals
The main goal was to create a visual identity that correlates with the high-quality products they sell, as well as improving the UX/UI to increase the conversion on the website and encourage users to read more and purchase. Another important goal was to address the persona's pain points and give her a great experience.
Design
The changes I made to the page structure, content hierarchy, UI elements - created an easy to-use and inviting user experience for buying educational toys.
01
Navigation -A user friendly, aesthetically appealing and intuitive interface.
03
Hierarchy - The website has a top navigation with a search bar, instead of the centralized view that was before. My goal was to put the products at the center of the users' attention. Then I added categories such as age, new products, best sellers, and more. This was done to allow various ways of navigation and exploration of the toy catalog.
05
Information - Tool tips were added to give information about the quality of the toys. I also added trust factors throughout the website such as mentioning the quality of the toys, secure payments, the brands they sell, talk to customer care etc. This is known to increase conversion.
02
Clear and clean design - I created and branded the site in line with the premium products they sell, as well as improved the user shopping experience.
04
Images - In order to avoid overloading the website with text, I switched to illustrations. It was done in order to ignite a parent's imagination and to direct them to easy-to-understand pages.
06
Categories - Redesigning the categories was my first concern to make the website easy to navigate and address the pain point of overwhelming.
Wireframes
My goal was to provide design solutions for the pain points uncovered in the initial research. The wireframes creation was necessary to be able to lay out all the information into the product's interface to reveal the visual hierarchies and structure of the screens.
Design
Logo
In the design process, I also renovated the logo and gave it a more up-to-date and professional look.
Illustrations
I use set of clean and delicate illustrations illustrating steps, in order to Convey a message of simplicity and ease.
Home Page
This site's header features a search bar, a log-in/join option, a favorites list, and a shopping cart. An easy-to-use mega menu organizes common pages and categories, while logical navigation and simple page structure make it easy to use. All categories on the site are visually displayed and easily accessible. There are illustrations throughout the site that provide information.
Mega Menu
In order to ease the customer's navigation between the products on the website, I decided to add a mega menu to the site header. With the most common categories among customers
Categories Page
Once a category is selected, the subcategories within this selection will appear. The purpose is to help the user accurately and easily find the right toy for their needs. The page is composed of large images that display representative products from the indicated category.
Product Page
The product page is embedded with large product images with good zooming-in options. The product can be viewed from several angles. “Add to cart and choose” In order to boost the user’s confidence and encourage them to make a purchase. Users can also share their favorite products on social media or add them to their favorite list. The toy’s detailed description is divided into three sections: Overview, Details, and Technical description. At the bottom of the product page, users are offered an additional recommended toys section which shows complementary products and selected products from the site.
