As well as the home page the PDP (product description page) is another important page of the site. The business didn’t feel the current PDP at the time was holding up to the modern, sleek rebrand we take on. A lot of limitations were getting in the way to promote most of our key titles so a change was needed. Most of Green Man Gaming’s customers land on these pages and make the decision to buy the game or not. The page holds all the answers to the questions asked by our customers about the game showing: DRM, Platform, Screenshots and more importantly the Price. Redesigning the page was a sensitive project to work on as all departments wanted their mark on the page, so processes and mockups took longer to be approved.
Old PDP (Left) New PDP (Right)
The research was key to creating this page, we looked at two routes tackling this project: user familiarity and competition. If a user knows a well known PDP should we cater and replicate this experience for them? What were the competitors doing to display products on sale?. These were just a handful of questions that needed answers. I felt ‘re-inventing the wheel’ wasn’t an option on a page with such importance and looking at other sites and their PDP’s nor was it to them either. Patterns started to emerge of price, DRM, platform placement, all of the main information was grouped together in a container cascading down to CTA (call to action).
Refined wireframe of the page in Balsamiq, to the final outcome.
With the list of requirements and a wireframe were happy with, I began working on building the page to the brand and producing various scenarios of how different products could change the way the page looked eg: Sale item, different DRM’s & editions. Not only we had to make room to for the information but the product library assets were set up for the old PDP so we had to use existing product images to fit in with the new PDP. Implementing the page went smoothly and the business was happy with the outcome as this made the store more user-friendly.
Wireframe, Specification & Live view.
Desktop & Mobile view. Responsive page.