top of page
RING FIT image background.png
Platform

Website

Role

UX/UI Design

Project Type

Student project 

Tools

Figma

Photoshop

Illustrator

The challenge

From Family-Friendly to Gamer-Approved: The Challenge of Redesigning Ring Fit Adventure's Website.

Overview

Ring Fit Adventure is a fitness game created by Nintendo for their popular Switch platform. With Ring Fit Adventure, users can get a full-body workout while playing a fun and engaging video game. The game comes with two physical controllers, the Ring-Con and Leg Strap, that allow players to perform a variety of exercises and movements as they explore the game's world.

The problem

The COVID-19 pandemic has brought about many changes, including a surge in demand for home workout options. Ring Fit Adventure was launched during this time as a substitute for gym-goers, and its website was designed to target a family-oriented audience. However, as the world was slowly returning to normal, the website's messaging and design are not relevant anymore. The website needs to be revamped to target the actual audience of the game - gamers who already own the platform and want to incorporate exercise into their gaming routine.

Problem key points:

  • Ring Fit Adventure's website is not effectively targeting the game's actual audience.

  • The website's visuals and language do not align with the gaming community's aesthetics and preferences, leading to a lack of interest and conversion.

  • The website requires a redesign to cater to the specific needs and desires of gamers looking to combine exercise with their gaming experience.

The goal

For this project, I redesigned the official website of Ring Fit Adventure. My goal was to create a website that targeted the right audience. To achieve this goal, I conducted a research to learn more about the game, its valued audience and how the gaming community communicates. I aimed to create a website with clear hierarchy and appropriate messaging. The ultimate objective of the website was to provide a seamless buying experience while enhancing the user experience.

"Ring Fit Adventures" official website

The solution

To solve the problem of Ring Fit Adventure's website not effectively targeting its actual audience, I planned to revamp the website with a new design that focused on targeting gamers who wanted to incorporate exercise into their gaming routine.
To achieve this:

  • I used a color scheme and imagery that by research are more appealing to gamers, such as darker colors and more dynamic images that convey a sense of movement and action.

  • I used a more streamlined layout with clear hierarchy and messaging, highlighting the features and benefits of the game to increase its engagement.

I also divided the categories into pages in order to make more space and logical hierarchy, and added small features with great impact such as Testimonials section and expanded "Help Center" with relevant support.

New Homepage

Complete HomePage design.png

New Testimonials section

New Help Center page

More engaging copy

Page 4 - BUY NOW.png
RING FIT image background.png

Research

The research was conducted through two methods to gain a better understanding of current gaming website trends and user preferences.

 

Firstly, I conducted a web search to explore popular gaming websites, their designs, and their features. This helped me identify common themes and current trends in the gaming industry.

Secondly, I conducted a qualitative survey with two groups - gamers and non-gamers - to gather insights into their preferences and engagement levels with different types of websites.

By combining both methods, I gained a comprehensive understanding of what appeals to both groups and what makes a website engaging for users.

Benchmark research

I conducted a benchmark research, analyzing both fitness and gaming websites to gain insights into what design elements and messaging resonate with consumers.

Based on my research, I identified several key findings that informed the redesign:

  • Fitness websites often use bright and bold colors, and focus heavily on before-and-after photos and transformation stories to showcase their products.

  • Gaming websites often use darker color schemes and more dynamic imagery, with messaging that emphasizes the immersive and fun aspects of their games.

  • Successful gaming and fitness websites often use a clean and modern design, with easy navigation and a clear call-to-action to purchase or sign up for the product.

User Research

To gain better understanding on the experience with the official website of Ring Fit Adventure, I conducted a qualitative research consisting of 27 participants, divided into two groups;

  • Group 1 - people who identify themselves as Gamers

  • Group 2 - people who don't regularly play video games

"It's not just some game... It's NINTENDO! but It felt like it was trying to appeal to a broader audience and lost its gaming focus"

60%

of Gamers found the website not geared towards their interests

30%

of participants found the website not informative enough

85%

Non-Gamers prefer to go to the gym rather than buy a fitness game

Insights

Research shows that the gaming community has specific preferences when it comes to website design and messaging.

Some key discoveries from my research include:

  • Gamers prefer darker color schemes with pops of bright colors, as well as dynamic imagery that conveys movement and action.

  • Clear and concise messaging that highlights the features and benefits of a product is important to gamers, as they often have limited attention spans and want to quickly understand what a product offers.

  • Gamers are more likely to trust and purchase from a website that has a clean and modern design, as well as easy navigation and a seamless buying experience.

The research findings were used to guide the redesign of Ring Fit Adventure's website and here are the elements that were incorporated:

  • The redesigned website incorporated a modern and clean design with clear hierarchy.

  • Testimonials section was added to showcase the effectiveness of the product and increase its credibility, similar to the transformation stories commonly used on fitness websites.

  • Darker color schemes and dynamic imagery were used to convey movement and action while emphasizing the immersive and fun aspects of the game.

  • More calls-to-action buttons and engaging explanations were added to encourage visitors to purchase the product.

New "Game Modes" page

LoFI Page2 - GAME MODES.png

Refined product information page

Site map

The site map was created based on the analysis of benchmark and user research and analysis.

It was designed to ensure that the users can easily navigate through the website and find the information they need. The main sections are clearly defined and labeled, and there is a logical flow to the content. This helps to create a seamless user experience and encourages users to engage with the website.

Ideation process

After obtaining a general idea of the user's tasks, I began the design process.

Sketches

I started with sketching low-fidelity wireframes to make the solutions visual and pop out so I can implement them in the best way. 

Home page

Game Modes page

About the product

Wireframes

After completing the sketches and ensuring they met the necessary requirements, the next step was to create and improve those wireframes using Figma.

Working on the wireframes allowed for a more detailed visual representation of the revamped website's structure and layout.

Final Design

Thanks for watching!

bottom of page