TL;DR; A set of helpful tips for creating effective online brand guidelines for a responsive website with dynamic content and multi-width navigation. To ensure adherence from all stakeholders provide template downloads or example files to effectively showcase the brand in a finished format.
My personal Top 5 tips on creating online brand guidelines.
Building guidelines is always a challenging task, building guidelines for a responsive website with rapidly changing dynamic content, easy-to-use multi-width navigation on a truly scalable and highly transactional website is a step up. From a CMO perspective you need it to be brand aware; a CEO would want guidelines to be useful tools for your brand ambassadors and the sales director would need you to highlight features while your product team wants details, detail, details… and what about multiple brands, don’t get me started?
Interactive PDF Clients are finding it increasingly beneficial to actually click or tap through a proposed user journey. With Adobe Acrobat and the UX Design Tool Omingraffle, here I create a clickable prototype. Simply download the PDF below, launch full screen in Acrobat either on your PC monitor or tablet for tailored interactivity.
Contrary to popular belief, casino players are not the wildest bunch. Serious players are only interested in one thing, the game. The route to that game isn’t so important. Fancy UI, extravagant menu systems with all the bells and whistles are not the way forward. More and more white space and using bigger type sizes, hit areas and buttons not only help this type of user but are very touch friendly translate across-platform and avoid a lot of refactoring.
So, key drivers here were familiar menus, mass content and game play.
Handling Cross-Channel Consistency
As with every project, there is always some baggage. This one came in the form of its baby brother, the iOS mobile version. Although only on its infancy itself, there was a president already set for the UX.
Easy access to every game using an simple user journey
Treat your home page as a shop window
Using the ‘shop window’ metaphor, this was the place to exhibit your wares. To show off your new releases, latest promotion s and tour game categories. I have been using “Kiosk style” buttons more and more recently – i.e rather than present 4 radio buttons options, opt for the more visual display of text in rounded corner boxes (which actually aids in spatial recall and creates a bigger hit target)
Showcase your ‘Game page’
Immediate immersion vs laborious registration processes – this comes from the game design world where you follow with account info after someone’s “played” or interacted with you service.
Quick access with mini lobby functionality
In game access to all other games. Drop-down and slide out drawer options are currently en vogue. Load them with information and graphics with “minimal” styling – keep in mind greys or desaturated colours and use bright colours to draw attention..
Increased focus on intelligent and well placed legible typography. Consideration around extra long game title and of course, language translations are top of the UX list here.
On-Boarding
The users first interaction with your experience, so make a good first impression! Big type sizes, big hit areas and big buttons with plenty of white space – so that Web apps might also be touch friendly w/o a lot of refactoring.
Last Played / Favourites
What I’ll call “As you need it” functionality – instead of functionality being exposed by default, it’s presented in a series of sequenced moments (clicking on “add a comment” link or box turns into expanded box with more options, OR rating something exposes a comment field
Auto save functionality (vs big “Save” button)
Login and Open an Account
Inline expanding areas for additional information/actions and single column layouts – less distracting and mobile ready with friendly, conversational language around form elements. Here there is also a focus on content being given proper information design treatment font hierarchy and type sizes, caps and shading, etc. to aid in understanding, all wrapped in appropriate and well chosen typography.
Conclusion
Overall I was keen to push very subtle textures and draw lite contrasts that guides the eye through a page. Modern iOS screens can handle these delicacies better than the monitors I’m designing them on!
Keep things consistence, and keep them simple. Reflect back to sister applications and build some parallels. Appreciate pre-defined paradigms, and follow existing patterns to drop that cognitive load. Take a lead from retail, and exploit the ‘shop-window’ metaphor and finally, make your registration gradual and progressive. Slowly ease the user ‘through the casino doors’ by making login seamless.
A big ask I know – but this is the challenge of the modern-day UX-er.
Pique’d your interest?
This is but part of a selection of design information russellwebbdesign generated for the creative community out there. Please contact me further to discuss how your brand can benefit from the new channel: info@russellwebbdesign.co.uk
If something has peaked your interest. Please leave a comment below.
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.
TLDR: El Corte Inglés, a retail giant, needs a mobile app refresh to captivate customers and boost sales. Create a seamless shopping experience with: intuitive navigation, media-rich content, that is mobile-optimised Features and has a streamlined checkout to transform their UX into a powerful sales driver.
El Corte Inglés S.A. (English: The English Cut as in tailor’s cut), headquartered in Madrid, is the biggest department store group in Europe and ranks 4 worldwide. El Corte Inglés is Spain’s only remaining department store chain, as well as owner of several associated businesses, such as supermarket chains Hipercor, Supercor & Opencor, fashion chain Sfera as well as a travel agency (Viajes El Corte Ingles) and telephone provider (Telecor).
Brief
Incorporating a nav search, a store finder with the traditional basket top right design a media rich experience for shopping on your phone. By captivating a customer and therefore increasing spend, design a system of sub navigation that is convincing and compelling. Drilling deeper into the experience, screens can display products with the the added mobile features of sort and zoom. Product Info and descriptions, including ‘Add to Basket’ and ‘Wish List’ functionality plus the ability to share your purchase are all important consideration.
TLDR: A UX designers guide to enhance their skills. How to conduct a content audit using user personas , how to create experience maps that explore user behaviour and emotions and finally a downloadable toolkit containing essential UX tools like mobile interface templates, icon templates, and wireframing tools.
To provide a quality UX service for companies small and (very) large you need to supply yourself without the right kit. Once you’ve gone beyond the usual suspects (MacBook, dual screens, sketchbook, etc) there come the need for a current and useable digital toolbox.
