PlayStation Metamorph - The Next Gen of Gaming
COMPANY
PlayStation
ROLE
Interaction Design, UI/UX Design, UX Research, Design Strategy, Controller Interactions, Tablet Design, 3D Modeling
TEAM
1 Designer (Me), 2 Researchers (Me)
TIMELINE
7 Months
CHALLENGE
The goal of this project was to design what the next generation of gaming will look like for PlayStation based on careful analysis of PlayStation's history, its competitors, and the overall gaming industry.
SOLUTION
Introducing PlayStation Metamorph — a revolutionary gaming console that allows players to switch between TV, tabletop, and handheld modes. With online streaming and mobile game downloads, players have access to a huge selection of games. Plus, the detachable controllers and built-in cameras open up the world of VR and AR gaming.
DESIGN STRATEGY
Research Behind Our Product Design Direction
We developed a research plan to explore the perspectives of PlayStation and non-PlayStation users.
We conducted secondary online research and primary research through interviews to uncover the user experience with consoles, what motivates them to use their current console, and what would make them switch. Our findings provide important insights into the motivations and considerations of users.
Perception of PlayStation as a Brand
How Does PlayStation Identify Itself As?
-
PlayStation identifies itself as “an interactive and digital entertainment company,” but they are more known as a gaming company.
-
Where “Play has no limits.”
-
Their ‘Mission’ is to be a “company that inspires and fulfills your curiosity.”
-
For ‘Vision,’ it’s more so for Sony, “Our unlimited passion for technology, content, and services, and relentless pursuit of innovation, drives us to deliver ground-breaking new excitement and entertainment in ways that only Sony can.”
How Do Others Identify PlayStation?
Competitive Landscape of Products and Services
We examined the products, services, and prices of PlayStation and its competitors in the gaming market to see where PlayStation aligns and identify any gaps that PlayStation can fill.
Console Prices Compared
-
PlayStation 5 has a higher resale value than Xbox, potentially due to higher demand and less availability.
-
Nintendo Switch offers TV, tabletop, and mobile play modes and is more affordable than PlayStation and Xbox.
-
Xbox surpasses PlayStation by providing PC and mobile game streaming for a monthly fee of $15, whereas PlayStation currently only offers PC game streaming for $18.
SWOT Analysis: Competitive Analysis Summary
Value and Sustainability of PlayStation
THE INDUSTRY: EMERGING TRENDS IN THE GAMING INDUSTRY
-
Cloud Gaming Growth: Cloud gaming has surged by 244% in the past two years, with major players like Google and Amazon entering the market.
-
Portable Gaming Popularity: The rise of portable gaming, exemplified by portable consoles, such as Nintendo Switch and Steam Deck, along with console-quality games on mobile devices.
-
Revival of Nostalgic Games: A trend towards reviving classic games, accessible through services like PlayStation Plus Premium and Xbox Game Pass.
-
Esports Rise to Mainstream: Esports has gained equal popularity to traditional sports, fostering a strong sense of identity and loyalty among fans.
VALUE: IS PLAYSTATION IN A GOOD PLACE STRATEGICALLY?
-
Strategic Positioning: PlayStation is likened to the "Apple of gaming," embodying core values of freedom and wonder, creating a hip, edgy, and luxurious brand image.
-
Missed Opportunities in Mobile Gaming: Identified missed opportunities in competing with Nintendo Switch and establishing a presence in the mobile market.
-
Exclusive Games' Driving Purchasing Power: Emphasized the critical role of exclusive games in driving console purchases and outlined the importance of the PS Plus Premium membership plan.
-
Challenges in Services: Acknowledged challenges in bridging competitive gaps through services, citing usability issues with features like PS Remote Play.
SUSTAINABILITY: WHERE CAN THINGS FALL APART?
Recommendations: Integrated Product Approach
We have identified consoles and services as two areas that need to be looked at in order to ensure long-term sustainability. PS needs to push innovation further, not just in terms of graphics, but also in console design and usability. They should also make sure to always keep an eye on what gamers want, in order to live up to their by-gamers-for-gamers ideology.
-
VR Gaming Accessibility: Address the elusiveness of VR gaming by making it more accessible, considering pricing barriers that have limited its widespread adoption.
-
AR Experiences: Explore opportunities in Augmented Reality (AR) gaming experiences, providing a unique and immersive way to gamify real-life scenarios.
-
Mini Cloud Gaming Console: Propose the development of a PS5 Mini, offering a cost-effective alternative that allows game streaming on a compact console, reducing hardware and storage requirements.
-
Revival of PlayStation Portable: Enhance market presence by reviving the PSP with high-quality graphics and customizable design, positioning it as a competitor to Nintendo Switch and Steam Deck in portable gaming.
-
Mobile Expansion of PS Plus Premium: Counter Xbox's competitive advantage by expanding services, especially PlayStation Plus Premium, to mobile devices, aligning with evolving gaming trends.
-
Bringing PS Classics to mobile: Leverage the newly launched mobile gaming division by revamping classic PlayStation games for mobile formats. Encourage users to experience beloved titles in a fresh and mobile-friendly way.
Combine the recommended strategies into a cohesive product that leverages PlayStation's resources and capabilities, aiming to revolutionize and enhance the accessibility of future gaming experiences. These recommendations aim to address current challenges and strategically position PlayStation in the evolving gaming landscape.
UI PATTERN ANALYSIS
Analysis of Competitors Design Patterns
I researched design patterns in existing gaming systems, including the PS5 and the last PlayStation Portable console, as well as competitor consoles like the Nintendo Switch and Steam Deck. I examined content distribution, UI behaviors, and navigation interactions used to move between different parts of the system to brainstorm ways to translate the PS5 system to include touch-based interactions.
PS5: TV and Controller-Based Interactions
Parts that I wanted to implement from the PS5 are enlargement and outline of the hovered media, as it would provide echo feedback or confirmation of selection, which would be especially useful when navigating with a controller and/or when connected to a TV. Having dedicated tabs for the contents; as they have here, a section for games and media, the search functionality, quick account settings access, and a large hero image.
Nintendo Switch: Account Accessibility and Controller Indications
What I found interesting about the Nintendo Switch Console was the management of all accounts at the Home Screen; unlike PlayStation’s, the user logs in at the previous screen by default. Additionally, the controller button indication bar at the bottom of the screen facilitates navigation.
Steam Deck: Navigation and Quick Settings
I enjoyed the Steam Deck’s wireframe, with the bottom content toggled through the toggle switch and the Quick Settings side menu that allows users to manage their console without diving too deep into the settings. The Steam Deck also doesn’t have a lock screen for quick access to games
LO-FI WIREFRAMES
Low-Fidelity Wireframes Based on Design Strategy and Pattern Analysis
Home Screen Dashboard Explorations
Referencing the design patterns and user research gathered, I sketched out several design concepts. I scraped the directions that were too similar to each other and was left with my top three directions.
I ended up going with Concept B, as it focused more on the gaming aspect of the system but would still be able to access media and ps apps with a simple toggle. I would exclude the search function as I believed all content was easily accessible and would include the controller button indication bar, as it would increase accessibility and would declutter the main space from button indicators.
For Concept B, the user would enter already hovered over a game and would easily be able to toggle left or right to the Apps and Media sections. The tiles wouldn’t have metadata below it but instead would be contained in the hero image. Instead of the bottom button indicator bar, the button indicators would be contained on the screen.
PS Menu Explorations
For the PlayStation Menu, I wanted to keep it simple. The menu would follow PlayStation’s design system closely, though components would be translated to be more touch-intuitive.
For example, continuing the design pattern of the toggle sections and menu options resembling buttons. The PS menu would also be located on the side for better accessibility to a user’s touch range when holding the tablet from the sides. Additionally, including a Quick Actions menu allows users not to dive deep to change a specific setting.
DESIGN SYSTEM
Design System
As I was translating the sketches to high-fidelity wireframes, I was simultaneously building up my design library with icons, components, text styles, and a color palette.
HI-FI WIREFRAMES
Translating Low-Fidelity Wireframes to High-Fidelity
Before creating my high-fidelity wireframes, I like to form a user flow that guides me on what screens to build for each part of the user’s journey. I indicate what controller and touch-based interaction are taken between each screen and show all the different paths that could be taken.
Close-Ups
I added a dark gradient to the top section to increase content visibility, as it would create contrast from any header. The gradient leads the user’s eyes to the main content and still provides openness compared to a solid color, which would create additional blockiness to the layout. The bottom bar creates the perfect amount of contrast to stand out and provide controller actions but still melts with the dark backgrounds.
The user’s hover selections are confirmed through echo feedback, such as the enlargement ment of the tile and blue outline that pops against the neutral background, in addition to the large dynamic hero image. The toggle clearly indicates which section the user is in and allows the user to quickly toggle between neatly organized sections.
All-in-all, the UI resembles PlayStation’s dark, sleek look—translated into a tablet form-factor.
PROTOTYPES
Prototypes Created for Usability Testing
I developed additional screens for the prototype, as I wanted to show the navigation throughout the interface. I also had usability testing in mind, as I wanted to see how users would navigate through the interface. I made sure to create control and touch-based navigations for this experience.
USABILITY TESTING
First-Click Usability Testing
Through research, I wanted to know if my interface is intuitive enough for PlayStation and non-PlayStation users to navigate with ease. For this reason, I included scenarios and tasks the participants would have to complete.
Task Success
16% of tasks were somewhat difficult but completed successfully, and 8% were not fully completed resulting in a “Failed” task. Trying to replicate the controller and touch navigation through a mouse and keyboard affected the usability testing. The controller map was confusing for some participants, particularly those unfamiliar with PlayStation controller navigation.
Navigation with a mouse/mousepad was a bit mixed. Though it was the replacement for touch-based interactions in this experience, there were behaviors that were confusing. For example, when the user selects a game or app, the game or app is hovering instead of being launched. However, it felt more intuitive for users to navigate the PS Menu using their mouse/touchpad. One participant even ended up changing her mind and pointed to needing to learn the system behavior.
PS Menu Navigations Issues
The one task success rate that stands out is for Task 5, as half of the participants were unable to fully complete it. The problem most participants had was closing the game. This could be attributed to the PS Menu behavior. When the user first launches the menu, the Quick Actions menu opens, and the Switcher section button hovers over.
It was brought up that an accessibility standard for a global product should be labeled for the side button, as icons are not always universal. Otherwise, the options key was not their first thought to closing a game when hovered over. Interestingly, most of the participants believed the menu was otherwise intuitive to navigate.
Additional Feedback: PS Menu
Feedback:
-
Users love the Quick Actions menu for its quick access to important settings.
-
The PS Menu’s accessibility can be improved with a left-handed option, labels under PS Menu section buttons, and a scroll bar for the pop-up menus.
Additional Feedback: Profile Menu
Feedback:
-
Most users preferred the proposed method of entering the Home Dashboard by default to change accounts.
-
Having online status for an inactive account was deemed redundant, and “Switch to User” should be the first option.
-
An extra layer of protection for logging out of an account would be nice to have for safety and privacy reasons.
Additional Feedback: Dashboard Organization
Feedback:
-
Interviewees preferred the PSM’s better content organization with an additional section for apps compared to the cluttered PS5.
-
However, they expected games to be available in the Games section or the PS Store.
-
Half of the participants felt non-gaming apps like a web browser or camera detracted from the console’s gaming focus.
3D MODELING
PlayStation Metamorph Controller Mockups
PSM Controller Blueprints
Referencing the PS5’s DualSense controller, I created blueprints for the PSM’s detachable VR controllers. For better accuracy, I created front, back, top, and bottom perspectives.
PSM Controller 3D Model
The blueprints were then brought onto Shapr3D and referenced in the 3D modeling. Some aspects of the design did change during the modeling process, such as adding wrist straps to the controllers, as it would add additional security when playing VR games.
FINAL PRODUCT
PlayStation Metamorph
PSM Product Mockups
Here are some snapshots of the PlayStation Metamorph render after applying textures. The blue nylon straps add a nice pop of color to the neutral controller. Rounded edges were applied to sections where players’ hands would mold to, while sharp edges were kept in other areas to maintain its sleek look.
PSM Final Screens After Applying Usability Testing Feedback
I made some adjustments to the overall UI design of the system. For example, I added a gradient to the tile section background to create a more open and immersive flow and darkened the bottom indicator bar, as it was the same value as the buttons.
HOME SCREEN DASHBOARD REORGANIZATION
I added the PlayStation Store back to the Games section and moved the Game Library at the end, and removed unnecessary apps from the Apps section to align with PlayStation design guidelines and main objective.
SEARCH FEATURE INCLUSION
Additionally, I re-included the search function, as users deemed the feature essential when looking for games/apps on their system and to download.
INACTIVE PROFILE REORGANIZATION
For the inactive profile menu, I removed the “Online Status” option from the list as it was deemed unnecessary for an inactive account and moved “Switch to User” to the top since that would most likely be the primary reason for someone to select the profile.
PS MENU: QUICK ACTIONS BEHAVIOR
The last update made was updating the PS Quick Actions menu’s behavior. Instead of initially hovering over the music options button, the user hovers over the whole Quick Actions menu. To enter the Quick Actions, the user can select the menu and return to the menu hover state once goes back with the controller. This makes it more clear that the Switcher section is not activated at first entry and does not pertain to the Quick Actions menu.
CONCLUSION
My Takeaway
STRENGTHS
Successful design strategy validation for the as seen by the announcement of the parallel PlayStation Q
Effective visual design inspired by PS5 and competitor design pattern analysis
Well-thought-out interaction design for controllers and touch navigation
AREAS FOR IMPROVEMENT
-
I acknowledge the need for better preparation in usability testing, suggesting in-person testing for more accurate insights.
-
Identified some tasks as repetitive/unnecessary, though valuable feedback was still obtained.
NEXT STEPS
-
Focus on improving PS menu accessibility by adding labels to buttons and a scroll bar.
-
Develop PSM's search feature and enhance games/apps folders for improved content organization.