OVERVIEW
Redesigning the PlayStation website with a focus on fun and excitement
PlayStation is a brand owned by Sony Interactive Entertainment, offering digital and interactive entertainment products and services. However, their current website does not accurately reflect their identity as a videogame brand. As part of my graduate visual design course at the University of Maryland, I took on redesigning PlayStation's website due to my personal passion for the brand.
Timeline
January - March 2023
3 months
Role
Visual Designer
Team
Individual
Focus Areas
Visual Design, Interaction Design
PROBLEM
PlayStation reflects the modern trend of videogame companies forgoing their personality
PlayStation's website follows the trend of the gaming industry moving toward a more corporate look. This resulted in their website lacking the immersive and exciting feeling that visitors should expect from a gaming website. Instead, it gives the impression of a product-centric approach, focusing more on aesthetics than the enjoyment of playing games.
PlayStation’s Website
Sega’s Website
Ubisoft’s Website
Xbox’s Website
SOLUTION
Bring back the personality of the PlayStation brand
The focus of my redesign was to emphasize the fun and exciting aspects of PlayStation's brand. Videogame brands used to embrace their personality and feature colorful mascots that complemented their identity. I aimed to reintroduce these elements and bring that sense of joy to PlayStation’s website.
APPROACH
How might I redesign the PlayStation website to bring out the fun and excitement of their brand?
INSPIRATION
Finding a new design direction while maintaining PlayStation’s current identity
In the present, PlayStation is recognized as a videogame brand that caters to the hardcore gaming audience, providing experiences tailored to more mature players. Therefore, I wanted to preserve this element and maintain the distinct “edge” that PlayStation conveys while exploring ways to highlight the fun aspects of their brand.
VISUAL IDENTITY
Colors
I continued to use the current PlayStation brand colors. This decision aligned with my effort to maintain the current perception of their brand.
Typography
I selected Work Sans as the font because I believe it would help evoke the “edge” of the PlayStation brand. For Source Sans Pro, I opted for a font that would provide excellent readability and paired well with Work Sans.
ITERATIONS
Iterating on the redesign from low-fidelity to high-fidelity
I focused on four key pages of the website: home page, PlayStation 4 product page, PlayStation 5 games page, and PlayStation Plus page. I adapted a “mobile first” mindset and started with the mobile design before moving to web. Below is a sample of my experimentation in low-fidelity before moving to high-fidelity.
DESIGN CHANGES
Major improvements were made based on the feedback I received from colleagues
After completing my designs in high-fidelity, I presented them to my colleagues during a critique session. Criticism was aimed at the lack of energy for a website about videogames, my overuse of flat design, and still creating designs that feel corporate. Below are the major changes I made based on the feedback I received.
Adding Videos and GIFs
My redesign lacked the dynamic and energetic element of videogames. I was encouraged to incorporate videos and animations to help bring life and movement to the website.
Bringing Out More Personality
I was deviating from my proposed solution by inadvertently incorporating a corporate look. Therefore, I pushed myself to take full advantage of the PlayStation brand aesthetic.
Reducing Flat Design
Flat design may not always be the most suitable choice for a brand like PlayStation. I experimented with other design styles, such as adding textures.
FINAL DESIGN
Home
The website's homepage is the initial greeting for users upon visiting the PlayStation website. My design was influenced by the intention to visually narrate the essence of the PlayStation brand and generate excitement. It commences by introducing users to the brand's offerings and smoothly transitions into inviting them to dive in.
PlayStation 4
The product page for the PlayStation 4 was underwhelming in comparison to the page for the PlayStation 5. This approach aligned with business priorities, as the PlayStation 5 is Sony's latest video game console. Nonetheless, I believed that the PlayStation 4 shouldn't be overlooked, which prompted me to enhance its product page to mirror the same level of excitement as the PlayStation 5's.
PlayStation 5 Games
The page showcasing PlayStation 5 games appeared visually repetitive and static, primarily due to the proliferation of card menus. A page intended to display video games should evoke a sense of energy and enthusiasm. Consequently, I seized this opportunity to accentuate PlayStation's mascots and showcase the artwork that video games offer.
PlayStation Plus
I directed my efforts towards redesigning the UX of the PlayStation Plus page. I found that PlayStation had adopted a perplexing approach in presenting the service and distinguishing between its tiers. My redesign strives for simplification and transparent communication regarding what PlayStation Plus offers, accompanied by a few visual enhancements.
REFLECTION
Challenges
Reverting to Standard UI: Despite wanting to deemphasize the corporate feel, I found myself devolving back into it by using standard UI practices instead of being experimental and trying radical ideas.
Beyond Flat Design: My default design direction leaned toward flat design. However, flat design doesn’t always work because of its limitations. I need to learn how to combine and experiment with other styles, such as morphism, and learn how to uplift my flat designs.
Takeaways
Responsive Design is Crucial: Responsive design wasn’t a big focus during this redesign. However, I did use this opportunity to learn about the subject and practice it. I’m proud that some of my wireframes are completely responsive.
Appropriate Preparation: Know what you need for your design system and spend a lot of time sketching your ideas before moving to high fidelity. I found myself making up designs as I go, which would cause me to have to go back and change other areas of my design to maintain consistency.
Constant Feedback: Always seek feedback for your designs. It can make a huge difference in your process.
Design Is an Iterative Process: I sometimes found myself trying to be a perfectionist and nail my design on the first try. Which is impossible because I don’t have any critique or feedback to learn from. Your first draft is a stepping stone to something better.
