Over the last few months I was tasked with producing the ‘best-in-class’ mobile sports book and casino. As Lead UX, it was my responsibility to satisfy specific user journey’s, demanding stakeholders and limits set by the Tech Leads. I wil also be showcasing certain features, and from an Agile perspective how they fitted both into the roadmap and overall experience.
But first I’m going to give you a preview of what’s to come. This is one of the more complex mobile programs I’ve been involved in throughout my career so I’m going to attempt to split it up into manageable chunks.
First up: An overview
This is the first 10 steps to take your mobile design skills to the next level
Watch the animated version here
When designing for the desktop you can consider the end-user environment, when designing for print you can picture where the magazine will be read but when design for mobile the end-user scenarios are so varied and so far ranging that todays savvy mobile designer needs to develop an entirely different skill set.
This is the edited version of a presentation I gave at Mobile Meet Up on Tues 27th Sept about ‘10 key considerations when designing for mobile ‘. I must stress this doesn’t mean there are only 10, in fact it’s the opposite, there are many more considerations. But here are my top 10:
1. Real Estate
Whether you coming from a desktop background or from advertising the canvas size you have to pay with is drastically reduced on the mobile environment.
Over the years the relative screen size difference has increased. The difference between the smallest (128 x 128) and the largest (800 x 480) is now a factor of 23. That means the largest screen is 23 times bigger than the smallest one.
2. Design with distraction front-of-mind
1.0 Aims and Objectives
To produce the best-in-class iPad and iPhone App for playing slots and table games.
Recently I was involved in conceptualise and leading the UI for a iOS casino App for both iPhone and iPad. I’m not going to detail all design decisions here but walk you through my perspective on why branding for this product is so important and why the decisions made differentiate it enough to stand-out in what is already a fiercely competitive and crowded marketplace.
As a junior designer, way back when, I visited our local design museum (I studied in London, UK, so my local design museum was fortunately the rather impressive Design Museum in Shad Thames) and fantasied over how great it would of been to be involved in, say, designing a Charles and Ray Eames leather recliner, or Dysons Cyclone Vacuum cleaner.
Now I’m doing stuff I feel proud off, in the field of UX/UI, I thought it worthwhile to see if I could mirror the process these great designers took and document it from a UXers perspective. So, here we go. I started with the following criteria:
- Give users choice.
- Competition Analysis
- Design with familiarity in mind
- Prioritise features that add value – the “Magic Moment”
- Beautiful execution
- Todays’ Brave New World
Getting new sign-ups is arguable the ultimate challenge, but the process of helping people get started, called on-boarding, can prevent many users from feeling lost, overwhelmed, and confused. It’s your responsibility, as a professional UXer, to shake their hand and show them the ropes and take them on that ‘first date’.
Drilling-down on the detail of the betting coupon – on-boarding
The Do’s and Don’ts
Downloading and jumping straight into an experience you’ve just heard about is one of the most exciting parts of UX design. So, when formulating this, be conscious not build further barriers as part of the on-boarding. The ‘Skip’ or ‘Tell me later’ and continuous Swipe is an important tool.
Slide-in illustration of how to access your betslip
I have been recently working with a colleague on a private project around the world of media streaming. We had got to a level where the tech was getting up to scratch, but the UX was missing.
So, here it is.
Download the PDF: OnDemandStreamingService-Mobile_Tablet
On – screen blueprint representing the skeletal framework of the service. These provide an informed perspective to hit, or in this case, promote what will be business objective and a creative idea. As usual these lacks typographic style, colour, or graphics, as the main focus lies in functionality, behaviour, and priority of content.
How layout influences our design (Part 2)
Whether you are working in publishing, UI or advertising, the fundamental ideas (which may overlap) about the practice of good ‘layout’ composition will always form the basic structure of your design. The elements form the ‘vocabulary‘ of the design, while the principles constitute the broader aspects of its composition. Here I have compiled a second set of loose design principles that all revolve around the fundamentals of layout graphic design.
This is Part 2 of a 2-Part series: To jump back to the first part please click here
7. Pattern Design
Patterns always been a safe bet for the design arsenal. Repetitive shapes form the back bone of effective graphic design
Focusing on planning functionality and layout without design is the most efficient way of concentrating decision markers (especially business or product-owners) to agree on functionality without distraction. Think: function over form.
Personally I love to use traditional pen and paper for wireframing. How about you?
First launch feature areas
This is the main ‘shop window’ to the experience. On first launch, the user to launched in the gambling casino world. Pre-selected games adopt the ‘parallax scrolling’ technique and occupy the prime real estate. There is also functionality to drill down via category types. Account Management and Help are all ‘front-of-store’, as is the ability to push sign up and login promotions.
Every app needs an app icon and a launch image. This presentation concentrates on the all important Splash Screen
Sometimes you have to just stick on the headphones, crank up the tunes and grind through the dullest part of your iOS project. And that’s slavishly grind out the assets for all the iOS family, particularly the Splash Pages.
Here, for the splash screens I have broken down as follows:
- Size for iPhone 5 and iPod touch (5th generation)
- Size for high-resolution iPhone and iPod touch
- Size for iPhone and iPod touch
- Size for high-resolution iPad
- Size for iPad
For your iPhone
There is basically three sizes for portrait mode, for the most recent iPhone 5 or iPod Touch 5th Generation (as of present 2013), for the iPhone 4 and 4S users out there and for you laggards, the iPhone 3 users.