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 ...

Diving deeper on why this is happening?

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

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 ...

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.

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?

HMW enhance the user-friendliness and efficiency of the checkout process?
HMW make the search process more convenient?
HMW improve the brand trustworthiness?
HMW improve the browsing experience for customers?
HMW provide game recommendations or suggestions for novice gamers?

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.

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.

Early concepts

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

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.

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.

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

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

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

Final concepts

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...

I would introduce an email opt in. By doing so, shoppers can stay up-to-date with the latest news and promotions from Tinyrobot. This can help to improve its overall marketing strategy and communication with customers, thereby increasing customer engagement and loyalty.
I would continue working on The Lab, which is Tinyrobot’s blog. This can further increase their online visibility and attract more potential business opportunities.

Learnings

As a non-console player, it was challenging to conduct usability testing with seasonal gamers and understanding their jargons. This taught me the importance of collaborating with diverse user groups.
A well-structured navigation and information hierarchy is essential to prevent shoppers from abandoning a site due to difficulties in searching for specific products.
Avoid investing too much time and effort into one initial design before obtaining early feedback and conducting testing. Designs should be iterated based on feedback, so seek input early and frequently.
Conducting a competitive analysis can be extremely useful in identifying current trends, user expectations, and areas for improvement. Therefore, make the most of this opportunity and conduct thorough research.
Active collaboration with stakeholders is crucial to ensure that everyone is aligned and working towards the same goals. This guarantees that design decisions are informed by business objectives.

Making Shopping More Enjoyable

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

Background

Scope

Tools

Timeframe

Project type