Case Study

Evolve Toys Website Redesign

A Canadian e-commerce provider of educational toys based on the STEAM approach to teaching.

A collage of laptop screens displaying an online toy store website featuring a young boy in a blue shirt with hands on hips, a girl in a gray t-shirt pointing, shopping cart with toy items, and various toy product images and descriptions.

BRIEF
Redesign their existing website and better communicate their brand tone.

ROLE
Creative Direction
UI/UX
Website Design

CLIENT
Evolve Toys

Before getting started on the project, we sat down with the clients to define the problem with their existing website. Why were they looking to redesign their online presence? What needed fixing? There were a couple of things that they wanted to focus on:

  1. Elevate their brand to communicate to their audience that they are a high-quality toy supplier.

  2. Before the redesign, they had a high bounce rate due to poor user experience on the website. The aim of the redesign was to decrease bounce rate and keep prospective customers on the site for long enough to convert.

01.
Defining the Goal

02.
Research & Exploration

Site Audit

Before anything, the first thing I wanted to do was a site audit of the existing website, and complete my own analysis of what exactly the pain points were from a brand and user experience perspective.

Screenshot of a website with a navigation menu and shopping categories, including sign-up, search, shopping, story, learn more, educators, gift registry, and login options. Categories are organized by age, gender, best sellers, tags, trending topics, brands, and new arrivals. Offers free shipping in Canada on orders over $49 and gift wrapping.

  1. The navigation is noisy, resulting in a lack of focus.

  2. The ‘Shop’ button forces the user to know specifically what they are shopping for, which can deter the user from the beginning from browsing the product inventory altogether.

  3. Some navigation elements like ‘Learn more’ have no meaning - learn more what?

  4. Free shipping and gift wrapping, although great pros for the user, take up a lot of real estate on the navigation.

Webpage displaying a promotional section for science toys featuring a child in a white T-shirt, with text 'I AM A SCIENTIST' and a skateboard, electro dough kit, and a botanical science kit as featured products.
Two sections at the top showcase toys: on the left, a colorful structure made of small round objects, resembling a castle; on the right, a decorative plant pot with a small mushroom-shaped ornament and flowers. Below, a section explains the concept of STEAM toys including science, technology, engineering, art, and math, with five circular icons representing each subject.

  1. Upon landing on the site, there is no introduction, easing the user into the website, resulting in the user being lost from the very beginning of the website.

  2. Overall site lacks branding, and does not promote a ‘high-end’ look and feel, which reduces credibility.

Digging into Data

After defining what the main usability issues of the site were, with the assistance of our marketing analyst, we walked through the google analytics of the website and interpreted the findings to see which pages create the most conversion, which didn’t and why.

Screenshot of data analytics and advertising campaign reports, including tables with metrics such as users, sessions, bounce rate, clicks, cost, and conversions for different device categories and ad groups.

03.
Ideation & Wireframing

Sitemap

Before diving into the ideation, I created a sitemap to better understand and categorise the information on the website.

A website sitemap with numbered sections for shop, story, media, register, login, shopping cart, search, account, blog, 404 error, and footer, each section color-coded and labeled with subcategories.

Starting with pen and paper, I explored different ways we could place the content of the various pages in a way that best told Evolve Toy’s story. I looked at how to combine content and commerce in a natural way, to reduce the friction of online shopping, and to show the user is what readily available from the get-go while simultaneously showcasing the brand itself.

Sketches of multiple mobile app or website interface layouts, including wireframes for homepage, product page, cart, and checkout, with notes on design elements and features.
Screenshot of a website homepage design mockup with sections for a logo, navigation menu, promotional collection, featured products, and placeholders for images and videos, all in grayscale.
Online store webpage displaying science products with filters for price, age, category, brand, and gender. Includes product images, names, ratings, and add to cart options.

04.
Designs

As it was a toy store, finding that balance between luxury and friendliness was going to be a challenge. In our initial conversation with the clients, we explored various sites and brands to gauge the direction that they wanted to go in with their brand and website.

A collage of various website homepage screenshots, including fashion, jewelry, watch, and community websites.

Style Tile

Before diving deep into the designs, I shared a couple of style tiles with the clients to see if they were aligned with the look and feel presented.

A webpage with a purple sidebar showing a 3D red rocket with checkered black and white pattern on top, and two buttons labeled 'BUTTON'. The main area has colored circles, the heading 'Latest Releases', and a paragraph about making money online through selling products and advertising.
A graphic design webpage with a red rocketship with black and white checkered top, colorful circles at the top, and two blue buttons labeled 'BUTTON'.

Hi-fidelity Designs

Once alignment was received visually, I transformed the lo-fi wireframes into hi-fidelity wireframes, adding all the details in, ensuring it aligned with the brand.

Multiple webpage screenshots of an online toy store, featuring products, stories, reviews, media, registration, and login pages, with a focus on educational toys and highlights of toy features and customer feedback.

05.
Development Handover

After finalizing the designs, we moved into development. I sat down with the developer and discussed the design and experience of the website, offering basic prototypes to assist them in understanding the flow. I also provided documentation to ensure that the designs were accurate as possible.

Finally, we would do a QA as a team to ensure that the developed site was aligned with the final designs.