Lionel
Product Designer

Nintendo Switch Online App

Native App redesign to enhance your gaming experience
(Concept)

Image alt tag
Nintendo Switch Online App

Tools (from left to right): Adobe XD, Asana, InVision Studio

About

Nintendo of America is a subsidiary of Nintendo Co. Ltd., and there is one product that is not useful to their users, the Nintendo Switch Online App. The Nintendo Switch Online App redesign brings smiles and usability to its users.

My Role

Product Designer - Solo Project

Client

Nintendo of America Inc. - Concept Project

The Challenge

Currently, you can only use features like "Voice Chat" & "Game-Specific Services". The lack of features and usability of the NSO App has resulted in a negative experience driving users away.

The Goal

Add more features that users can interact with while making the native app feel useful.

The Process

User Interviews

To start this project I performed 5 user interviews to understand the pain points on the already launched native app. Users expressed that they didn't like the Nintendo Switch Online App (NSO) because:

• Lacks Features / Stuff to do (5)

• Doesn't feel useful / Feels like a waste of time (2)

• Unable to access the store (4)

*Number inside ( ) means the number of users that gave the same or similar answer.

Since this native app launched in 2017, I decided to browse multiple platforms to gather more insight into the users' experiences. I researched platforms like Apple Store, Google Play, and YouTube, to gather more feedback from the users.

The insights from the platforms validated the experience that users still have since 2017.

View data from platforms here.

Nintendo Switch Online App

Sample of Feature Inventory from native mobile apps

C and C Analysis

Now that I understand what the user pain points are, I am curious as to how the competition is handling these. To arrive at this understanding I conducted a Feature Inventory Analysis, which gave me clarity on how other platforms address these issues.

I compared the NSO App to the PlayStation and XBOX native mobile apps. As seen in the chart to the right, the NSO App lacks the majority of the features that the competition offers.

Nintendo Switch Online App

Created using Miro

Persona

Based on the interviews I set up the persona. I referred to them throughout the entire product development process to ensure the users' preferences and reasons to use the product were always in my mind.

I decided to construct the persona similar to an affinity map to allow for an easier scan of the information.

User Journey

To understand how customers find and interact with the services provided by Nintendo, I created a Customer Journey Map. From the table below, I saw that users need a solution early in their interactions.

Being able to visualize where the users are encountering their pain points helped me understand where I could introduce a solution to their problems. In this particular case, the solution is to add a new feature (online friends) to the Nintendo Switch Online App.

Nintendo Switch Online App

User Flow

I mapped out the users’ steps to see how I could add more features to the native mobile app, without complicating their current flow, to help them reach their most important goals with the product.

Looking at the users' insights, I noticed 2 flows that are predominantly missing:

  • How to see which friends are online?

  • How can I see my Nintendo Switch Online Status?

Nintendo Switch Online App

User Flow for "Which Friends are Online" on the Nintendo Switch Console

While there wouldn't be any change to the number of steps in the user flow for checking which friends are online, by adding this feature to the mobile native app the users' experience is heavily impacted because it will make it more comfortable for users to check who is online.

To see both Users Flows click here

Nintendo Switch Online App

Sitemap

I decided on the main categories of the native mobile app with an Online Card Sorting session. I had 5 participants who group the new and existing features and based on those groups I learned that users expect the navigation to be in an ambiguous structure*.

*Ambiguous Structure = The structure is oriented toward the topics or tasks the users want to do instead of alphabetical or chronological order

Design Phase

Having researched and defined the users, I feel confident to start designing a solution that meets the users' needs.

To kickstart the design process, I sketched some screens as to how the new design would look. Since I'm the only designer on this project I did not create a design studio, which is my usual approach. However, as soon as I had the sketches done I was able to start creating the low-fidelity wireframes.

Sketches

Nintendo Switch Online App

Lo-Fi Wireframes

The low-fidelity wireframes were used to perform the first round of usability tests. Users were able to get a first look at how the redesigned version of the Nintendo Switch Online App will look and feel.

User Testing

Before launching the product, I did a testing round in order to reveal possible usability problems. I performed a moderated usability test where users (3) performed tasks and provide feedback about their experience.

Testing Results Summary:

  • 100% of the users were able to complete their tasks with 0 errors.

  • Users averaged 4 seconds to complete the tasks successfully.

  • All users expressed that they were highly confident in performing the tasks

Users' suggestions after Usability Test:

Nintendo Switch Online App
Nintendo Switch Online App

Mood Board

Mood Board

After gathering the insights from the usability tests, I decided to put together a mood board that will inspire the hi-fi wireframes designs.

I decided to look for images that resemble Nintendo's brand and try to bring those elements and colors into the Nintendo Switch Online App.

Nintendo Switch Online App

Hi-Fi Wireframes

Now as the mobile app begins to take form, I moved into Adobe XD to design the hi-fi wireframes with the iterations from the usability test insights.

Prototype

If you would like to click through the prototype, click the screens below.

Next Steps

For the next steps, I will do another round of usability tests on the hi-fi wireframes and more iterations if necessary.

The next round of usability testing will provide us with the validation to move into the final product or with the feedback on how to improve/launch the native mobile app.