Case Study: Nintendo Switch - OLED Model
Product Landing Page Design
Case Study: Nintendo Switch - OLED Model
Product Landing Page Design
Case Study: Nintendo Switch - OLED Model
Product Landing Page Design
Project Overview
The Problem
The Problem
The Problem
People use video games as a form of self care, either to spend time with friends or relax. They need a console that is both portable and easy to play with others, because people often use video games as a way to connect with others and themselves.
People use video games as a form of self care, either to spend time with friends or relax. They need a console that is both portable and easy to play with others, because people often use video games as a way to connect with others and themselves.
People use video games as a form of self care, either to spend time with friends or relax. They need a console that is both portable and easy to play with others, because people often use video games as a way to connect with others and themselves.
The Solution
The Solution
The Solution
Design the landing page with a focus on connection, by highlighting: the different modes of play, the ability to play with friends/family, and the features of the OLED model that make it ideal for both solo and co-op play styles.
Design the landing page with a focus on connection, by highlighting: the different modes of play, the ability to play with friends/family, and the features of the OLED model that make it ideal for both solo and co-op play styles.
Design the landing page with a focus on connection, by highlighting: the different modes of play, the ability to play with friends/family, and the features of the OLED model that make it ideal for both solo and co-op play styles.
Tools Used
Tools Used
Tools Used
Project Duration
Project Duration
Project Duration
3 week sprint (July 20th - August 9th)
3 week sprint (July 20th - August 9th)
3 week sprint (July 20th - August 9th)
My Role
My Role
My Role
• Competitor Analysis
• Interviews
• Affinity Diagram
• Feature Prioritization
• Sketches
• Lo/Hi-Fi Prototypes
• Competitor Analysis
• Interviews
• Affinity Diagram
• Feature Prioritization
• Sketches
• Lo/Hi-Fi Prototypes
• Competitor Analysis
• Interviews
• Affinity Diagram
• Feature Prioritization
• Sketches
• Lo/Hi-Fi Prototypes
Project Scope
Project Scope
Project Scope
Design a product landing page for any in-market consumer product of your choosing. Choose a product that has an established brand loyalty with a lot of content and assets to work with. Working prototype not necessary, just a design comp.
Design a product landing page for any in-market consumer product of your choosing. Choose a product that has an established brand loyalty with a lot of content and assets to work with. Working prototype not necessary, just a design comp.
Design a product landing page for any in-market consumer product of your choosing. Choose a product that has an established brand loyalty with a lot of content and assets to work with. Working prototype not necessary, just a design comp.
Design Process
Empathize
Define
Ideate
Prototype
Testing
Empathize
Define
Ideate
Prototype
Testing
Empathize
Define
Ideate
Prototype
Testing
Competitor Analysis
We analyzed four popular gaming consoles' landing pages to see how they highlighted important features of the console, and whether that presentation was effective or not.
User Interviews
We continued the research by conducting interviews on two self-proclaimed gamers and two non-gamers. We asked about their general purchasing decision making, feelings about gaming as a whole, and some specific questions regarding Nintendo and the Switch console.
Participant Quotes
"I don't play any, but my students play some games. Mostly educational, because I want them to be at least a little bit creative and use their brain."
Empathize
Competitor Analysis
We analyzed four popular gaming consoles' landing pages to see how they highlighted important features of the console, and whether that presentation was effective or not.
We analyzed four popular gaming consoles' landing pages to see how they highlighted important features of the console, and whether that presentation was effective or not.
Strengths
Strengths
Well-done website with interesting and interactive components
Well-done website with interesting and interactive components
Huge library of visual assets
Huge library of visual assets
High-quality website with graphics and animations
High-quality website with graphics and animations
Has a reputation for reliable consoles
Has a reputation for reliable consoles
Lots of hero images/videos showing gameplay
Lots of hero images/videos showing gameplay
Wide variety of games shown
Wide variety of games shown
Includes every tech spec. you could think of (could also be a weakness)
Includes every tech spec. you could think of (could also be a weakness)
Tech focused design
Tech focused design
Weaknesses
Weaknesses
Not a portable console
Not a portable console
Cannot scroll down on the website until you view animations
Cannot scroll down on the website until you view animations
Not a portable console
Not a portable console
Uses a lot of tech-language
Uses a lot of tech-language
Little emphasis on hardware features
Little emphasis on hardware features
Background color constantly changing
Background color constantly changing
Only utilize 2 colors, orange and black
Only utilize 2 colors, orange and black
Poor organization of content
Poor organization of content
User Interviews
We continued the research by conducting interviews on two self-proclaimed gamers and two non-gamers. We asked about their general purchasing decision making, feelings about gaming as a whole, and some specific questions regarding Nintendo and the Switch console.
We continued the research by conducting interviews on two self-proclaimed gamers and two non-gamers. We asked about their general purchasing decision making, feelings about gaming as a whole, and some specific questions regarding Nintendo and the Switch console.
Participant Quotes
Participant Quotes
"I don't play any, but my students play some games. Mostly educational, because I want them to be creative and use their brain."
“I play video games with others. It’s more fun to talk to people. Sometimes I won’t even be in the same game as people, I’m just talking to them.”
“As my friends and I have graduated high school/college and moved away, we can still come together and play games like we did when we were kids.”
“As my friends and I have graduated high school / college and moved away, we can still come together and play games like we did when we were kids.”
“I’m a mother to a young boy who plays a lot of games… his typing skills have improved, and he’s more outgoing in school.”
Define
Affinity Diagram
We created an affinity diagram to organize the information gained through the interviews. We grouped the data to better understand the common issues users experience on the current website.
We created an affinity diagram to organize the information gained through the interviews. We grouped the data to better understand the common issues users experience on the current website.
Purchasing Factors
Purchasing Factors
Purchasing Factors
Tech Specs
Tech Specs
Tech Specs
Gaming Sociability
Gaming Sociability
Gaming Sociability
Gaming Experience
Gaming Experience
Gaming Experience
User Persona
This user persona is a culmination of personality traits, goals, pain points, and actions of people we interviewed.
This user persona is a culmination of personality traits, goals, pain points, and actions of people we interviewed.
This user persona is a culmination of personality traits, goals, pain points, and actions of people we interviewed.
Age: 36
Occupation: Investment Banker
Location: Portland, Oregon
Annual Income: $110k
Goals
Play games with friends or alone
Bring her gaming on the go
Bond over a mutual hobby with her close friends
Frustrations
Needs a way to make gaming more mobile-lifestyle friendly
Wants to keep in contact with her college friends
Tech Proficiency
Tech Jargon
Gaming Sociability
Console Use
Soft Skills Set
Extraversion
Stress Management
Creativity
Age: 36
Occupation: Investment Banker
Location: Portland, Oregon
Annual Income: $110k
Goals
Play games with friends or alone
Bring her gaming on the go
Bond over a mutual hobby with her close friends
Frustrations
Needs a way to make gaming more mobile-lifestyle friendly
Wants to keep in contact with her college friends
Tech Proficiency
Tech Jargon
Gaming Sociability
Console Use
Soft Skills Set
Extraversion
Stress Management
Creativity
Framing the Problem
User Insight Statement
People use video games, and by extension their consoles, as a method of connection. Either as a way to connect with themselves and relax, or to connect with their friends and bond.
Problem Statement
By designing a landing page for the Nintendo Switch OLED and showcasing the ability to play on the go and easily with others it will encourage more people to purchase this console and bring the landing page inline with Nintendo’s mission statement “to put smiles on the face of everyone we touch”.
I Like, I Wish, What If
We created 'I Like, I Wish, and What If' sticky notes based on our interviewees responses in order to brainstorm ideas for the redesign.
We created 'I Like, I Wish, and What If' sticky notes based on our interviewees responses in order to brainstorm ideas for the redesign.
We created 'I Like, I Wish, and What If' sticky notes based on our interviewees responses in order to brainstorm ideas for the redesign.
I Like…
I Like…
I Like…
I Wish…
I Wish…
I Wish…
What If…
What If…
What If…
Framing the Problem
People use video games, and by extension their consoles, as a method of connection. Either as a way to connect with themselves and relax, or to connect with their friends and bond.
People use video games, and by extension their consoles, as a method of connection. Either as a way to connect with themselves and relax, or to connect with their friends and bond.
By designing a landing page for the Nintendo Switch OLED and showcasing the ability to play on the go and easily with others it will encourage more people to purchase this console and bring the landing page inline with Nintendo’s mission statement “to put smiles on the face of everyone we touch”.
By designing a landing page for the Nintendo Switch OLED and showcasing the ability to play on the go and easily with others it will encourage more people to purchase this console and bring the landing page inline with Nintendo’s mission statement “to put smiles on the face of everyone we touch”.
User Interface Inspiration
User interface patterns, text hierarchy, font formatting, and other design choices that we identified as potentially useful for our landing page.
Tap an image to see the reason it stood out to us.
Inspiration Collage
Ideate
Feature Prioritization
1.a
To narrow down features for the redesign, we picked out recurring sentiments from the I Like, I Wish, What If sticky notes.
To narrow down features for the redesign, we picked out recurring sentiments from the I Like, I Wish, What If sticky notes.
1.b
These features were also compared to the competitor analysis to see if they have already been used effectively.
These features were also compared to the competitor analysis to see if they have already been used effectively.
2
After filtering the features down, we plotted them on a matrix to determine priority.
After filtering the features down, we plotted them on a matrix to determine priority.
3
Sticky notes with stars indicate high-priority features.
Sticky notes with stars indicate high-priority features.
User Interface Inspiration
User interface patterns, text hierarchy, font formatting, and other design choices that we identified as potentially useful for our landing page.
User interface patterns, text hierarchy, font formatting, and other design choices that we identified as potentially useful for our landing page.
Big Text Headlines
Big Text Headlines
Big and bold titles help differentiate sections easier, so users do not get lost when scrolling. This style of font choice also directs users' attention to the most important information.
Big and bold titles help differentiate sections easier, so users do not get lost when scrolling. This style of font choice also directs users' attention to the most important information.
Accordion-style Drop Down Menus
Accordion-style Drop Down Menus
Utilizing accordion dropdown menus reduces the amount of text present on the screen at one time. Users may not need to view all information present within the menus.
Utilizing accordion dropdown menus reduces the amount of text present on the screen at one time. Users may not need to view all information present within the menus.
Game Slider
Game Slider
A huge variety of games can be shown by putting them in sliding cards. This example had them constantly looping so you could see what games are available to play.
A huge variety of games can be shown by putting them in sliding cards. This example had them constantly looping so you could see what games are available to play.
Inspiration Collage
Inspiration Collage
Prototype Iteration
See the progression of two sections on the page ('Meet the Family' and 'Design How You Play'), from sketches to the hi-fidelity version.
Meet the Family
Sketch
Lo-Fi
Hi-Fi
Design How You Play
Sketch
Lo-Fi
Hi-Fi
Prototype & Testing
Prototype & Testing
Lo-Fi Prototypes
Hero Image + Inclusive Video / Slideshow
Screen Size Comparison + Moving Game Ribbons
Technology Highlights
Style Tile
Prototype Iteration
See the progression of two sections on the page ('Meet the Family' and 'Design How You Play'), from sketches to the hi-fidelity version.
See the progression of two sections on the page ('Meet the Family' and 'Design How You Play'), from sketches to the hi-fidelity version.
Click an image to see a larger version.
Click an image to see a larger version.
Meet the Family
Meet the Family
Sketch
Lo-Fi
Hi-Fi
Sketch
Lo-Fi
Hi-Fi
Design How You Play
Design How You Play
Sketch
Lo-Fi
Hi-Fi
Sketch
Lo-Fi
Hi-Fi
Lo-Fi Prototypes
Click an image to see a larger version.
Click an image to see a larger version.
Hero Image + Inclusive Video / Slideshow
Screen Size Comparison + Moving Game Ribbons
Technology Highlights
Hero Image + Inclusive Video / Slideshow
Screen Size Comparison + Moving Game Ribbons
Technology Highlights
Hi-Fi Prototypes
Hi-Fi Prototype
After a series of informal user tests, we made one more iteration on the prototypes, implementing the feedback gained.
After a series of informal user tests, we made one more iteration on the prototypes, implementing the feedback gained.
After a series of informal user tests, we made one more iteration on the prototypes, implementing the feedback gained.
This is a fully-interactable link to the Figma prototype, feel free to click around!
This is a link to the fully-interactable Figma prototype, feel free to click around!
This is a link to the fully-interactable Figma prototype. However, because a mobile version was not created, the viewing experience is optimal on a larger device.
Conclusion
Conclusion
Conclusion
Future Iterations
The requirements for the project were only to create a desktop version of the page, not a mobile version too.
Correctly following the mobile-first design approach could’ve given the desktop version more time to evolve.Although we did interview two gamers and two non-gamers, we should have used a larger and more diverse sample.
Our participants ranged in age from 25-55. Interviewing people younger and older may provide a different POV.A major constraint we faced was the lack of Nintendo-related resources available to us. This is reflected in the lack of interactable elements on the high-fidelity prototype.
With more time we could have created some of those resources ourselves. If we were actually working with the company we could have requested their assets.
The requirements for the project were only to create a desktop version of the page, not a mobile version too.
Correctly following the mobile-first design approach could’ve given the desktop version more time to evolve.
The requirements for the project were only to create a desktop version of the page, not a mobile version too.
Correctly following the mobile-first design approach could’ve given the desktop version more time to evolve.
Although we did interview two gamers and two non-gamers, we should have used a larger and more diverse sample.
Our participants ranged in age from 25-55. Interviewing people younger and older may provide a different POV.
Although we did interview two gamers and two non-gamers, we should have used a larger and more diverse sample.
Our participants ranged in age from 25-55. Interviewing people younger and older may provide a different POV.
A major constraint we faced was the lack of Nintendo-related resources available to us. This is reflected in the lack of interactable elements on the high-fidelity prototype.
With more time we could have created some of those resources ourselves.
A major constraint we faced was the lack of Nintendo-related resources available to us. This is reflected in the lack of interactable elements on the high-fidelity prototype.
With more time we could have created some of those resources ourselves.
Feature Prioritization
1.a
To narrow down features for the redesign, we picked out recurring sentiments from the I Like, I Wish, What If sticky notes.
1.b
These features were also compared to the competitor analysis to see if they have already been used effectively.
2
After filtering the features down, we plotted them on a matrix to determine priority.
3
Sticky notes with stars indicate high-priority features.
Style Tile
