SONY playstation
The Brief.
Domestic & General partnered with Sony to provide a protection policy for customers who owned a Playstation 4 games console. To promote this protection policy offering, a 'Register My PS4' project was launched where customers could find out more about the offer, take out a policy and make a claim should their PS4 break. This project involved designing a subsidiary site that would reside within Playstation's domain and be built by Domestic & General's Development Team. Considerations towards Playstation's branding were paramount as the Register My PS4 design had to reflect the aesthetic of Playstation 4's website; ensuring a seamless user journey from the main site to the subsidiary one and also maintain the brand identity. The site was to be designed for both desktop and mobile resolutions and would consist of four main pages: home page, protection policy, make a claim and contact us. Once the requirements had been validated and problems identified, a project map was created where objectives were defined and tasks were assigned to each team.
UI Conceptualisation.
After the initial meetings, management had decided that although wireframes weren't necessarily crucial on this project, UX best practises should be integrated into the UI designs. The information hierarchy on each page were to mirror that, where applicable, of Sony's PS4 website. Assets and a brand style guide were sent by the client to be applied to the UI. Before any conceptualisation could commence, I studied the PS4 site to absorb the site holistically and at a granular level. My aim was to understand how certain elements were placed on a page, where and how content would appear with regards to the treatment of typefaces for titles and paragraphs. I analysed the application of the colour palette, the treatment of imagery and other subtle design characteristics i.e. the 'step' technique used to separate page sections.
Current iteration of Playstation's UI
The next step was to gather the approved copy from the Content Team. Working closely with the Senior Content Writer, we looked to condense the business and legal requirements into tangible and user friendly content. This content had to adhere to Playstation's tone of voice and be in keeping of gaming themes. We reviewed the areas in which content would be placed and determine how long or short it could theoretically be when applied to the UI. After the Senior Content Writer gained approval on his proposed content by the Legal Team, it was handed over to me for implementation.
The homepage consisted of a header that was styled to mimic PS4's, the only difference being the presence of Domestic & General's logo in the top right, instead of Sony. The hero section utilised one of the images sent over to us by the client and was placed within a 'step' mask, accompanied by the use of PS4's distinctive content containers and CTA button. Playstation's typefaces and font sizes were applied to the titles, paragraphs and CTA text to maintain consistency. The branded △ O X □ symbols were placed between the page sections with the intention of recreating the PS4 symbol animation upon development of the site. The section underneath employed the three column approach, each column representing one of the other three pages within the subsidiary site. Here I used PS4's iconography and shadow effects, accompanied by the relevant content and CTAs. The footer was designed to house Domestic & General's legal content, links and logo with PS4's colour palette and radial gradient applied.
The other pages within the site utilised a similar structure to the home page. The hero sections swapped out a game-themed image for PS4's generic imagery, complete with content containers, △ O X □ symbols and gradients. The content section following on from the hero contained product imagery cut-outs to support the product content, sitting underneath the section's brand-specific title and subtitles. The next section within these pages showcased additional, relevant information. The Protection Policy page featured a list of user benefits, arranged to reflect PS4's grid-like style with icons in accompaniment. The Contact Us page incorporated a series of accordions to display and hide more information regarding the various contact methods. The Make a Claim page differed slightly in that it featured one of the images sent to us by the client and applied to a a full-width image banner. This was used to catch the eye of the user and entice them to register their PS4 and purchase the policy. The page included an additional section situated underneath the banner; it showcased what the claims journey process entailed by means of iconography and content.
Upon completion of the initial desktop and mobile UI, a meeting was set up to review the designs with the Content, Development, Legal and UI Teams. The designs were presented, rationales were explained and in turn, feedback was gathered and a Q&A session was held. After scrutiny of the designs and reviewing what functionality was involved, each of the teams gave their respective approvals. The next step was to gain approval from Sony. After waiting in anticipation to hear their thoughts, they responded with favourable feedback and approval to move the project forward to the development phase.
Finalised designs of Register My PS4
Development.
The approved UI designs were uploaded to Invision for the Development Team to access and inspect the styling properties. The background imagery and cut-outs used throughout the site were prepared in high-resolution JPG and PNG formats respectfully, with icons prepared as SVGs. The typefaces used were handed over to the Development Team for implementation on their systems and libraries, along with the brand style guide for further coding references. I explained to the team that I wanted to recreate the △ O X □ symbol animation and showed them how the functionality operated on PS4's website as reference. In addition to this, I showed the team how other functionalities such as the accordions, hover states and the hero carousel should behave. During this phase of the project, I acted as a consultant for the Development Team when questions arose regarding the UI. Feedback was also supplied when various mechanics had been built, leading to further collaboration between the teams.
When the development of the Register My PS4 site had come to its conclusion, the project was handed over to the Testing Team to determine whether any pain points occurred across the user journeys, any system errors could be produced and whether the site's affordances, signifiers and feedback loops behaved as intended. During this testing phase, I conducted a front-end review as a means of quality control from my perspective. I notified the Development Team of any inconsistencies that required amending between my designs and what appeared on the browser. When each team was satisfied that the Register My PS4 was fit for public consumption, the link was sent to Sony for the final seal of approval. Suffice to say the team 'levelled up' when the client was happy with the results and saw it fit for launch.