Playstation Store redesign – the biggest UX Failure of 2020
Tags: ux, frontend, design
Published: 2020-10-24 20:42:47

This week Sony updated design of [PS Store](https://store.playstation.com/), the majority of countries received update so you will be able to see this new version. And it is a complete disaster in terms of UX. Let's break it into two parts: technical and design and see how both of those impact user.

# Technical side

The new PS Store uses React, Next.js and GraphQL – all good ones in terms of performance but only when used *wisely*. So let's check the page speed insights for current Halloween deals page:

#### Desktop

![PS Store page speed insights](https://dev-to-uploads.s3.amazonaws.com/i/34to1a3rgybyhlxe0uf9.png)

#### Mobile 

![PS Store page speed insights mobile](https://dev-to-uploads.s3.amazonaws.com/i/7wezyk2a5h12xhlbd8uo.png)

#### Results

The page speed insights results are the worst that I've ever seen for any website (except new version of Reddit). Let's have a closer look what makes the website to perform so poorly. 

The biggest problems that we will encounter are:

- Huge initial response times – I've run speed insights several times and it took 3-4 seconds for website just to start loading. To compare – static website hosted with Github Pages will usually have initial server response time about 150ms. As I think, the problem here is that for each request different APIs are being consumed by server that tries its best to perform ssr (server fetches data and then renders react app with it to html and sends to client). To avoid this developers usually use cache to store prerendered page (or part of it that relies on APIs). But, I guess, no cache for us on PS Store.

- Inefficient cache policy – almost all resources loaded by the website have short cache TTL (1 day or less) – this means that when you visit the website next day, all of them will be requested again and spoil your experience one more time.

- Text is not visible before font is loaded – this is among the worst sins that website can commit, I hope you know why

- Horizontal scroll – website has it both on desktop (just a small one) and on mobile (half of the page) – you can see how it appears out of nowhere on loading screenshots

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/66iqz1gtvi5k596f3lxj.png)

These are the worst things that lower page speed score, but there are more, you can explore all of them by running report yourself [here](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fstore.playstation.com%2Fen-us%2Fcategory%2F95b6f470-60c1-47a5-bc30-170c828a9920%2F1&tab=desktop)

#### Bundles size and real world loading times

The same page fully loaded within 15 seconds in browser and downloaded 16mb of resources (with ads and analytics blocked) from which 2.1mb was images, 10.5mb javascript and 2.6mb of css. **That's too much**. I cannot imagine why would anyone need so much javascript – mid size react application will take approximately 600-1200kb. You can explore the amount of loaded resources in Network tab in developer tools.

## So what should they do?

- Fix cache
- Reduce amount of javascript code 
- Remove horizontal scroll
- Setup cache for prerendered pages

By following these recommendations the PS Store team can dramatically increase performance and make website load multiple times faster. 

# Design side

The previous version of PS Store was not a design masterpiece and did not provide much functionality – you could browse games, view screenshots and trailers, manage wishlist and buy games. That's pretty short list compared to other game stores like Steam. It looked like this when you were browsing games
![Old PS Store](https://dev-to-uploads.s3.amazonaws.com/i/5fkxknkftkcetkfsmx5k.png)

So with the redesign we could expect to get at least these features. Well, they removed all of them:
- no wishlist (hope you have a good memory)
- no game trailers (go search on youtube, you lazy user) or even screenshots
- game browsing became significantly harder as games names are not shown

#### Game page
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8xxtlacassmrqvso6jcf.png)

Go see screenshots somewhere else – you are here to buy, not to consume our data!

#### Games grid 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dgbcjra38zam4831hlx7.png)

So you want to know how these two Resident Evil 2 items are different? Price of course, what else to you need?

#### Index page
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ew8bt5jrrx3044zzhxer.png)

What's hot? We have these hot images for you! Why would anyone would want description. 

# How the design feels

It's a disaster. Hard to use, hard to understand, hard to manage. It's a clear downgrade from the previous version which was not already full of features.

# Conclusions

This website shows only one thing – Sony does not care. They've released a bad product that harms both existing Playstation users and company reputation. If you work on interfaces and your employer tries to release something like this, please, try to persuade them to postpone the release and fix all nasty things – user experience should always be on the first place.