professional project · UI / UX DESIGN

TOYTRON ONLINE MALL RENEWAL

Toytron mall is an online shopping mall that sells Toytron's toys. This online mall was never renovated since it was first created in 2017. With time, the Toytron Mall site became increasingly outdated, and several problems were discovered.

VISITE TOYTRON MALL

CLIENT

- Toytron

MY ROLE WAS

- 80% of UX Renewal strategy

- 30% of UI Design

tool

- Figma

- Photoshop

- Html / Css

I WORKED WITH

- Toytron marketing team

- Project manager

- Fellow designer

- Developer

YEAR

- APR 2020 ~ MAR 2021

ACCOMPLISHMENT

1. Sales increased by 42% (292.5K USD to 416K USD).
2. The number of customers increased by 47% (8.1K to 15.6K).

This project is part of the Toytron Mall maintenance project (May 2019 - August 2022) and Influenced accomplishment of 350% revenue growth and 1,022% customer increase in 2021 from 2018 for an online toy mall: increased 280.7K USD sales in 2021 from 81.7K USD sales in 2018, and 23K online customers in 2021 from 2K in 2018.

PROBLEM

Toytron mall was never renovated since it was first created in 2017. With time, Toytron mall failed to meet primary customer needs, and it's layout became too complex. As a result, customers left Toytron mall, and sales decreased.

INSIGHTS FROM
MOUSE SCROLL HEATMAP

To figure out the user's problems more deeply and understand them, I looked for the mouse scroll heatmap to see how much people scroll down the page.

There were two facts I can tell from this heatmap.

1. Users' interest was high in the main banner area.
2. The rate of reaching the bottom of the website was about 20%.

I thought there were two possibilities why the user's scroll-down rate was only 20%.

1. This is because users already found the toy they want on the main banner. So they didn't feel the need to scroll down to the bottom page and left. However, the percentage of clicks from the main banner to product purchase was significantly lower.
2. Whenever users scrolled down to find the toys they wanted, they left because they were bored or exhausted.

I suggested two strategies to solve this problem from these data and possibilities.

1. The main banner should motivate users to purchase the toys.
2. The readability of the entire website should be improved so that users can easily find toys.

main customers

We learned from Toytron data that over 70% of Toytronmall customers are parents aged 25-44. I found in the research that their age group is the millennial generation, which seeks fun experiences. I shared these findings with the team at the meeting.

RENEWAL GOAL

At the meeting, we defined the renewal goal based on previous steps. The goal was to Increase Toytron Mall's sales by reflecting the millennial customers' needs and improving readability! How? by providing them fun experience and reorganizing the layout. So, basically we thought when customers experience fun while navigating the website, this will increase customer satisfaction, leading to increased sales.

SOLUTION FOR FUN

2. Toytron Video

To enhance the website's fun factor, I embedded Toytron's YouTube videos, guided by research highlighting the importance of videos in online shopping. Around the video, I added themed decorations for better user immersion. Below the video, the related toy product is displayed, seamlessly connecting viewers' interest to potential purchases.

SOLUTION FOR READABILITY

1. Main page layout

As the first solution for readability, I improved the main page layout. Before renewal, the Toytron website layout gave customers too much information at once. I thought delivering too much information increased the complexity of the website and gave customers visual fatigue, and eventually made them leave. So, after meeting with the client, we decided to leave only the necessary sections. They gave me a list of essential sections on the main page. I placed these sections in the layout in order of importance.

CHALLEGNE

WHat TOYTRON WANTED

After I delivered the layout design, I met challenges from the client. Toytron has 15 brands with over 1,000 toys, and each has a team! They all wanted to stand out from customers. So, they wanted their brand and its products to be displayed in the middle of the website. If I made the layout as Toytron wanted, users would have to scroll down the long page. If users cannot find the toy they want, they will get annoyed and never return. To solve this challenge, I discussed this issue with the team.

CHALLENGE

WHAT I PROPOSED

I brought three wireframes to the meeting, including layout A, the layout the client wanted. I showed the second and third layouts to my team, and we agreed that C is a layout that allows users to achieve their goals quickly.

SOLUTION FOR READABILITY

2. IMPROVED LAYOUT

In this layout, I grouped Toytron's brands on the left, and when users selects a brand they want, they see the brand's most popular or newest products on the right. Also, the maximum number of products users can see is 6. Because according to Miller's law, people usually remember between 5 and 7 things. I thought that if this website showed too many products, users would get tired and leave the website.

FINAL DESIGN

BEFORE

AFTER

MAIN BANNER

TOY FOR GIFT

TOYTRON'S PICK

TOYTRON'S YOUTUBE

BRAND PICK

What I've learned

GOOD!

1. It was a challenge to secure usability by finding harmony and balance among many brands and products, but it was good experience to meet stakeholders and persuade them by presenting logic and evidence.

2. After the renewal, customers and sales increased compared to the previous year. It was meaningful not because I did it alone but because I worked with various stakeholders such as client marketers, project managers, and fellow designers. Through this project, I learned that good teamwork and communication could make a project successful.

TOYTRON ONLINE MALL RENEWAL

TOYTRON ONLINE MALL main page RENEWAL

HOW I GOT TO SOLUTION

FINAL DESIGN