Design System: Nintendo
Design System: Nintendo
Redesign the existing design system of a well-known company as part of a course requirement for Northwestern University.
Duration of Project
March 2024- May 2024
materials used
Figma, FigJam
Project role
Lead Designer
objective
To understand what goes into designing a Design Operation (DesignOps) by modeling after existing DesignOps of well-known brands and redesigning its design system.
Why Nintendo?
I chose Nintendo as my focus because, like many others, it was a significant part of my childhood. Nintendo is a globally recognized brand that has transcended generations. I admire how user-friendly their products have become over the years, making it easy for first-time players to get started right away. Through this DesignOps initiative, I hope to gain a better understanding of the company's inner workings, how they market themselves, and identify potential problem areas that can be addressed.
design-ops canvas
Within the DesignOps, it is important to know who Nintendo is, what they do, how they communicate, how are they structured, what constrains them, and anything else that is relevant.
From research, I was able to understand that Nintendo is a global company that provides entertainment in the form of video games and consoles, provides online accounts to make online purchases to download new gaming content, provide special offers and discounts for games on special holidays (example March 10 Mario Day), and provide information of upcoming games.
For their process of recruitment, they look for candidates with a bachelor’s degree in research, computer science, engineering, or a related technical field. They also accept associate’s degrees in electronics. Once the candidate has gone through the hiring process and accepts the offer letter, Nintendo provides employee benefits, community outreach programs, and team-building events. Nintendo employees follow these four rules: 1) Set each other up for success. 2) Ask, listen, and learn. 3) Find ways forward. 4) Thoughtfully deliver.
Based on how Nintendo is structured itself seems to have a nice balance of autonomy and dependence. For instance, designers have ownership of their original ideas, ask questions, and conduct research for innovative ideas. On a grander scale, across all teams, it is encouraged to share supportive feedback, collaboration, and effective communication. Not only that, but Nintendo provides resource groups that promote employees coming together based on shared backgrounds (examples: B@ND and Nintendo Women and Allies).
If you want to look into more information on how Nintendo structures its management and how they communicate, you can click on the button below to look into more detail the Design Ops Canvas of my research process of Nintendo.
Operating Model
Operating Model
The image in the background is the Operating Model. It shows the levels of leadership within Nintendo starting at the top of the model showing the Global Leadership roles then going down the model showing the VP Global Department Heads, Directors, Leads, Mid-Level, and Junior roles. To look at the Operating Model in more detail, please click the button below where you will also have access to the Design Ops Canvas.
Career Ladder
Career Ladder
The background image provides a comprehensive illustration of Nintendo's career ladder model. It details the various levels of advancement available within the company and highlights the specific skills and competencies that employees must develop and demonstrate to achieve promotion at each stage. This model not only serves as a guide for career progression but also emphasizes the importance of continuous learning and professional growth within the organization. To look at the Career Ladder in more detail, please click the button below where you will also have access to view the Design Ops Canvas and the Operating Model.
design system audit
To better understand Nintendo’s current design system, it is helpful to examine other partner companies owned by Nintendo to identify potential opportunities that may be overlooked. Out of the 11 companies, I looked into The Pokemon Company, Retro Studios, and Intelligent Systems. From the 3 companies, I compared and analyzed their websites with the Nintendo website under the 10 following categories: Layout, Color, Usability, Tone, Button and Form Field, Navigation, Context, Iconography, Accessibility, & Typography.
Analysis
Each organization endeavors to cultivate its distinct brand identity, which is reflected in the design elements incorporated into its websites. The websites of Nintendo and The Pokémon Company display notable similarities in their layout, iconography, typography, color palettes, and navigation structures. This resemblance may result from their shared focus as e-commerce platforms, which attract substantial user traffic for product ordering and purchasing. Consequently, both websites are designed to facilitate an intuitive and user-friendly experience. To enhance usability, I would recommend the incorporation of a darker background color, as this adjustment would improve visibility compared to the current all-white backdrop.
Intelligent Systems and Retro Studios are both organizations that maintain a partnership with Nintendo. Their respective websites function as portfolio platforms, detailing the history of the games they have developed in collaboration with Nintendo. These sites include concise descriptions of their companies, as well as comprehensive instructions, tutorials, and guides about the games they have produced. Furthermore, they provide information regarding career opportunities within their organizations. Nevertheless, there exists considerable potential for enhancement in the overall design and user experience of these two websites.
In evaluating the website of Retro Studios, I commend the use of a dark background, as it significantly enhances readability for individuals with visual impairments. Nevertheless, I propose that the website better reflect retro gaming elements, rather than resembling a pit crew for NASCAR racing. It is advisable to replace the steel blue color with a dark purple shade, complemented by vibrant neon accents in the company's logo. This design approach should draw from the two example images previously provided. Furthermore, I recommend adopting the typography from the first image, as it would serve to better represent the company’s branding. Finally, an update of the social media icons on the homepage is necessary to ensure the website remains contemporary and relevant.
Intelligent Systems require considerable attention to improve user experience. Upon further examination of the website, it has become evident that it is primarily designed for a Japanese audience, as the majority of the game pages are presented in Japanese. Moreover, even after attempting to change the language settings, the content largely remains in Japanese. Given the company's affiliation with Nintendo, it is essential to incorporate additional language options to serve a broader user base effectively.
Furthermore, the navigation of the website needs significant enhancement. The Japanese language button on the homepage should not function as a link to advance to the next page. Additionally, the layout of the second page should align more closely with that of the official homepage, which exhibits a more refined design.
To further improve usability, I recommend adjusting the layout of the second page to position the menu options at the top as a header or to introduce a menu icon that can reveal a slide-out menu. If the preference is to retain the menu options on the left side of the screen, it would be advisable to reduce the text size on the left to allow for more space dedicated to images and callouts.
To view the Design System Audit in more detail, please click on the button below where you will also have access to the Design Ops Canvas, Operating Model, and Career Ladder.
Design system: ui kit
With everything that has been gathered, now it’s time to focus on Nintendo’s design system. There were a total of 3 versions of the UI Kit due to revisions and critiques from classmates and my instructor, Alicia Warren Hossein. The UI Kit is complete with an introduction with version notes and contains the following five design guidelines for Nintendo:
Fonts: Defines typography choices, ensuring consistent and readable text across all interfaces.
Colors: Establishing a cohesive color palette, including base, primary, secondary, and neutral colors to maintain brand identity and visual hierarchy.
Spacing: Provides guidelines for consistent spacing between elements, leveraging a modular approach for scalability and alignment.
Icon Usage: Specifies usage guidelines for both custom-designed and material-design icons, ensuring visual consistency and clarity in iconography.
Components: Provide guidelines for 16 interaction components based on iconography, colors, spacing, and fonts mentioned.
Below are four images of the UI Kit. In order are the title page of the UI Kit, material icons page, type system, and color system. Underneath I included the link to the Figma file of the UI Kit for those who want to see it in more detail.
That completes the walk through of my DesignOps and Design System for Nintendo. Thank you for your time and consideration and please feel free to view the rest of my work below.