DEV Community

Vitaly Rtishchev
Vitaly Rtishchev

Posted on

Playstation Store redesign – the biggest UX Failure of 2020

This week Sony updated design of PS Store, 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

Mobile

PS Store page speed insights mobile

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

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

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

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

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

Games grid

Alt Text

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

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.

Top comments (25)

Collapse
 
albertomontalesi profile image
AlbertoM

The ps store is god awful, sometimes it takes several seconds before my profile icon shows up and don't try opening it on safari, it's not even supported. I guess that considering how slow it's the UI on the ps4 it's fitting that the web store is also crappy

Collapse
 
gordlacey profile image
Gord Lacey

I went to the store today and looked at some of the sales. No way to sort in any manner, so the Sims 4 DLC is all over the place (not what I was looking for, just something I noticed). As you mentioned it's impossible to know what something is without clicking on it. I thought they had "Life is Strange Season 2" for $5.99 CAN, which I'd definitely pick up, but then I saw more and more icons that were slightly different. Turns out it was Episode 4 I was looking at. I'm sure there was a "complete season" there somewhere, but I wasn't able to find it. A horrible, horrible mess. I guess the good news is that when they're trying to figure out why sales dropped on the store, it'll be pretty easy to figure out why.

Collapse
 
juliathepm profile image
Julia Flash

That has happened to me too in Steam - I sift through different Life is Strange episodes trying to find the first one and keep getting recommended to anything but the first episode, then have to Google what the first episode looks like to find it. Once I did though, wow what a great and heartfelt game, some of the decisions within the game can be so cringey though too! I still think about my decisions sometimes 😂

Collapse
 
anders profile image
Anders

Some developers should feel real ashamed for shipping something that inefficient : (

Collapse
 
glyphcat profile image
GlyphCat

Developers are just doing their jobs and rushing deadlines. The sinful people are likely to be those above them, usually.

Collapse
 
rtivital profile image
Vitaly Rtishchev

My top suggestion is that Sony outsourced this project and like 90% of money landed in wrong hands at a wrong time

Collapse
 
capsule profile image
Thibaut Allender

Rushing deadlines by writing a shitload of JS? Sure, sounds like a sensible approach. If you're not up to the task and start killing flies with bazookas, you are as responsible as the idiot who hired you and set the crazy deadlines.

Collapse
 
anders profile image
Anders

Certainly it can be a factor, but that seems like an unfortunate excuse to make. There are probably "reasons", but the result is the same.

Collapse
 
agentjohnnyp profile image
Johnny P

Their store is STILL a complete disaster. They have a Spring Sale right now and I'm interested in looking for VR games on sale. There is no way to sort by ANYTHING, let alone VR games on sale. Their sale pages (which, there's 38 pages of!), also has everything in the list including DLC. They are out of their minds if they think this website is designed for the end user. I've only bought one game since the redesign last year and it was a game I knew I wanted, so didn't have to search it out. I've complained to them through Twitter, no response. They really don't care what their users think. Sad.

Collapse
 
azuralstrike profile image
Azural Strike

I'm not here to defend ps stores new layout but you've noted in your games grid section about the resident evil 2 titles... one is clearly resident evil 2 remake the other is clearly the remake raccoon city edition which is resident evil 2 and 3 remakes. Now I get your arguement if a game isn't clear but you need to make the arguement better here.

Collapse
 
rtivital profile image
Vitaly Rtishchev

Yep, sure, here are some better ones:

  • Nioh with DLCs that are sold separately – they do not look the same, but it's not clear what are they
  • Plants vs Zombies – two completely the same items with different price – you need to click both to know that the first one is the game and the second one is the upgrade
Collapse
 
galihprad profile image
Galih Pradipto Wisnujati • Edited

I don't think so, some company prefer to load high resolution image, because it's based on their customer preference. Yes, customer is not always a developer who is aware about fast loading. Sometimes it's quite slow but still acceptable by customer. Some brands, such as laptop brand and phone brand, in fact, load videos on the first interface of their website. It's based on their customer preference

Collapse
 
rtivital profile image
Vitaly Rtishchev

The problem is not about images or videos, they are fine – the site loads 2mb of images and 10mb of javascript, that is not acceptable

Collapse
 
manoels42787610 profile image
Manoel Soares • Edited

I'm so glad someone addressed this! This has been bothering me for a long time!
Not only is the store now an eyesore (this white background is awful, the old dark blue background is so much prettier and easier on the eyes), now you can no longer add any filters to your search!
As if all the problems you mentioned weren't enough, now you can't sort out what you're looking for because you have no filters! Now you can at least see the games' titles, though, but that's not nearly enough!
And to make matters worse, the PS4 Store that used to run smoothly and without any problems now is nothing like it used to be. Yeah, there are still trailers and screenshots, but the store practically freezes when you open them! They take ages to load and sometimes won't load at all! And this is not an internet speed problem, my connection is really fast! It seems like they pulled all this crap just to make you give the PS4 up and force you into buying the PS5 (which I suppose has a better performance on the store).
As for the wishlist, there is a better alternative, the site PSPrices (now that I think about it, PSPrices is actually an alternative to the whole PS Store, since you can still see screenshots and watch trailers there!) Not only can you keep track of your favorite games, you can also keep track of their prices, you can see what was the lowest price a game had wait for a sale to get a better deal and choose to receive notification by email! Sometimes the prices are a little different than on the PS Store, so it's good to double-check it (that only happened once, though), but that's about it.

Collapse
 
kior profile image
Kior

They should fire the entire staff that was developing the new site and its design. :|

Can't do anything on website because of - Looks like you were looking for something completely different...

Collapse
 
darlantc profile image
Darlan Tódero ten Caten

it's 2021 and the website continues to be that shit. I can't understand how a company of its size doesn't see how bad it is!

Collapse
 
gavin06831239 profile image
Gavin

So glad someone called this out...I just cant get over how bad it is...I mean no filters...what the hell.

Collapse
 
shadowtime2000 profile image
shadowtime2000

Wow didn't know a big company could make a mistake like that. Looks like more people will be buying Xbox Series X then.

Collapse
 
aliki212 profile image
AlikiP

Really liked your comments!It is amazing how the simplest concepts cannot be understood by the execs before releasing such a huge project!

Collapse
 
csorbamatyi profile image
Matyi Csorba

Good article!
I'm hoping that this is just a half done job, and they will release a new ps store site when the ps5 comes out

Collapse
 
slimco profile image
slimco

I hope that once I wake up, the good old design will be restored. My wishlist is gone :( I will never see discounts on my games in one place.

Collapse
 
manoels42787610 profile image
Manoel Soares

Well, you can do that in PSPrices! In fact, they even still got the games screenshots and trailers there! =D You can keep track of the prices too, making sure you save the most ;)

Collapse
 
themafro profile image
Matthew Francis

At least this version works in desktop Safari.

Collapse
 
rtivital profile image
Vitaly Rtishchev

I guess that was an accidental outcome that comes with redesign