Enhancement Impact

When PlayStation set out to redesign its web components, the goal was simple: make the platform more accessible and efficient for everyone—especially the 18.52 million users with disabilities who make up about 16% of its 116 million monthly users.

By enhancing accessibility features, the updates not only created a more inclusive experience but also opened the door to a potential 7% increase in conversion rates from this user base.

On top of that, introducing reusable components has been a game-changer for developers. What used to take 4–6 hours to implement can now be done in less than an hour, making the process faster, smoother, and much more efficient.

Product Solution Preview

Product Description Page

This is a full view of the Product Description Page, showing all the components I developed seamlessly integrated into the final design.

This is a view of the PlayStation Store, showing the sort & filter component I updated. As users apply their selected criteria, the grid dynamically updates to display the relevant results.

This is a view of the Game Library, showing the components I updated for each tab like Purchased, Played, etc., including the Filter component.

My Journey to Frontend Development and Design Systems

I worked as a software engineer at Playstation for 3 years. In 2021, I decided to transition from backend to frontend development. I found that I enjoyed the visual aspect of UI work and being able to see how my work directly impacted the user experience.

Around that same time, PlayStation was embarking on a major redesign initiative and I joined the effort to implement components for their Design System.

My Responsibilities

As part of a team of four engineers, I took the lead in driving the implementation and final sign-off of key design system components. Additionally, I mentored junior engineers, fostering their growth and ensuring code quality. My work directly impacted critical domains, including the PlayStation Store, Product Description Page, and Game Library, enhancing the user experience across these core areas.

Technologies That Streamlined Our Workflow

During the redesign process, we collaborated extensively with Product, Design and QA to ensure each component met the required standards before signoff. Below were some of the technologies we used to effectively collaborate together. 

Component Development Standards

Beyond adhering to product and design specifications, I ensured each component met the following critical requirements and features to maintain quality, consistency, and usability

Key Visual Changes for a Modernized Experience

In alignment with the new Design Interaction Guidelines introduced during the web redesign, the following key changes were implemented across each domain space

• Layout: New grid system for all device breakpoints with updated margins, gutters and column sizes
• Spacing: Updates to rules for margin, padding and spacing of grids
• Typography: New font and sizing for header titles, body text, and more.
• Color: New colors for light and dark themes

Sample Style Guide

Components Developed and Deployed

The following is a detailed list of components I developed and successfully deployed to production, along with an overview of the specific changes and enhancements made.

Game Info

Enhancements: Updated to new responsive grid layout for all mobile devices, updated margins and spacings

Game Rating

Enhancements: Created new component for PEGI rating system for European markets, updated component alignment, style, margins and spacings

Game Background Image

Enhancements: Fixed positioning for hero  and game background images to center align at the top properly for all device breakpoints

Compatibility Notice

Enhancements: Updated to use new grid system, column sizing to be dynamic, colors and spacing

Game Legal Info

Enhancements: Updated to use new grid system, updated margins and spacing

Preview Grid

Enhancements: Created new preview grid component, implemented accessibility for tab navigation and keyboard focus, updated interactive states and grid to new responsive layout

Grid List

Enhancements: Created new grid list component, implemented accessibility for tab navigation and keyboard focus, updated interactive states and grid to new responsive layout

Sort & Filter

Enhancements: Created bottom sheet component for mobile device, updated store sort & filter spacing and margins on browsing page

Pagination

Subscription Page

Enhancements: Updated alignment, spacing, typography and colors

Filter

Enhancements: Updated label component's interactive states and filter alignment

Collection Strand

Enhancements: Updated element alignment, interactive states, typography and colors

From Then to Now: A Look at the Store’s Evolution

2019 - Store Search

2020 Store Search

(2021 - Present) Store Search

(2021 - Present) Store Collection

Game Library

This is a view of the Game Library page. In addition to redesigning the components, full page layouts were also updated for Purchased, Played, Downloads etc.

(2021 - Present) Game Library Purchased

Learnings

This project opened my eyes to the real challenges users with disabilities face when navigating digital platforms. It wasn’t just about checking boxes for accessibility standards—it was about understanding how these features impact real people’s lives.

I learned that incorporating accessibility early in the design process makes it much easier to implement and improves the overall experience for everyone, not just users with disabilities. This experience has completely shifted how I approach design—accessibility isn’t an afterthought; it’s a core part of building something truly inclusive and impactful.