Sony Interactive DESIGN CHALLENGE
(1/4) Screenshots - The Game Grid
After reading the requirements, I started taking screenshots of the top 100 games grid. across mobile, console, and web. The resources provided in the PD4 were too low resolution to provide detailed comps. You can see in the last images two images, I used Photoshop to remove UI elements and get a clean version of the most recent system 4.0 ribbon.
(2/4) Thoughts & Sketches
I saw with the game grid and to ideate around what I think could be improved. I also wanted to think for a moment about what the general geometry of a game would be. I still think circular representations would be very interesting. I also took a picture of my TV from a far, just to sketch on it and see how much information density I could get without being too unreasonable. Below is a summary of my open questions / critiques of what is in the store now:
- Lots of duplicate labels – top games, top 100, past 7 days, all could be the same label
- "Full Game" – why is this need to be said, isn't it assumed, unless I'm buying DLC or a free demo?
- PS4 vs. PSN vs. Bundle etc. – these labels don't feel alike, PS4 is a console, PSN is a service, Bundle is a concept. I assume everything I browse for will play on my PS4, so perhaps on the console all of this metadata can be removed or consolidated
- Price – Show me something is a bundle near the price, not as part of unequal metadata.
- Controls – it seems to me that where you tell someone what buttons to use to access menus are far away from those menus, and perhaps there's a design solution that can eliminate the button guide all together
- PS4 above Top Games – I know... I'm on PS4.
- Download Now – weird that every game leads with a title and the feature leads with a call to action
- What's the brand? – The Playstation store seems to have different logos on web, and console, and the sony logo competes as well,
(3/4) The Concept
I wanted to take the existing designs and improve them in the following ways:
- Remove Duplicative Data
- Clarify how to access basic navigation
- Replace Metadata with something more meaningful.
Point three here is the most important. While the other two are mostly usability problems, the third is a behavioral problem. For the question of how to maximize the value an impact of content, I started thinking about what drives gaming purchasing decisions, and a reoccurring theme was that of my friends. Social validation is a powerful conversion tool, and I figure it could break down like this:
- Show on games how many friends are playing
- If a game is not yet released, give people the opportunity to "hype" it - showing their intent to purchase
- Show me how many friends are excited about unreleased games
So with that I began working on mockups that removed that focused on the things above.
I explored three concepts, and extended them onto different platforms to see what elements worked and what didn't. Each deviating further from the current UI than the previous. I think Concept C best shows my personal aesthetic, and attempts to honor the themes of seamlessness, and content-first the most. It also pays homage to the color palette of Playstation's design heritage. But I find the flush grid of artwork didn't translate to mobile, so I left the separation there.
Thanks again for checking out my work. It certainly gave me a taste as to the type of challenges you guys face, and made me excited at the idea of getting to work on more of this stuff. As with any design, there was a lot of iteration and refinement along the way, here's a gallery of all little tweaks along the way, you'll see me slowly coming around to where I ended up.