Tools (from left to right): Adobe XD, Asana, InVision Studio
Lionel
Product Designer
Nintendo Switch Online App
Native App redesign to enhance your gaming experience
(Concept)
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.
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.
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.
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?
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
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
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.
-
Sign in Screen
-
Home Screen
-
User Profile Screen
-
Membership Screen
-
Family Group Screen
-
Save Data Cloud Screen
-
Additional Information Screen
-
How-to Voice Chat Screen
-
Settings Screen
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:
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.
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.