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.

SOLUTION_2

IMPROVING READABILITY

Menubar layout

As the second solution for readability, I improved the menubar layout.

SOLUTION_2

IMPROVING READABILITY

Menubar layout

Toytronmall wanted to keep all of Toytron's 15 brands in this menu bar. That was challenging because Toytron's brand numbers grew over time. Before the renewal, there were 13 brands, but now there are 15, and at some point, it may become 16 or 17. I worried that users must bear the complexity as the brand grows further. The user has to face at least over 15 choices from the first screen on the menu bar. Complexity increases as the number of options increases. Users then feel fatigued and eventually leave.

SOLUTION_2

IMPROVING READABILITY

Menubar layout

I researched how the menu bar was organized while comparing competitors' websites. and selected some best cases and shared them with my team members at the meeting. In the process, we selected the best layout for Toytron Mall's menu bar.
‍
The advantages of this layout are: When the user clicks the menu icon in the menu bar, the menu screen appears. Even though the number of Toytron brands continues to increase, we neatly put numerous Toytron brands on one screen.

Then I showed the client two layouts (one the customer wanted and another we chose) and explained why ours was better, and they agreed with me.

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.

JLee
AboutGraphicResume

client project · UI / UX DESIGN

Toytron Online Mall Main Page Renewal

Renewing a cluttered online store into a fun and simplified design, achieving 47% customer growth and 42% sales boost

ABOUT THE PROJECT

- Toytron, a company based in Seoul, South Korea, is an online shopping mall that sells toys. This online mall was never renovated since it was first created in 2017. Over time, the Toytron Mall site became increasingly outdated, and several problems were discovered. I was assigned the task of renewing Toytron Mall as a UI/UX designer at a design agency.

GOAL

- Transitioning from an online store focused solely on sales to a distinctive, consumer-friendly Toytron online store.

OUTCOME

- The renewal strategy was confirmed by the team and client, and successfully implemented on the Toytron online mall.

BUSINESS IMPACT

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

VISIT TOYTRON MALL

CLIENT

- Toytron

MY ROLE WAS

- UX / UI Design

TOOL

- Figma
- Adobe Photoshop

PLATFORM

- PC Web
- Mobile Web

I WORKED WITH

- Toytron Marketing Team
- Project Manager
- Fellow Designer
- Developer

YEAR

- January 2020 ~March 2020

problem

Toytron Mall, with declining sales and competitiveness, had these issues:

01

Boring product display style

02

Lack of utilization of Toytron's unique videos

03

Overcrowding of too many products

solution

I proposed three solutions to transform Toytron Mall into a customer-friendly shopping mall.

01. Making the boring toy display style more interesting

78% of Toytron Mall customers are millennials aged 25-44. Research indicates that they prioritize engaging content when shopping online. I aimed to transform the presentation of Toytron toys from a boring display style to an engaging one that highlights their unique and fun features.

Before
-Just product photos and headlines alone cannot convey any information or capture customers' interest.
After
- I replaced the product photos with children playing and the headlines and text with phrases that highlight the product features to better capture customers' interest.

PC web and Mobile web application

The newly redesigned toy display style has been applied consistently to both the desktop web and mobile web versions.

After
Before

02. Capturing customers' interest and driving product purchases with toytron's unique videos

Toytron has unique videos featuring its characters. However, Toytron was not utilizing this valuable asset. Research indicates that video content on online shopping sites can increase purchase rates. Therefore, I placed Toytron's character videos on the online store to share captivating stories about Toytron toys, attract customers' interest, and encourage them to purchase the toys.

UI exploration

I presented three design options, and the first option was selected due to its balanced visual elements.

03. Improving readability by reducing the number of colors and products

The old Toytron Mall crowded too many toys into one space. I streamlined the layout by reducing the overlapping ten areas to four essential ones.

Before
- Many sections and products make it hard to grasp everything at once, decreasing readability.
After
- I conferred with the client and kept only the essential sections for the website operation.

The client wanted all 11 brands' product visible to customers.

They suggested displaying the products of all 11 brands on the main page. If all 11 brands are displayed in the new online mall as Toytron suggested, customers will have to scroll continuously, which may lead to customer attrition. Therefore, I proposed a new alternative, which was eventually chosen.

Before
- If all 11 brands are listed, customers will have to keep scrolling down, which will cause them to feel fatigued and lead to customer attrition.
After
- Instead of displaying all the brands, I gave customers the option to select the brand they want. This way, customers don't have to experience the fatigue of scrolling down.

More in the Desktop.

You are now reading the mobile version of the site. For detail case study, visit https://www.juyoungux.com with a desktop browser :)

final delivery

The renewal strategy I proposed was confirmed by my team and the client, implemented on the Toytron online mall, and then delivered to the client.

* Among the remaining renewal strategies, the main banner style design,
header design, and footer design were done by my fellow designer.

business impact

After the renewal, Toytron Mall had growth in both sales and customer numbers compared to the previous year.

The revenue of Toytron Mall increased from $292k in 2019 to $416k in 2020, a total increase of 42%, and the number of customers grew from 8.1k in 2019 to 15.6k in 2020, a total increase of 47%.

Thank you for scrolling!

What I've learned

Growing as a UX Designer: Proposing Improvements Through Problem Analysis

1. Through this project, I learned that the role of a UX designer is to always propose better alternatives. When a client requests a specific design, there's always a reason behind it. Analyzing those reasons and offering improved solutions is an essential part of a UX designer's responsibilities.
‍
2. I learned the importance of thoroughly analyzing current problems. For this project, I meticulously analyzed the previous Toytron Mall to identify its problems and strengths. This analysis guided me in developing a renewal strategy for Toytron Mall.

About the project
Problem
Solution 01
Solution 02
Solution 03
Final
Business impact
Previous Project
kiosk ux design for museum visitors
Next Project
2040 Active lifestyle Vehicle UI/UX