Adding social features to enhance the Nintendo Switch Online experience
ROLES
UX Researcher
UX/UI Designer
TIMEFRAME
80 hours
TOOLS USED
Figma
Maze
Google Forms
PROJECT TYPE
Independent Project
Feature Addition
BACKGROUND:
What is Nintendo Switch Online?
In 2018, Nintendo launched Nintendo Switch Online, an online gaming subscription where users can play online multiplayer games, use cloud saves, and access a library of Nintendo games. In September 2020, the total number of users subscribing to Nintendo Switch Online reached 26 million. In September 2021, subscribers increased to 32 million.
There have been mixed reviews since the release of the subscription service. The smartphone app and the small selection of cloud-save-supported games have been criticized by fans.
Benefits of Nintendo Online Membership:
Online play
Game save data is automatically backed up to the cloud
Smartphone app - voice chat with friends while playing certain games. Enhances certain games
THE PROBLEM:
THE SOLUTION:
Incorporate long-awaited social features to increase user engagement and retain Nintendo Switch Online membership renewals
Message friends to play online
Users that want to play online can now message and invite their friends to coordinate online play.
Users can then utilize the voice chat option once both players enter a game mode that supports voice chat.
Share game captures
Users can also share game experiences through captures (screenshots and videos).
Users can share captures within the app or through social media platforms. These social features will better enhance the Nintendo Switch Online experience by increasing user engagement.
RESEARCH
PRELIMINARY RESEARCH:
An average rating of 2.9/5 stars on the App Store
After doing some background research on the Nintendo Switch, the online membership, and the mobile app, I did a deep dive into users’ current experience with the app. I wanted to fully understand why the app has been criticized by fans. I accomplished this through competitive analysis, a user survey, contextual inquiry, and user interviews.
But first, I began by reading app reviews from the App Store and Youtube. The average rating is 2.9/5 stars, with a majority of users saying that the app was a disappointment... yikes. Users expressed frustration due to the lack of a messaging feature.
“There’s nothing to say about this app, because it literally doesn’t do anything, apart from a horribly implemented voice chat system, a keyboard for Animal Crossing, and some extra gear for Splatoon 2.”
COMPETITIVE ANALYSIS:
A feature inventory reveals the Nintendo app's lack of many basic features
As someone who has minimal gaming experience and has never owned any type of console before the pandemic, I wanted to explore two direct competitors of Nintendo (Playstation and Xbox) and conducted a feature inventory to visualize what their apps offer. I also explored Discord due to its voice chat capabilities. I was not familiar with any of the competitors’ features and shortcomings and used this opportunity to assess the products objectively.
CONTEXTUAL INQUIRY:
How does a competitor app like the PS app work with the Playstation console?
I was curious to obtain first-hand knowledge of a user’s behavior while gaming. I observed a user while they utilized the Switch, NSO app, PS5, and Playstation app. I noticed how the PS app’s features closely matched the main navigation of the PS 5’s home screen. I gained a better understanding of the problem space by observing a player navigate through a competitor app and console.
KEY TAKEAWAY:
Features on the home screen of the PS5, such as the explore page, the Playstation store, and the game library were present in the app’s navigation.
While the Switch has a home screen with similar features, those features were lacking in its mobile app. Would the app be more widely used if it also had Switch console features, such as the eShop, News, or Album?
Screenshot of current Nintendo app screen, (missing navigation)
Nintendo Switch Home Sreen (Navigation options, from left to right: Nintendo Switch Online, News, eShop, Album, Controllers, System Settings, Sleep Mode)
USER SURVEY
Unveiling Collective Sentiments and Experiences
I then conducted a user survey tailored to Nintendo Online players to understand general feelings and experiences with the Nintendo Switch, Nintendo Switch Online Membership, and its mobile app. I also wanted to know what features were mostly used on the console that weren’t already on the mobile app. I received 12 total responses.
77.7%
have not used the mobile app for 6 months or greater
25%
have unsubscribed from Nintendo Online because they stopped playing Animal Crossing (ACNH)
41.7%
have used the app for voice chat before
41.7%
Played ACNH more than the other 3 games supported by the app
ACNH gameplay was the main motivator for users to check the app frequently and utilize voice features.
These survey findings confirmed my assumptions that some casual players started playing games/owning a console because of ACNH’s popularity. ACNH introduced many new players to gaming, but if players finish the game or stop playing, there isn’t much motivation to continue using the app or maintaining their online subscription. Additionally, users weren’t checking the eShop as often as I thought - when users are turning on the Switch, users tend to automatically start playing instead of browsing the eShop or looking at customization options with the NSO feature.
User Interviews - let’s hear what players are saying
Finally, the core of my research was a series of remote one-on-one user interviews with Nintendo Switch Online users, focusing on better understanding their gaming habits, attitudes, and experiences with any competitor products. Here are some research insights after compiling an affinity map to organize common themes. View the affinity map in full here.
FINDING 2:
Missed Gaming Opportunities
Both casual and avid players like to view if their friends are online and see what they are playing, but don't always want to open another app to message them and ask them to play.
FINDING 3:
Lack of App Utilization
Participants who are currently not playing any of the supported games (ACNH, Super Smash, Splatoon, or Splatoon 2) are not utilizing the mobile app in any capacity.
FINDING 4:
Coordinating Online Play
Participants preferred apps that resemble the Playstation and Xbox apps with messaging capabilities to coordinate online play and voice parties.
With these insights, it was clear that a messaging feature would not disrupt a Nintendo player’s gaming experience because it is an expectation from both casual and avid gamers. I was able to move forward with defining the problem statement and user personas that I would design for.
DEFINE & IDEATE
How might we help casual Nintendo players gain a better sense of community and maintain their subscriptions by connecting with friends?
How might we help avid gamers use the app more frequently in order to share game experiences?
BUSINESS AND USER GOALS:
Ensuring that a feature aligns with business and user goals
In order to make the best decisions for adding features to this app, I wanted to get a clear overview of Nintendo’s business goals and user goals from my research. I wanted to ensure that a messaging feature and album feature aligned with both business and user goals.
IDEATING SOLUTIONS:
From Insights to Design Decisions
With the business and user goals in mind, I finally solidified my design decisions based on user research insights. Here’s a breakdown:
Insight: Avid players tend to share and send game captures to friends, whether it is statistics or their teams.
Design decision: design a feature to share game captures from the album.
Insight: both casual and avid players view if their friends are online and see what they are playing, but sometimes they don't want to open another app to message them and ask them to play.
Design decision: design a feature to message online friends and coordinate play.
Insight: When turning on the Switch console, users said that they did not check the Nintendo Switch Online functions, such as seasonal avatars, or eShop often to browse.
Design decision: Possibly add these features at a later date when additional research validates the need to add these features.
USER PERSONAS:
Meet Chrissy and AJ!
Based on my research findings, I created two distinct personas - a casual gamer and a more avid, competitive gamer. These two personas helped me align the design to a target audience and empathize with their individual needs and pain points.
SITE MAP:
Exploring the possibility of rethinking the app’s current information architecture
In order to better understand the app’s current information architecture (IA), I first created the App (Site) Map for the Nintendo Switch Online app. This allowed me to understand where a messaging feature and an album feature would exist based on user insights. Since the app did not have an existing bottom navigation, the features on the home page are displayed as first-level information.
Remember that Nintendo Switch console home screen from earlier?
I also explored the possibility of rethinking the IA from the ground up. This would be accomplished by adding a bottom navigation to the app since it already exists on the Switch console’s home screen (which includes the album feature). However, given that the scope of the project is to add a feature, I opted to augment the app as opposed to reworking the IA. Below are two versions of the site map exploration. I opted to continue with option 1.
Option 2: Navigation on bottom for new features
Option 1: Adding messages and album features to the home screen as-is
USER FLOWS AND TASK FLOWS:
Visualizing the paths Chrissy and AJ might take
With Chrissy and AJ’s personas in front of me, I revisited their goals, needs, and motivations in order to create the user and task flows. I started with the user flows first to visualize the paths Chrissy and AJ might take, and any alternate paths that arose from user decisions. I then created the task flows accordingly, which helped me determine the key screens to create in the upcoming wireframes. View the full user flows and task flows here.
DESIGN
Low-Fidelity Wireframes
Early concept sketches to mid-fidelity wireframes
With the task flows side by side, I began to sketch out the key screens for the album and messaging features. I also explored some conceptual screens for the app that are unrelated to the current flows.
MID-FIDELITY WIREFRAMES:
A top priority: maintaining consistency with the original UI
One of the biggest challenges for this project was to fit in the new visual information within the existing UI. I digitized the designs, taking careful consideration of the app’s existing UI. Maintaining consistency was a top priority. I utilized screenshots from the existing app to recreate elements on the app's home page.
Flow 1: Message a friend to play online and start voice chat
Flow 2:Share game capture within app
UI LIBRARY:
Creating custom components that blend into NSO’s existing design system
To make sure the features would integrate seamlessly into the Nintendo Switch Online App, I needed to make it look and feel like the product users were already accustomed to.
Without access to the Nintendo Switch Online App’s existing UI system, I recreated elements by closely studying pre-existing elements from screenshots. I then created custom components that blended into NSO’s existing design system.
A recreated component library for the new Nintendo feature
aeri
Animal Crossing: New Horizons
Message
aeri
Offline
Message
aeri
Online
Message
User online, playing a game
Profile card
User offline
User online
Voice chat pop up
Please avoid using offensive language.
Start voice chat?
Start
Later
A preview of custom components created with the Nintendo design system in mind
HIGH-FIDELITY WIREFRAMES
The initial key screens are now ready for usability testing
After applying the component library and styles to the mid-fidelity wireframes, I created a high-fi prototype.
TESTING AND ITERATIONS
USABILITY TESTING METHODOLOGY:
5 Nintendo Switch Online App Users tested out the high-fidelity prototype through unmoderated testing with Maze.
Due to time constraints, I chose unmoderated testing via Maze to identify areas of confusion as noted in Maze's heat map feature. I could then identify overall screens that caused the highest amount of misclicks.
USABILITY TESTING RESULTS:
Overall, users stated that the features blended seamlessly within the app
All flows were completed successfully by all 5 users. Although the group chat flow had one user complete it indirectly, this user was able to recover from any errors/hiccups
The messaging flow felt “familiar” to users, who expressed that it was surprising that this feature has not been added yet to the NSO app
Prioritizing test results
I created a feedback grid of things that worked, things to change, questions, and ideas. After seeing some common themes, I grouped some clusters into common themes and mapped them based on severity of the issue and frequency of the issue.
Before
After
Increasing component touchpoint size + updating UI for a more familiar group chat flow
Since 4/5 users clicked the profile image instead of the component checkmark, I ensured that the entire component was clickable, including the profile image, when selecting friends for a group chat. In addition, to improve familiarity in the group chat flow, the selected friends now appear at the top to reduce any confusion about who was selected.
Before
After
Improving visibility of the “Share” feature
The share icon was not very obvious where it was originally located. While moderating two users completing this task flow via Google Meet, I noticed that both users stalled at this screen for a few seconds before finding the share icon. Since sharing the screenshot was the purpose of this task flow, I changed the share icon to a primary button while still utilizing the icon. I referred back to design inspiration from the capture screen in a competitor app (Xbox) that displays a “Share” CTA.
Before
After
Preventing a false botton to imrpove the album sharing flow
In the original screen, there was a false bottom that prevented all users from scrolling down. To avoid a false bottom, I added a footer that states how many total captures are currently in the album. This provides a visual cue that there are more photos below the fold.
Final Prototype
View Prototype
REFLECTIONS
KEY TAKEAWAYS:
Understanding Information Architecture
Understanding IA helped me logically map out the steps during the transition between low and high fidelity wireframes in a way that made the most sense to users during testing.
Initially, I had an ambitious idea of reworking the IA with the addition of my new features, but given the limited scope of the project, I decided against it. However, creating two versions of the site map helped solidify my understanding of IA in general, and I am happy that I explored that option. If I had more time, I would explore the possibility of reworking the IA to include a navigation similar to the Nintendo Switch console itself. This might provide the opportunity to add additional Switch features, such as the Nintendo eShop, to the app if enough research and resources supports it.
Test Earlier and Often
Although I did a preliminary usability test with family and friends in the mid-fidelity stage, I wish that I would have user tested earlier with my target users, and more often. Due to time constraints, I did not get to a second round of usability testing after priority revisions. However, I learned how valuable usability testing is to validate my designs, and this feedback loop is exactly what is needed to confirm my design decisions.
Next steps:
Perform round 2 of usability testing on the high-fidelity prototype
Explore the possibility of reworking the IA to include a navigation similar to the Switch console itself
Closing Thoughts
Although I wouldn’t consider myself a gamer, I have always appreciated Nintendo’s ability to captivate the casual player like myself. I enjoyed exploring solutions for this product!
This sprint gave me valuable insights on how to design and build upon an existing design system. I was challenged to create a consistent and believable UI by designing something that was both novel yet familiar to Nintendo Switch Online users. This project also emphasized the importance of testing early and often. Although I wanted to test one more time, the loop between usability testing and iterating on my design played a critical role in the final product. I am looking forward to applying my learning from this project to future endeavors in mobile design.
