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
New Testimonials section
New Help Center page
More engaging copy
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
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.