My website is currently still under development.

Passion Project

Nintendo Application 2.0

Developing a new approach to enhance the user experience of Nintendo products through their mobile application.

Responsibilities
UX & UI, Wireframing, Prototyping

Timeline
3 Weeks

Team Size
Solo Project

Wireframing

An issue I encountered with the previous version of my Nintendo app revision revolved around the visibility and size of certain interface components. In these new wireframes, my goal was to streamline my approach, placing a greater emphasis on content placement and ensuring its usability on a mobile phone. Although my previous concepts held merit, they overlooked the user experience, particularly regarding button interaction and text size. Considering these factors greatly facilitated the layout process within this framework.

Heading

As a long time fan of Nintendo, I was inspired to enhance the performance of the Nintendo Switch Online App. Despite Nintendo's recent updates to their app, I feel as though it still lacks essential features that could significantly enrich the user experience. My goal is to not only refine the existing Nintendo app, but also to improve upon my previous development efforts. In this iteration, I have incorporated additional features including a news page, a profile section, and a messaging component. I've also introduced new fonts and optimized various page elements for an improved mobile experience.

Iconography

With my previous design, the icons were inconsistent throughout the 5 pages that I made. Some icons had bolder lines, some were not shaped to the same size, and some didn’t feel like they belonged with the rest of the icons present. This time I made sure to take more care with my selection of icons and keep them consistent through the whole redesign.

Typography Choices

Initially, my original font choice was Montserrat. Upon reflection after three years, I found that it wasn’t the right choice. I wanted a font that was more reflective of Nintendo's unique blend of playful & professional identity. This made me go with the new choice of Museo Sans and the Nintendo Switch Ui font. Both fonts are already part of Nintendo's design palette, so visually it would make the app feel a bit more authentic.

Colour Palate

Choosing colours for this application was an unexpectedly complex task due to the added personality I wanted to add to it. I used the traditional Nintendo red, paired with pure white, and two shades of off black/grey for primary text. Most pages feature variations of 90-10 or 30-60 red and white ratios to add visual diversity. The profile pages, which allow users to change their background colour and image, posed a particular challenge. I needed to make sure that the chosen colours from a simple colour wheel would harmonize properly with the design elements and overall theme of all the other pages within the app. (See the profile screens described below in the Final Deliverables section)

The Final Deliverables & Changes

There were a few pages that had large updates, and some pages with small updates. So in this context I think the best thing is to go by page and list the differences in general.
Overall Project Changes
  • Font change from Montserrat to Museo Sans / Nintendo UI Font
  • General font size increased for greater readability
  • Changes to some game images
  • Added new icons for the home navigation and general pages
  • Bottom nav now has text to show the page name to user
Changes By Page

Home Screen

I wanted this screen to be tidy and to the point, I also included a bottom navigation that would get you to where you want to go more efficiently. This was the first page of the redesign, so I wanted to make sure the text and sizing changes were done properly here so I could continue that consistency throughout the other screens.

  • Added a red line on the left of Header tittles
  • Changed the design for the Online Friends Section, making it easier to read and better to touch
  • Updated Latest News Images
  • Added Time offline feature in Online Friends section (shows how long ago someone was online)
  • Removed small invite button in Online Friends
  • Added online status’s (white=Online / Yellow=Away / Red=DoNotDisturb) to the friends images on the home and message pages

Profile / Settings ScreenHome Screen

This section was mainly meant to have most of the app and profile options. Changing the icons to be consistent was important here. You can easily view your total points, friends and games at the top. Towards the bottom, you have general app settings.

  • Changed all icons displayed on this paged.
  • Changed font to Nintendo font
  • You can now access your new profile screen from your profile icon here

Messages Screen

This screen was completely redone, as I wasn’t happy with the legibility prior. I felt that being able to connect the player even if they aren’t playing games is an aspect that Nintendo has missed on, so I wanted to capitalize on that point. Being able to know if your friend is in a state to play based on his online status was another feature I found important to add, and having your active parties at the top of the screen would make it easy to jump in and converse with friends.

  • Added a search bar to filter contacts
  • There is now a group chat section at the top of the screen for easy access. This section is on a carousel, so you can keep scrolling to see active parties.
  • Removed the invite button from the chat message section. Made the chat interface more consistent.
  • Increased text size for legibility.
  • Removed the display showing current game played to better space information.
  • Added a start “new message” button to start new conversations or voice parties.

‍

Friend Message DM Screen

A screen that showcases what happens when you click a friend from the messages page. You can chat, call or start a larger group chat within the screen.

  • Newly Designed Screen
  • Added phone call and group chat buttons to the top of the screen.
  • Includes a feature to check on your friend's personal profile page
  • Bottom navigation is replaced with the message bar.
    • Message bar contains an input area, a voice record button, a gallery button as well as a + button for camera and files.
  • Include a gradient behind your friends messages (inspired by Instagram

Games Screen

A section responsible for showing your gaming library. You can click games to see details on your play time and the game itself. You can also access online specific services for the games that you own at the top of the screen.

  • Made the Game Icons for specific services squared instead of a rectangle

Shop Screen

This section is mainly for purchases of games or (potentially) consoles/accessories. I wanted to move in a direction that felt similar to the Nintendo.com shopping experience so that there is a bit of unity between app and website. The intention was to make a section that is easy to find what you're looking for, but give the user other suggestions based on their gaming library.

  • Brought the red section of the screen down (similar to the settings page).
    • Included a bag icon to access your cart
    • Included a search menu at the top header to quickly search for the game you're looking for, as well as showing similar games
    • Included a filter carousel below the search bar to further organize games.
  • Added a see all section in order to expand on sections within the shop sections (for example, if you want to see more bestseller games, you can go to a page with just that).
  • Redesigned the game box to more resemble the Nintendo website design.
  • Removed theme picture (could be placed under certain situations).
  • Added date of release, price, console and a favourite button to each game box.

News Article Screen

Being a section where the user has to do the most reading on, I wanted to make sure that the legibility was on point. It is a simple-structured page that can also link to other articles as well.

  • *Newly Designed Screen
  • Used the thumbnail image as the top header for news articles
  • Tittle of article placed inside red box along with
  • Museo Sans font weight on body text can bounce between 500-300 weight if needed.
  • Included date of article and read time.

Profile Main Page

These screens were created to have more of a personal section for the app as a whole. Your able to change the base colour of your profile and make your own adjustments to your profile, making it feel personalized for the user. This can make the process of adding or viewing other profile a bit more interesting and worthwhile.

  • *Newly Designed Screen
  • Function added to upload your own profile background
  • Structured on a tile based system where you can customize sections within your settings
  • Shows users friend code
  • Includes an about me section
  • Page colour adjusts to the background Image chosen
  • Displays Play Activity
  • Friend list is also displayed
↑

Let's keep in touch! |

stwillyx2@gmail.com

| Brampton / Ontario / Canada