Making Shopping More Enjoyable

Responsive website redesign to improve the shopping experience.

Tinyrobot hero image
Tinyrobot Logo

Optimising the performance of an e-commerce site by improving shopping experience.

UX/UI Design User Research Redesign Prototyping

Background

Tinyrobot is a popular local video game store in Kota Kinabalu, Malaysia. They are a team of passionate people dedicated to selling of video games, console systems, and gaming accessories at both online & physical store.

Scope

• UX Design
• UI Design
• User research
• Data synthesis
• Redesign
• Usability testing
• Iterative design

Tools

• Figma
• Figjam
• Zoom
• Maze

Timeframe

January - February 2023 (4 weeks)

Project type

DesignLab case study

Shoppers found it difficult to browse and search for products

Despite having a competitive pricing and strong local presence, their online sales make up of approximately only 20% of their revenue. A quick look onto why this might be happening?

Multiple banners and poor visual hierarchy can create confusion and difficulty for users in navigating the site, leading to frustration and a suboptimal user experience.

Failing to emphasise key information impedes user accessibility and hinder the ability of shoppers to make informed decisions.

Inconsistent alignments can lead to a poor user experience and potentially deterring them from engaging with the website.

Before the redesign ...

Prior to redesign

Diving deeper on why this is happening?

8 participants were recruited to test out their current website to identify any potential challenges and frustrations.

Data before redesign
Data before redesign
Data before redesign

How about new users?

An additional 25 console game players were surveyed to gather their first impressions and feedback on Tinyrobot.

A majority of 60% would have left.

Only 16% were willing to give Tinyrobot a try.

“ Overall presentation is very messy , game titles are in banner forms - not easy to navigate, too much scrolling.”

“ There’s no search bar, I usually know what I want so I want to search immediately when I’m at the first page.”

“ Chaotic and messy! It’s very hard to find anything and the banners look like ads that links to 3rd party scam sites.”

Mobile-first design that provides a seamless shopping experience.

Intuitive

Whether it be information or specific products, Tinyrobot makes it easy for everyone to find them.

Clean

A consistent and clean design system, so that everyone can browse and shop with comfort.

Convenient

Rushing to get the latest game? No worries! You are just a few clicks away from getting them.

After the redesign  ...

Redesigned gif
The impact

Improved Customer Satisfaction Score (CSAT)

The CSAT improved from 16% to 84%, based on 25 survey respondents. This indicates a high level of customer satisfaction.

Improved Customer Effort Score (CES)

CES was used to evaluate the ease of customer's experience in searching for a product and completing the checkout process. The overall CES score improved from 2.25 to 4.25 on a scale of 1 to 5, indicating significantly reduced level of effort required.

Learning how other websites do it.

As around 78% of Tinyrobot's incoming traffic comes from indirect visits, improving the customer's user experience is crucial for enhancing Tinyrobot's online presence.

A competitive analysis was conducted to identify key areas for improvement that Tinyrobot could focus on.

Competitive analysis

Key takeaways:

Mobile optimisation, as 67% of Tinyrobot's visitations are through MWeb.

Improving the  sitemap so key functions and pages are easily accessible.

Enhancing the visual hierarchy and optimising the page layout to increase readability.

Improving the sort and filter functions to improve browsing experience.

How might we?

Key takeaways from initial testing.

Who am I designing it for?

Two user personas were created based on the user interviews to represent different groups of users affected by the identified problem. For instance, an avid gamer who knows exactly what they want and seeks a quick and easy purchase experience.

Gale Davies persona

Reorganising the User Flows and Sitemap

Prior to the redesign, shoppers had difficulty searching for specific products due to a nested search feature. Additionally, the absence of recommendations for top sellers and featured games further hindered their browsing experience.

By improving the user flow, I was able to enhance the search and browsing experience for shoppers.

User flow

Early concepts

Based on initial feedback from early sketches and ideation, I made continuous iterations to improve the design

Tinyrobot sketches

Reduce horizontal scrolling

Simplifying the paginations

Increase the visibility of CTA

Clearer labelings and groupings

Finer details (UI)

To enhance the attractiveness and accessibility of Tinyrobot's user interface, I made changes to their UI Kit while maintaining the original branding of the 8-bit design. My goal was to improve the visual hierarchy by introducing new font sizes and colour palettes that gave it a fun, gaming look.

UI

Does it work?

To obtain more insight on the redesign, I conducted prototype testing with 22 potential users. The test involved pre-ordering a product, browsing for a game, and completing the checkout process. While there were a few minor areas for improvement, the overall feedback from the prototype test was positive, with a completion rate of 95%.

“ Very gamey, clear menu and filters! Showing limited games per category is good, so that I don’t get overwhelmed.“

“ The layout fits the theme! I like the purple colour with the black/grey colour. The text also gives off a fun retro vibe.“

“ Overall, I think it was great! It was intuitive and easy to use. It looks much better now! Clean and modern design.“

Iterations

Based on user feedback and usability testing, I made continuous iterations to reduce distraction of the background image and to improve the visual hierarchy of various pages.

Iterations background

14% of the users found the background image distracting, so I reduced the opacity.

Iterations console type

18% wanted the console type to be more visible, and to shift the position of product quantity.

Iterations address

22% wanted the shipping address summary simplified, so I removed the text fields.

Final concepts

High fidelity wireframesDekstop screens

In summary ...

Intuitive

How did I make it easier for shoppers to find specific information or products? By optimising the location of the search bar and introducing a more efficient sorting and filtering system.

Clean

How did I improve the comfort of browsing? By improving the alignment, layout, and readability of various pages and introducing font sizes suitable for various devices.

Convenient

How did I make it more convenient for the shoppers? By making the Call-to-Action (CTA) more prominent, and by minimising unnecessary scrolling and distractions throughout the shopping experience.

If I had more time...

Learnings