PS app redesign

An unofficial UX/UI redesign of the playstation app.

This is quite a niche app as it's primarily focused on user who either have or are going to get a PS4. The current app lacks a good user experience - there is no set nav pattern, the menu is scattered throughout the screens and sections; there is an information overload and lack of data hierarchy.

Y – 2017

Services User research User experience Interaction design Visual design

Landing page on a mock up screen

Analysis

As this was an existing product the project started with a run through of the app to determine the site structure and major areas for improvement.

Sitemap of PS app showing flow of screens

As shown, the navigation pattern fractures off from several areas of the screen with many of the resulting screens being browser based. I feel that this information could be brought into the app for a more seamless experience that positively impacts not only the user enjoyment but also the Playstation brand.

User stories

With this project I wanted to gain experience away from personas and use the "Jobs to be done" (JTBD) methodology. The idea over using this methodology was that personas are often formed on biased assumptions and stereotypical ideas of a user, whereas JTBD focuses on the users tasks that need to be completed through the product.

Instead of focusing on the customer for a product, a designer instead focuses on the job that customers need to get done with a product or service. Crist, M. - Personas, you don't need them (4th September 2016)

Due to this being an unofficial redesign for fun, I had no actual user data available to me so initially started with desk research to build a stronger picture of the key areas that users require. This was later supplemented with user testing in guerilla form to verify these initial decisions.

JTBD

From this study I produced a list of jobs to be done which I would endeavour to incorporate into firstly wireframes and then high fidelity visuals.

  1. When I'm away from my Playstation I want to be able to see my game statistics, so I can compare to my friends.
  2. When I'm playing games I want to be able to see who is online and message them, so I can arrange multiplayer sessions.
  3. When I'm commuting I want to be able to browse the PS Store, so I can purchase and download games and DLC to my Playstation for when I get home.
  4. When I'm commuting I want to be able to catch up on the latest news from Playstation, so that I can anticipate any new games or events I want to take part in.
  5. When I'm away from the Playstation I want to update my profile settings, so I can keep my details up to date.
  6. When playing games with device additions I want to be able to easily connect my iPhone to the PS4 system, so I can use it as a second screen.
  7. At any time I want to be able to see any notifications that affect my system or games, so that I can keep aware of any updates or issues.

Requirements gathering

The next stage is to determine from the JTBD is the key elements that are required and group them into views building a new sitemap.

1. When I'm away from my Playstation I want to be able to see my game statistics, so I can compare to my friends.

Key elements: game name, play time, progress, trophies won / outstanding.

2. When I'm playing games I want to be able to see who is online and message them, so I can arrange multiplayer sessions.

Key elements: friends list (friend's username, friend's avatar, friend online status, game friend is playing), add a friend, messaging, system notifications.

3. When I'm commuting I want to be able to browse the PS Store, so I can purchase and download games and DLC to my Playstation for when I get home.

Key elements: store, filter / search, redeem codes, library / purchased, download queue, payment details, payment confirmation

4. When I'm commuting I want to be able to catch up on the latest news from Playstation, so that I can anticipate any new games or events I want to take part in.

Key elements: PS blog entries, filter / search, social share, set reminder for release / event

5. When I'm away from the Playstation I want to update my profile settings, so I can keep my details up to date.

Key elements: edit profile, edit avatar, edit privacy settings

6. When playing games with device additions I want to be able to easily connect my iPhone to the PS4 system, so I can use it as a second screen.

Key elements: connect to tv (code, camera), automatically connect

7. At any time I want to be able to see any notifications that affect my system or games, so that I can keep aware of any updates or issues.

Key elements: notifications, calendar, system notifications, system calendar

Other considerations

Sign in / out, register, general app settings

Information architecture

Based on the requirements determined a high level site map was constructed which would have a more intuitive navigational structure enabling users to use the app more efficiently and pleasantly.

New sitemap

Prototypes

These low fidelity prototypes were used to investigate the information architecture and aid in the testing of ideas and layouts.

I produced these in Adobe XD and utilised real data taken from the existing application and Playstations website. I have found that this helps produce a more realistic representation of the design than lorem ipsum does.

The chances that your actual content will fill the same space as your placeholder are very slim, almost inconceivable. In most cases at least some redesigning and restructuring must be done, which is a waste of time and resources. Cao, J. - Why designers should never use fake text (9th April 2015)

Switch wireframes below

It was chosen to focus more on the key interaction screens for the purpose of demonstration, therefore the screens relating to settings, payment, redeeming codes and connecting second screens were ommited.

With the low fidelity prototypes done, it was time to put together a branding guide for the new designs, utilising iOS best practice, WCAG 2.0 guidelines and Playstation's own existing branding.

Branding

The typeface chosen was the systems default font. This would make data appear quicker without a visible 'jump' of loading in new fonts, but also allows for a consistant app look within the device. So in this case it was Apple's San Francisco font family.

Fonts

The existing brand colours were maintained to enforce a strong brand throughout the system since it spans not just the app but also game packaging and the console UI.

AaBbCc
AaBbCc
AaBbCc
AaBbCc
AaBbCc

Visual design

With the branding decided it was time to move on to producing high fidelity prototypes showing how the end system could look.

Once again this was done in Adobe XD.

Switch wireframes below

Closing

The redesign took heavy influence from the iOS10 guidelines. I feel that it successfully dealt with many of the navigational and data hierarchical issues that were present in the existing app. With further research, access to analytics and development time; a better solution could be considered including rebuilding the app from the ground up and minimising the functionality which is used less.