back-toys.png
Toys R us

 

Redesigning the Israeli eCommerce site for Toys R us

toys-screen.png
Why Toys R us?

 

In my search for redesigning an eCommerce site, I was captivated by its colorfulness. I have a soft spot to lively color, and that’s the main thing that pops on the site – but one can easily tell that it is counterproductive. I am a potential target audience who buys gifts for children online, and so I found it easy to identify with the brand.

The problems

 

  • The site is very cumbersome and loaded with visual elements.

  • The hierarchy of information is unclear and very scattered.

  • There is no guiding line going throughout the website's design from start to finish - there is no brand personality.

  • There are multiple fonts.

This is the current website:

https://toysrus.co.il/

What Individual project

 

Role UX | UI | Research | Prototyping

 

When 2021

As a designer, I believe that the most important tool for creating differentiation, standing out and invoking emotion is color. Color is the main element that transmits the story.

Home page (OMG! 1)
It seems that everything is important here. There are too many messages.

The current site has plenty of potential to be more welcoming. I felt that I was taking on a project that I could characterize and design in the users’ best interest.

Scrolling down the page is accompanied by two attached banners on both sides of the page, creating visual excess.

The navigation bar is hidden behind lots of visual elements.
This makes it difficult to navigate conveniently and pleasantly.
The hierarchy of information is unclear and very scattered.

Distraction of unnecessary elements
Lots of unimportant information on the product page
Product page (OMG! 2)

Where is the product name? Barely seen
The price should be next to the product. Now it looks scattered
Redundant white spaces
Important information that is not visible
Market research and competitors

 

I started with several initial questions:

  • Who are the competitors?

  • What do they offer?

  • Do they have an eCommerce website, and if so, what are their strengths and weaknesses?

There are dozens of toy stores in Israel, both chain and private stores.

Direct competitors:

Happening, Hapirat Haadom, Idan 2000, Kfar Hashaashuim

Lesser known competitors

 Amigo, Isratoys, Tzaatzuim BeKlik

Surprising statistic

 

Two of the big competitors do not have an eCommerce website:

Happening and Hapirat Haadom. The websites for Idan 2000 and Kfar Hashaashuim

Competitive Analysis

 

The websites for Idan 2000 and Kfar Hashaashuim offer the option of digitally ordering items from select stores only. The smaller competitors rely solely on eCommerce websites, with no physical stores.

What was left, then, was to analyze the sites of the small competitors.

מתחרים-01.png
LEGO_logo.svg.png
I found the LEGO site to be remarkably inspiring. The hierarchy is very clear. Important sections are suitably highlighted, the text is easy to read and the design is of top quality. I was charmed by the fact that the faces of the site are the LEGO characters, and not children playing with LEGOs – this is an out-of-the-box thinking infused with some humor.

The goals

 

01

Clear hierarchy,
quick and easy navigation for users
02

Reducing visual overload
03

Clean and simple.
Uniform design

scheme

Wireframes

 

Home page

Top menu with a search bar. Login/register option. Gift card and gift search. Favorites and shopping cart.

The top banner will showcase the company, and underneath will be the daily deal, coupled with a side banner of revolving deals.

Main categories will be organized in a clear and clean drop-down menu. Information hierarchy is structured through clear visualization. The main page will showcase the best deals for the customer.

web_1920___1.jpg
Category page

The page presents a wide variety of items in image form surrounded by a light grey frame, designed to organize each item clearly and pleasantly. Users can filter items according to their needs by selecting subcategories, brands, price range, sex and age. In addition, users can select their preferred display order: popularity (default), price (low to high), number of items.

Sticky Filter Bar

It has been proven the sticky menus in eCommerce sites significantly improve user experience by keeping the users oriented and supplying them with greater control over their website journey. Users can quickly navigate through thousands of items and find the ones relevant to them.

I decided to design a horizontal rather than a side-bar, since there is an overwhelming amount of filters available.

Product page

The product page is comprised of one large image with a zoom in/zoom out option, plus video demonstrations, if available.

 

I decided to organize item information by using three distinct icons (the key information: age, what’s included in the product, and what isn’t, in order to make matters as clear as possible and leave little to the fine print).

 

Below that I included the rest of the information using relevant icons and optional expansion for more information.

Of course, in order to increase sales,

I added below a category of complementary products which the user can add to their shopping cart and prolong their shopping experience.

The design

The challenge in designing an eCommerce website lies in keeping it light and clean, despite the abundance of items it holds.

 

A single font and coherent aesthetic create a uniform experience which is viewed by the user as reliable and professional.

I chose to use the toys and personify them in order to differentiate Toys R Us from the competitors while also introducing humor (instead of images of children playing). As previously mentioned, my inspiration was the LEGO website.

The first impression from a website is its homepage, so I designed a banner with a strong image and bright colors, a clear, humoristic title (laughter is the best medicine…), as little text as possible, and to call-to-action banners.

web_1920___1.jpg
Category page

Product page

 
UI Design 
Toys R us had already have a brand design. I believe that the current logo is excellent, so I chose to use the same four dominant colors throughout the website.

Colors
 
#E41B5A
#EF8227
#105EA6
#76B648
#FCE3EB
#C8C8C8
#000000
Typography
 
כותרת 1
טקסט מחיר
טקסט מחיר ישן
טקסט תפריט
טקסט אייקונים
בולד 50
רגולר 22
רגולר 18
רגולר 27 
רגולר 25
Assistant
Aa
בולד 135
רגולר 50
 1 כותרת
 
 2 כותרת
 
Amatica SC
Aa
Buttons
 
24_NDMzIEJ1c2luZXNzXzI5 [Converted]-08.p
Default
Default
Default
Default
Hover
Hover
Hover
Hover
More Buttons - Filter sticky bar
24_NDMzIEJ1c2luZXNzXzI5 [Converted]-09.p
Selected
Default
Filters
24_NDMzIEJ1c2luZXNzXzI5 [Converted]-09.p
Icons
24_NDMzIEJ1c2luZXNzXzI5 [Converted]-10.p
שירות לקוחות
סניפים
פייסבוק
הצטרפות למועדון
Power Card
Input Forms
Multi-select dropdown menu
artboard___2.png
enabled
clicked
 see more - selected
selected
Cards
artboard___1.png
המבצעים המובילים
מוצרים משלימים
המוצרים המבוקשים ביותר
הקטגוריות המבוקשות ביותר
rawImage-removebg-preview.png

Next project