Skip to the story

PS App

↓

PlayStation · Unified mobile app · 2020 launch

One PlayStation App for the PS5 generation.

Role
Lead Product Designer
Areas
Play, profile, social, trophies, checkout
Launch
October 28, 2020

The app

Two apps became one platform.

A generational leap for mobile

PS5 brought the store, game library, voice, and console control to mobile. We set out to build one app for all of it, guided by five pillars: connect, inform, assist, control, and acquire.

My role

I owned five experiences end to end: Play, profile, trophies, checkout, and social. Each connected to its console counterpart, and social’s interaction model spanned the whole app.

Beyond my own areas, I helped set the roadmap, team assignments, shared component library, and quality bar for what shipped.

PlayStation App Play home screen
Play: a home for games and friends.
PlayStation App player profile screen
Profile: a player’s identity and activity.
PlayStation App game trophies screen
Trophies: progress and accomplishments.
PlayStation App store checkout screen
Checkout: one purchase flow across web and mobile.

Deep dive

Social, from anywhere.

Of the five, social reached furthest: it had to work over every other part of the app. The rest of this case follows how we decided where it lived and how it behaved.

01

Two apps, one fragmented experience.

Awareness without action

PS App delivered news, PS Messages handled messaging, and both showed which friends were online. Players could see what friends were doing, but acting on it meant switching apps, and research showed the split frustrated them.

With the store, library, voice, and console control arriving, that overlap could not scale. Merging the apps raised the real question: what belonged where?

The earlier PS Messages app showing online friends and conversations
Before: PS Messages for conversations and online friends.
The earlier PlayStation App showing a feed of friends’ activity
Before: PS App for news and friends’ activity.

02

A rule for what goes where.

Research into structure

Card sorting and reverse tree testing showed how players expected features to relate. From that we set one rule for the whole app.

Top-level tab

An independent, recurring job with real depth.

Subpage

A task that depends on a parent context.

Global access

A behavior needed across destinations. Social was the clearest case.

PlayStation App feature map spanning Play, Explore, Store, Library, Search, and Social
The feature map the rule had to organize.

03

Three models, deliberately different.

Testing to learn, not to pick

We prototyped three navigation models with as little overlap as possible, so each test isolated one idea, and ran them over three rounds.

Model B confirmed the value of a familiar tab bar for destinations. Model C’s panel tested better on perceived control and on moving into and out of social without losing the original task. No single model did both.

A · Hub and spoke

Social lived at the root, so players had to unwind their navigation to reach it.

B · Traditional tab bar

Familiar for destinations, but social lived only on Home, because other tabs needed the top area for their own actions.

C · Social panel

Social was available everywhere without taking space from each page’s actions.

Hub and spoke, traditional navigation, and social panel prototype comparisons
The three prototypes: root-only, Home-only, and global access to social.

04

Convention for destinations, a layer for social.

The converged model

So we combined them: Model B’s tab bar for destinations, Model C’s panel for social. Convention handled where players went; the custom pattern was reserved for the one behavior where testing showed it earned its cost.

Inside social, friends, presence, messages, groups, parties, and voice shared the same people and state, so we designed them as one connected system.

App Context and Social Layer diagram showing social above Home, Explore, Store, Library, and Search
The converged model: destinations below, a shared social layer above.
Expand social, enter a conversation, and return to the app.

05

Open, act, and return.

Escalate without losing your place

Lightweight coordination stayed in the panel. Voice, which is synchronous and needs more room, escalated to full screen, and could be minimized back to the exact task underneath.

Message groups and voice parties were largely the same people, so I pushed to attach parties to groups: one cohort to manage instead of two. A party bar showed who was in voice and let players join with one tap.

Chats list with an active party shown in the party bar
1. The party bar shows who’s in voice.
Full-screen voice party with four players
2. Joining escalates voice to full screen.
Chat thread with the voice call minimized to a tile
3. Minimized, the call stays with you.
Trophies page with the voice call still minimized
4. Back on the original task, still in the call.

06

Four decisions made the layer work.

What the architecture required

Once the model was set, it forced four downstream decisions.

Persistent layer: the social panel resting above a game page
Continuity mattered more than forcing navigation, so social stayed one gesture away on every surface.
Bottom-left return: the back control beside the message field
The panel sat on the top edge for visibility, so a bottom-left return kept frequent entry and exit within thumb reach.
Voice inside party: a party row with members in voice inside the chats list
Voice stayed inside the party and shared its cohort, so escalating to a call never meant entering a separate system.
One app, not two: the PlayStation App on the App Store
Merging PS Messages simplified the player’s mental model, at the cost of more information-architecture complexity for us.

07

Quality that survived the build.

Design in the codebase

I specified flows, states, edge cases, and motion, and worked directly with engineering in Japan through implementation.

Rather than file visual defects and wait, the design team fixed them in code: 18 pull requests and more than 30 defects in the three months before launch. In chat, I fixed the build myself: grouping system events under their sender, consistent timestamps, and the intended input bar.

Chat thread as first implemented, with inconsistent message grouping and timestamps
As first implemented.
The same chat thread after my code changes, with grouped events, consistent timestamps, and the intended input bar
After my code changes.

Result

Launched with PS5.

The app launched on iOS and Android on October 28, 2020, ahead of PS5, bringing messages, voice, games, the store, and console features into one app. Monthly active users and mobile store revenue both grew, and by April 2021 the app had been nominated for a Webby.

PlayStation App product footage (later version).

Looking back

Keep the principle, change the shell.

Persistent, low-friction access to social was the right call. The custom shell is what I’d simplify: the bottom-left return blurred hierarchical and historical back, especially from deep links and notifications.

Today I’d revisit the top-level information architecture earlier, likely folding Explore into Home to free a conventional home for social, and lean harder on native patterns once the principle was proven.