James Hankin

Pocket Fortune Brand & Website Design

Role: UX Designer (research, interaction design, visual design, branding).
LENGTH OF PROJECT: 1 WEEK.
Project date: January 2017.

Project OVERVIEW

Pocket Fortune was a new sub-brand of online and mobile casino gaming brand, mFortune. The company was growing quickly and were keen to add a new, more fun brand to their portfolio. I was tasked with building a modern and entertaining brand that was progressive but still fit in with the style of the companies 3 other online casinos. I was given 1 week to create a logo along with a mobile and desktop design for their website.

Task One - Branding

Objective: To create a modern, colourful brand using a font that can be replicated on the website.

Before starting on the website design, I wanted to create the brand identity so that design elements from this could be used on site. From the research I had done on mFortune and their current game offering, the newer games that were going to be associated with the Pocket Fortune brand had a more modern design style. Pocket Fortune games used flat colourful graphics and looked more like apps than games. To have a cohesive feel to the brand, this is the design style I chose for the logo too.

I centred the design of the logo around the word ‘Fortune’ and imagined what might attract a user to a brand using that wording. I incorporated fun elements that were linked to objects that you associate with luck, chance and riches like dice, coins and a lucky horse shoe.

Finally I wanted to make sure that the branding colour was bright and eye catching but that it also worked on both a light and dark backgrounds as this would be important for marketing, especially on the app store where the games are found. The primary purple colour that I chose worked well with a complimentary gold/yellow which was great to use on coins and the horse shoe. It also stood out when used as a primary call to action button.

Task Two - Website Design

Research and Analysis

As the Pocket Fortune brand needed to be in line with mFortunes other brands, my first step was to do an audit of the 3 sister websites and look at what they did well and what was missing. Each site was fairly simple, they had a homepage with one call to action to get the user to register, and banners that linked through to each game. Each game had its own landing page that gave the user either the option to play the game in their browser or to enter their phone number and a link to the app store would be sent to them via SMS.

All 3 websites had a similar modular layout so I made sure to stick to this in my design in order to keep the build easy.

Whilst each site was simple, there were a couple of UX issues that would need to be rectified. Homepage banners had hover effects that revealed two buttons and whilst this worked fine on desktop, it added an extra step to the mobile journey by forcing the user to go to the games landing page. There also wasn’t a way to search or filter the games and the amount on each site was growing quite quickly.

My competitor analysis showed that the main focus for each game should be on the jackpot the user can win. This was an important element that was missing and was a good way to entice a user in.

Design

As Pocket Fortune was a brand for mobile games, I designed for mobile first and expanded the content for desktop.

Homepage key features

• Category filters added to help the user find a game that suits their playing style. These anchored to the bottom of the screen on mobile like you would expect on an app.

• Using a card layout enabled each game to have their own set of buttons that were no longer hidden under a hover.

• Each game clearly shows what jackpot can be won and this can also be used to filter the games.

• ‘New’ labels on the game cards help the user recognise new content.

• On the desktop site, the dice from the Pocket Fortune logo have been used in the background of the site to keep a constant design narrative.

• Small search added to the nav bar.

Landing page key features

• Jackpot prize total added at the top of the page to entice the user.

• Screenshot gallery added to give the user an idea of what the game is like.

• ‘Similar games you may like’ section added to try and stop the user leaving the site if they reach the bottom of the page and haven’t found anything that interests them.

Project Conclusion

On the back of the Pocket Fortune work I was hired as the Web Design Manager by Intouch Games, the company that owns mFortune and all sub brands. Whilst the Pocket Fortune brand was never launched, we did take the design style and implement it onto one of their other brands, Mr Spin. This work is unfortunately under an NDA.