Playstation app redesign An unofficial UX/UI redesign of the Playstation app

Header image
Mock up of screens on mobile device

Summary

This is quite a niche app as it's primarily focused on user who either have or are going to get a PS4.

However, this being said the current app lacks in many aspects of a good user experience approach, there is no set nav pattern - the menu is scattered throughout the screens and sections; there is a serious case of information overload and cramped competing information with lack of data hierarchy.

With all this in mind the project started with a run through of the app to determine the site structure and major areas for improvement.

Existing sitemap

Sitemap of PS app showing flow of screens

Initial findings

As shown above, 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.

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.

Jobs to be done

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.

Information architecture

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

New high level sitemap

New proposed high level sitemap

Low fidelity 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)
Lo-fi wireframes

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

Typography

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.

San Francisco typeface specimen

In terms of modular scale of typography it was decided to conform as closely to Apple's design guidelines as possible, however some deviation was need to form a more interesting visual hierarchy.

App type specimen
Element Font Weight Size Tracking
Heading 1 Display Black 34pt 13pt
Heading 2 Display Heavy 28pt 16pt
Heading 3 Display Heavy 20pt 19pt
Body Text Light 20pt -16pt
Sub-body Text Light 15pt -13pt

Colour

The brand colours were maintained to enforce a strong brand throughout the system.

#000000 - Text

#FFFFFF - Background

#003791 - Primary colour

#0078c8 - Secondary colour

#999999 - Grey 1

#8A8D8F - Grey 2

#4D4D4D - Grey 3

#20B292 - Positive

#E84F13 - Negative

High fidelity prototypes

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.

Final Hi-Fi designs