Mobile Game Page Redesign

UX/UI Design

Home > Projects > UX/UI Design > Mobile Game Page Redesign

Client

Company
Spil Games

Product
Portals (a.k.a. websites)

Project Type

UX/UI Design

Tools

Sketch
Adobe Photoshop
Avocode
JIRA

Date

2019 – 2020

Mobile Game Page redesign for Spil Games websites.

Project
Redesign the mobile game pages of the Spil Games websites so they are optimised for Google’s mobile first indexing. This means that the mobile size of the game page should have all elements (content, text, images) available that the desktop size has as well.

Process
I started out by writing down all the different elements, interactions, text and content that was available on the desktop version of the Spil game pages, so I had a good overview of what needed to be there in the redesign of the mobile game pages.

Together with other stakeholders (product owner, developers, seo specialist) I discussed the development constraints and possibilities of the platform and what elements we would like to keep, add and remove.

When everything was clear, I created redesigns for the different pages and for single functions such as the “add to favourites” function and share functionality.
I stayed in close contact with the developers about the re-design, to discuss any issues and to come up with solutions together.

Redesign
The new mobile game pages show all the content that’s available on the desktop game pages, but optimised for mobile viewing.
This meant that the games would open full screen and they would need a back button in the game to go back to the original game page. It was made so that even if the user would go back to the game page, the game would keep running in the background and they would be able to continue playing if they wanted to.

Since there are Flash games on the websites that are not playable on mobile, I had to create a message to the users to explain that the game doesn’t work and to try and convert them to other games that were playable on mobile.

Tools
I created the designs in Sketch and several smaller elements (e.g. the start/continue game icons and text) were created in Adobe Photoshop. I delivered the designs to the developers with Avocode.
All progress of the project was kept up to date in JIRA.

 

Mobile Game Page – Before

Mobile Game Page - Before

Mobile Game Page – Redesign

Mobile Game Page - 320w
Mobile Game Page - 768w
Mobile Game Page - 1024w

Continue Game – 320w

Mobile Game Page - Continue Game Banner 320w

Continue Game – 768w

Mobile Game Page - Continue Game Banner 768w

Game Not Available

Mobile Game Page - Game Not Available

Options Menu

Mobile Game Page - Options

Favourites

Mobile Game Page - Favourites

Report Game

Mobile Game Page - Report Game

Walkthrough Popup

Mobile Game Page - Walkthrough Popup

Share Menu

Mobile Game Page - Share Menu

Back Button In-Game

Mobile Game Page - Game Popup
© MYKN Design 2022. All rights reserved.