UI/Branding Teardown — Project Cars 2

1882125

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. Positioning itself as a ‘SimCade’ title (not a full-blown Sim, but with Arcade-style racing features and assists) PCARS2 offers; 180 cars from 29 motorsports series; 60 tracks (many variations, please note); 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:

p1
Main Menu (Quick Play, default tab)
p7
Main Menu (Career tab)
p3
Vehicle Select lightbox screen
p2
Custom Event pre-load summary screen
p9
Options screen

p10

p21
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:
p22 p4

p19
Neatly-designed Weather selection screen: Example weather conditions are shown in the main image as the user hovers over/clicks each condition icon below.
p20
Time Trial summary screen with global leaderboard, filters, and a whole lot more besides
p11
My Profile with… a LOT of data
p12
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:p6

p5

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:p13

Replays and Cameras

p14p15

PCARS2 handles both of these very well, with a particularly tight and intuitive panel design for Playback Controls:p16

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:p18

p00
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!):pcars1-2.png

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.pcars1box

pcars2box

Niggles aside; the small 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.

vyxl_vyxl_logo_wht_80.png

vyxl_btn_connect2 copy