Fourth in an ongoing series of ‘UI/Branding Teardowns’ at Vyxl. The articles in this series are not intended to be excessively deep, but focus on key aspects of a game titles’ UI and Branding; providing a summary intended for design reference.
Project Cars 2 Slightly Mad Studios (SMS) 2017 (Windows/Xbox One/PS4)
PCARS2 has been a hotly-anticipated title for a few years now, since the original title back in 2015 and offers; 180 cars from 29 motorsports series; 60 tracks; 4 seasons of weather; day-and-night transitions; and ice, snow, mist, wind, rain conditions.
As part of the Project Cars I.P., this is one of the biggest Racing titles sitting alongside the Forza and Gran Turismo series, albiet offered across all key platforms (excepting Switch or mobile).
Let’s take a look at Project Cars 2 UI:
Main Menu (Quick Play, default tab)
Main Menu (Career tab)
Vehicle Select lightbox screen
Custom Event pre-load summary screen
Options screen
Tooltips are provided for nearly every setting
The main close button is finally fixed! In PCARS (below, left) it was often nearly impossible to see, and relied on muscle-reflex to navigate out of the application with the mouse. Within PCARS2 (below, right) a simple but most effective triangular device has been added to ensure it’s clear to the user:
Neatly-designed Weather selection screen: Example weather conditions are shown in the main image as the user hovers over/clicks each condition icon below.
Time Trial summary screen with global leaderboard, filters, and a whole lot more besides
My Profile with… a LOT of data
Extras screen
Suitable, non-Editorial stock photography is nearly always a challenge within UI’s, but I can’t help feeling an air of gloom with some key choices:
And with overall layout, PCARS2 sometimes struggles to present its content cohesively: in the load-screen below we have a hero shot, circuit map and rendered vehicle all at different perspectives, above a clutter of relevant information. It’s so close (given the amount of information to present) but can overwhelm on occasion:
Replays and Cameras
PCARS2 handles both of these very well, with a particularly tight and intuitive panel design for Playback Controls:
Two frustrations with these; firstly, there is no clear option to SAVE Replays, at least within Private Testing or Quick Race modes. Secondly, the timeline seekbar isn’t scrubbable; meaning for long replays the user has to use the FFD/RWD buttons like on an old VCR, and it takes as long too…
Camera controls are very nicely implemented; with realtime Aperture, Bokeh controls etc.. included:
Exit confirmation screen
Overall the PCARS2 UI is an example of extremely high quality planning, design and review – I almost feel bad to find any cracks at all, but the intent of these articles is to analyse the good and bad of a Game titles’ UI & Branding.
UI pros
Slick, modern, sharp appearance: up there with Forza 7 and GT Sport
Very logical layout, screen pagination and ux flow
Great button sizes, spacing and tactility
Fast loading
Angled branding details passed through to panel design & animations
Good (although subtle) application of lightboxes for modal/subscreens
Simplest -and perfect- solution to that nearly-invisible X/close button from PCARS1
Solid keyboard navigation functionality throughout (v.important)
Detailed tooltips throughout
Full button-mapping options for multiple controllers
UI cons
Over-dark, gloomy backgrounds
Cluttered, mixed-source graphics
Some odd photography choices (forlorn-looking drivers/mechanics)
Screen pagination not very clear
Pagination tabs are the only buttons without hover-states
Hover-state selection mode for some submenu buttons (in-game Controller Options) can confuse user
Cannot find ‘Save Replay’ options in core game modes
Replay timeline scrub function not available; limited to slow FFWD/RWD toggles
Some mouse/sidebar drag interaction conflicts
Grating, looped sounds for increment navigation
Single settings profile only (this does not allow a Player to map different controller layouts and save them as unique profiles, eg; Paddle Shift gears/Manual gears etc..)
User can’t apply multiple keys/button mapping to a single control (eg; paddle shifts and separate gear shifts for up/down gears, and separate gearshift) forcing Sim Racers to remap for every car/race change
Branding
Like any sequel to a succesful mass-market product, it’s usually common sense to retain brand recognisability – while teasing ‘something new’, or ‘something bigger’.
SMS and Bandai-Namco have tweaked the Project Cars branding for PCARS2 with a less-fractured CARS wordmark and a recoloured (or should that be de-coloured) //// slash device which helps ensure the ‘2’ device is the key focal point.
That ‘2’ device though could have benefitted from a little more attention, with little binding it comfortably to the original logo lockup, and a particularly tight crop on the right edge (you can see it now, right?).
However, it does the job and it’s BIG and CLEAR (oh, and if I’m right that number 2 is the Toyota MR2 font with a little angular snip!):
Beyond the logo, and there has clearly been a step-up in terms of Art Direction and finishing artwork quality with PCARS2 box-art (2nd below) clearly conveying the new racing surfaces on offer, and a hint at the variety of Racecars within.
Niggles aside; the team at SMS have done an incredibly solid job on the UI and -as branding evolution rather than revolution- PCARS2 ticks pretty much all the boxes.
