Nintendo Switch Online Redesign
An example of the current NSO app (left) vs. my final design (right.)
From the first moment I turned on my Nintendo Gamecube in 2003 I have been hooked on Nintendo products. The irrefutable charm present in their products is what first got me interested in UX and product design, and I thought redesigning one of their products would be the best way to show my love.
What is Nintendo Switch Online?
The NSO app is one that allows users to participate in certain in-game features on their Nintendo Switch, but through an app on their phone.
Research
For my research I conducted:
-5 user interviews
These helped me gain insight into the various desires users have for the app, as well as the things they do not like. I compiled my findings into post-it notes, and then sorted these out so that I could begin to analyze my findings.
Affinity Map
I sorted my interview results into seven different categories that would help me better organize my data. From these I could easily figure out what the overall consensus was on how people felt about NSO, and what I could maybe do to change it. The biggest issue I found was that people only spent a few hours a week on the app, if that. For future research if I were able to actually implement changes in the existing NSO app, it would be great to do A/B testing to see if these changes would lead to increased app sessions. However because I cannot actually implement these features, there is no way for me to tell if they would work.
I enjoyed organizing my work this way, however I feel like I should have adjusted the colors of the post-its. For example if I had made them red for negative, green for positive, and blue for neutral it would have been a lot easier to analyze my data. My overall findings from the data analysis can be found in the next section.
Problems
The main problems users had with the NSO app were Lack of versatility, functionality, and unique design.
The current NSO app is good at what it does, but doesn't aspire for more. It mainly serves as a way for players to do voice chat, scan QR codes, and have limited other in-game uses for a select number of Nintendo titles.
Having a well-established and designed Online system could be instrumental in the sales of future console rollouts. By redesigning and expanding the functionality of the NSO app, a more authentic Nintendo experience can be enjoyed by users.
In addition, users mentioned this "Nintendo Magic" which refers to the irrefutable charm of Nintendo's IP's, but is not present in the NSO app. This provided me the insight that the NSO app needs to have a stronger brand identity, so that users feel the same magic throughout their entire Nintendo experience. By improving the visual aesthetic of NSO, it could attract more potential users.
I then proceeded to perform my own analysis of the app, to figure out the information architecture and UI issues of NSO.
With my research complete, I could begin to construct my user flows for what new features I wanted for the app.
User Flow 1
The Animal Crossing section of the NSO app is likely the best part, yet there are key features missing. One thing users noted that they would want in the app was the ability to mass-send Dodo Codes to friends without having to individually communicate with each one.
Because of this I decided to add a way for users to do this from their new Friends tab. I wanted to keep as few steps for users as possible, while still breaking up the information as simply as possible. At the end of the flow, users have the option of sharing the code via text as well.
With flows complete, I could begin to work on the wireframes of my project, to figure out how to best layout UI and information architecture.
Never Sketching Again
So turns out I am NOT good at sketching wireframes and in the future I'm definitely going to use premade wireframes online so that everything stays to scale. I think I get a bit too excited about ideas and just sketch quickly which is good but also leads to wireframes that would be confusing to the outside perspective. I just wanted to sketch out the basic wireframes for my flow and have an idea for the type of navigation I wanted for my app. I was able to do so successfully, and began to translate my wireframes into hi-fidelity wireframes through Figma. This was also one of my first experiences with Figma so it is a bit rough, but stick around for a much prettier design at the end :)
Friends Screen
Messages
Home Screen
More Problems
So this was one of my first experiences with Figma and design as a whole, and so my first iteration is extremely rough. It's mostly a carbon copy of the Switch UI, without any consideration of how to adjust it for a mobile format.
While the first screen provides the information users may be looking for, it does not consider the mobile format, nor get creative with the space. I kept this in mind for my next redesign.
There is also a big issue with cropping, a lack of flat navigation, and the ambiguous icons that wouldn't help connect my flows.
I initially created a messages section, however after making it I considered the various safety issues of children possibly communicating with random adults online, and felt like it needed to be cut. In the future, if I could figure out how to execute the feature in a safe manner I would like to implement it.
After this design, I decided to take some time to read up on current design trends, and rework my entire design from the ground up.
Conclusion
My final design was far clearer in its navigation and UI, which overall led to a higher amount of completed user flows in my second round of testing.
I am overall happy with my final design. It clearly reimagines the NSO app, while adding more features and a stronger brand identity to the app.
In the future I would like to come back to this once I have a stronger grasp on UI design, better animations, etc to make a smoother user experience.
Again, this was one of my first experiences with Figma, and so I am more so just proud of what I completed.
If I could go back and change something from this design, it would be the addition of a messaging system, but again since this is an app targeted towards children, it could pose safety threats if not properly researched and integrated.
My key takeaway from this project, was learning to uniquely present information on a page, challenging myself to reimagine the information architecture in a way that would grab users. I'm excited to revisit this project in the future.
Prototype
Final Screens
