• Timeline: April 2021 - Jul 2022 (1.25 years)
• My Role: UX Engineer
• Team: 4 Engineers, 2 Product Designers, 2 QA Testers, 1 Product Owner
• Responsibilities: Drive component implementation and sign off

Background

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 liked the visual aspect of UI work and being able to see how my work directly impacted the user experience.

That same year, Playstation was undergoing another web redesign initiative and I was brought on board to help implement components for their Design System code library.

My Role

In a team of 4 engineers, I was responsible for driving component implementation and sign off, as well as mentoring junior engineers. The domains I worked on directly were the Playstation Store, Product Description Page, and Game Library. 

Technologies Used

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. 

General Component Requirements

In addition to building the components according to their product and design specifications, I also made sure the following features and requirements were accounted for:

Visual Design Changes

Following the new DIG 2.0 (Design Interaction Guideline) for the web redesign, changes were made to the following areas.  

• 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 Implemented

Below is a list of the components that I developed and successfully deployed to production with details of the changes.

Game Info

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

Game Rating

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

Game Background Image

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

Compatibility Notice

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

Game Legal Info

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

Preview Grid

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

Grid List

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

Sort & Filter

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

Pagination

Subscription Page

Changes: Updated alignment, spacing, typography and colors

Filter

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

Collection Strand

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

A Brief Store History

2019 - Store Search

2020 Store Search

(2021 - Present) Store Search

(2021 - Present) Store Collection

Final Product Description Page

This is a view of the PDP page with all the components stitched together.

(2021 - Present) PDP

Game Library

Here 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

Developing a Passion for UX

While working with designers during the component implementation, I enjoyed being able to make design suggestions and seeing how that impacted the final product.

As a user of Playstation products myself, I saw how design was critical for positively influencing the user experience and I wanted to be part of that decision making process. After the design changes were released to production, I decided to transition into UX.