Welcome to the last of three articles dedicated to experience design deliverables. In first one we covered project discovery and research. The second article focused on how to play poker at a casino deliverables essential for successful project delivery. The goal of this article is consider how to wrap everything into a nice package for handing over to the client.

As mentioned at the beginning “design is collaborative process” in which delivery does not stand alone. Before we deliver, we have to make sure we test our product. No matter if you delivering all in one piece, or in small separate deliveries, you need to test.

Depending on the project and the client, delivering in sprints makes your work slightly easier because you are building on previous foundations so delivery is more focused. Review as you go. Delivering in small pieces of work is also easier, more focused and less tiring for the client. On each sprint, explain the big picture (which refreshes memories about previous deliveries) and then focus on the actual delivery.

No one could possibly survive a 100 page TECH / XD specification presented in a one hour meeting. Always keep three things in your mind – 1/ what we delivered last time (how we could possibly improve it based on previous feedback), 2/ what we will present today (a challenge + solution), and 3/ why we did it (the rationale for a given piece and how the solution fits into the project, brand, strategy, etc.).

Imagine a site which you build from empty pages as containers. Each time you see the client you present only one page at a time. This gives you the ability to deal with all questions related to a given page and then focus on how this page will be integrated with rest of the site. All parties understand their tasks, risks and challenges. Both designers and the client focus on one single page, behaviour or solution.

Deck vs. Prototype

How many times have you spent weeks crafting a deck presentation to communicate an idea instead of building the real thing, movement, transition or interaction? We widely represent ourselves as “interaction” designers but find that we spend 70% of our day crafting static documents and wireframes (with very expensive tools such as Axure) instead of working on transitions and interactions on their own.

… think about the client 

You could try to explain to the client how this amazing website works in a 20 to 50 page deck. Or you could just show them the real thing on a mobile, tablet or laptop. I guarantee you will see the difference. Things they can touch, swipe or click on become real. Something happens – a real connection, a real engagement. And most importantly, you will get real feedback.

Don’t talk about it – make it, show it …

Communication has two parts: you can either explain how it works or discuss why it works in the way you are proposing and what the rationale is behind it. Talking about the real thing is always easier than saying “imagine this… it will work this way”. Fundamentally, it will change the perception of the listener and also build trust between your team and the client.

Decks

Over the years I have learned that most decks, even those you keep for reference, are still on the server and you might have a hard time locating them. One week of work will shrink into a one hour presentation where everyone is “imagining” how this “thing” will work. Does anyone think “yes – that’s what we want” – really!?

The era of using decks to present ideas is gone. For once in the morning, instead of reading the news, tryhttp://givision.net/phoenix-casino-hotels/ and you will see what you can do.

Prototypes

Building a prototype is not hard. But we are still hearing that decks are faster. In some cases, perhaps. Especially if you present a strategy piece or planning with a lot of graphs then you definitely need to build a story and not a prototype.

Building a prototype will not stop you from producing a deck if you really need it. It helps you to consolidate the solution. Also, the review with the client will not be “imaginary” anymore; it will be “tangible”. Team “A” will continue prototyping while team “B” starts exploring other variations for navigation or perhaps designing another solution.

Following iteration and checking with the client, you will have already solved part of the challenge. Also, mentally, the wireframes, visuals and presentations are intended to be changed. They are not the final thing. Clients think and know they can still change things. However when it comes to the code, there is a time for you to say this is it – “final call”.

Business Decisions

It is your business decision to deliver 10 decks over the month to get approval on project X. Or you follow the prototype route and try to build something small – a page, a campaign, or a digital brochure. Once you start using prototypes regularly your client will not expect decks anymore. They will expect a rich touch enabled experience they can rely on.

It is a natural process in which we all need to grow – designers in building and clients in understanding the dynamic process. From the client’s perspective it is just perfect. Whether you think about accessibility for or share-ability with stakeholders the prototype communicates behaviours and interactions in real environment.  Also from the feedback perspective you negotiating over the real thing not a paper or slideshow presentation. A few times I have been in the situation where everyone in the meeting room just grabbed their smartphone and followed me on shared URL there the prototype was saved – a priceless moment.

We use to hear “it’s expensive“. Yes – adoption and the learning curve is as expensive as any other program or tool you need to learn.

Solution such as http://givision.net/how-to-play-casino-craps/,las vegas strip casino map,http://givision.net/buffalo-casino-game/ has become very robust, and the learning curve is not easy HTML. Prototyping in HTML is only going one way – it’s the way forward.

Time Management

Another real benefit of building prototypes is time efficiency. It will not happen overnight – some of us will be still faster in Photoshop or by sketching. But when you have a page and you want to change the order or list content, it is two lines of code and “Enter” instead of drawing, scanning and validating with several emails.

What if the code is not part of the delivery? Yes – in some cases the code is not part of the delivery. In such a case build a small prototype to verify your thinking and delivering the production “reference code” is above expectations. Furthermore, you secure your position in case someone else messes it up.

What if you create a page and need an annotation for the module or part of the text? Annotator could be one of the answers but there are many other tools which help you to make comments on the page.

Documentation

I know I said you can reduce the number of documents regarding the delivery. Documents help us to communicate processes, short and long term decisions, and challenges and solutions. Documentation is a necessary part of the UX process.

Define the feature list, write epics, user stories or personas. All these documents have their own place and importance. Use them wisely and try to develop a system between them which allows you and your team to communicate more efficiently. That does not mean if you have a template you need to stick to it. Improve your documentation workflow as you go.

Guidelines

Guidelines probably deserve a separate article, but before we get to that point, let’s mention at least what type of guidelines we have and what they are good for.

Brand Guidelines

“These are the key strategic statements which provide a guideline for the strategic handling of the brand by all stakeholders. The key statements concern brand relevant content, such as brand image and future expectations but also competitive advantages and brand messages, in order to face the respective challenges.” (glossary / brand guidelines)

• Branding (Entrepreneur – unknown source).
• A practical guide to branding.
• The importance of brand standards.
• Best resource for building a brand guidelines.
• logodesignlove.com – presents a list of best style-guides.

Reference Code Guidelines

Recently, with all this prototyping, developers and designers have come up with guidelines that represent pieces of front-end code showing how elements should work / behave together in different environments. This little piece of code also holds the best practices of the recommended codebase.

It give the user, designer and developer a good start in understanding the hierarchy, dependency and most importantly, brand scalability. All these rules have one single purpose – to keep the brand consistent as it grows over time.

• Starbucks – reference code.
• Brand at University of California.
• Boilerplate – basic style guide.
• android.com – OS guidelines.
• mozilla.org – styleguide.

Delivery (Wrapping Up)

What is the conclusion, then? We need decks to communicate research, vision and strategy, and we need prototypes to prove our concepts and solutions. What we need the most is to have the client involved throughout the whole project.

Ownership

This might sound a little naive, especially in big companies, but the best projects that were done under best leaders and passionate contributors where the Experience Designers play major role of influencing the orchestrating their teams.

Experience design is growing rapidly. More and more we seem to be thrown in to projects that require certain methodologies, different processes and occasionally rebuilding our own strategy, balancing between digital products and services to find unique engagement solutions.

My advice for you is never stop learning because the junior design guy right in front of you knows something you do not and it might be the thing you need the most – “just another opinion”.

Keep learning, keep sharing and make you team happy.

Welcome back. After a little break we will continue to explore experience design deliverables. Last time we covered discovery from the business, user, tech, design and trend perspective. This time we will move to designing actual experiences including design strategy, flows and diagrams, iA, Wireframes and all kinds of documentation followed by prototyping.

XD Skillset and Deliverable Experience Design

• Discovery
  • Business Discovery
  • User Discovery
  • Tech  Discovery
  • Design Discovery
  • Trends Discovery
• Co-Design
  • Experience Strategy
  • Process Flows & User Journeys
  • information Architecture
  • Wireframes
  • Interactive Prototype
  • Designing
• Testing
  • Q&A
  • …

2.0 Co-Design

Co-design is a process of product, service or organisation development where design professionals develop solutions with users.

[WIKI] This process believes that by encouraging the trained designer and the user to create solutions together, the final result will be more appropriate and acceptable to the user. It is generally recognised that the quality of design increases if the stakeholders’ interests are considered in the design process.

Opportunity in co-designing relies on an immediate reply from the team and stakeholder. This also gives you  the power to design the right product for the right audience in a short period of time.

Experience Design Strategy

Almost every project includes a strategy piece. This sets project narratives and stable pillars that usually cover what the solution is, how the investor will benefit from it , and why the user should use it. These three pillars also give the proposal a stable framework that better reflects  social exposure, financial benefits, time relevance, tailored content or services you want to cover.

Wherever you think about the strategy piece you should have in mind a small “experience manifesto” – a basic premise about what “this thing” will eventually deliver.

• How to write a manifesto
• Why company needs design experience strategy
• Frog design strategy now
• Experience strategies by Jesse James Garrett

Content Strategy

Content is the leading part of the experience – everyone knows that, but no one really does it well. Whether you design a site for a travel company, bank or mobile retailer, keep in mind that “the content leads to decision making”. The content differentiate from project to project, purpose, location, situation, social relevance and the device on which it  is received and consumed.

• Please watch Karen McGrane’s famous talk about optimising your content for the future. She covers the most recent challenges in digital publishing.
• Also, Clarissa Peterson’s presentation about content strategy.

Experience mapping

A good experience map clarifies relationships between existing and future components. Identifying all the different inputs and outputs and points of difficulty shows you where the opportunities for improvements lie.

• Experience maps on Pinterest
• The Anatomy of Experience Map from Adaptive Path.
• UX Magazine define opportunities with Experience map.
• Tyler Tate talk about Cross-channel blueprint – Experience Map

Process Flows & User Journeys

The goal of the user journey is to visualise in detail all the steps of the person (most likely above defined Persona) going through the proposed experience to achieve a certain task (order a ticket, buy a book, transfer money, etc.). It shows all the interaction points within the experience (web, app, etc.).

Recently, the user journey has become a representation of different aspects of the service journey of a user across different touch points where mobile, tablet and desktop plays major role. Keep in mind the need to anticipate  these challenges.

• An introduction to user journey in detail from Jason Hobbs
• What other people do – User journeys
• Stop designing pages and start designing flows from Morgan Brown
• Pinterest resource for User Journey

User Scenarios

Use scenarios position predefined user types in natural contexts or real live situations. This gives you insights about how the system, solution or service fits into real people’s lives.

• What is a Scenario?
• What is User Scenario Mapping
• Use Cases and User Scenarios (IxDA)

User Story

A good user story is not about describing an experience but more precisely annotating the task to help designers to observe and define problems. Quantifying the opportunities in more narrative and tangible ways helps to make the right decisions.

• Business driven user stories applied in agile development
• Behaviour Driven Development
• Behaviour is more useful than test written by professionals around the world.
• Agile development methods & Scott W. Ambler Associates

Personas / User types

User types are defined in the set of objectives that shape habits, rituals, needs, and personal or financial goals (whichever is preferable). Defining user types also shows how the user adopts habits over a day while using the product or service. This information is then categorised and communicated on a single page.

• Great article at UX Magazine building the foundation of the project
• Web-usability covers objectives of developing the personas (Yeevon Ooi)
• In-Concrete personas – Man, 33, manager, tech savvy, medium income.
• Concrete personas - Tom D., he is a 33 year old property manager from Newcastle who runs his own business via various digital channels. He is interested in property development and investment outside the UK. He lives in London where he … and so on.

information Architecture

iA typically represents a model or concept of an information structure explicitly describing the complexity of information systems. Whether we talk about tangible experience (pages, sites, databases, intranets and communities) or intangible experiences (services, technologies and connections)  iA is a summary of our gatherings and findings in a particular digital landscape.

• Practical iA from Donna Spencer
• SEO principles for iA
• Microsoft official page for Share Point iA – including templates, blogs, etc. very good source of information
• Building an iA Checklist
• Beginner guide for iA from Donna Spencer

Site map

A site map is a visual representation of the site in the form of a logical structure. This document organises key pages and sections typically in hierarchical or chronological order to describe planned changes in the system or part of the system.

• Hierarchy Site-map – focusing on page hierarchy
• Dynamic Site-map – Usually build in HTML to demonstrate cross-linking functionality
• Business Site-map – focusing on answering business related question (for example existing and new services or pages)

Wireframes

Wireframes generally visualise pages or screens with a focus on layout, structure, organisation, navigation and interaction before investing time in the design. Wireframes show the narratives, connection, extension and functionality of predefined components on the screen.

• Bill Buxton on sketching experiences at Institute of Design Strategy

Component Library

Some XD documents have a separate section called the component library. Each component describes functionality and scalability used across a proposed experience. These components then become building elements for your templates. They also define the complexity of the proposed solution.

Whether you are designing a small or a big site, keep you library organised. To get your component library under control is probably one of the hardest tasks in a project, especially if we are talking about RWD or Service Design components.

• Mobile version (iPhone, W8, NEXUS)
• Tablet version (iPad, W8,  NEXUS)
• Desktop version (MBP, W8,  NEXUS)
• Integration Framework covering most recent sources – https://www.graffletopia.com/

Responsive Wireframes

RWD wireframes have their own rules where the component library plays an incremental role in identifying behaviour across different viewpoints. RWD wires define where the components live and what  their role is in a particular screen or situation.

• Simple guide for RWD - from Adam Edgerton the Director of Project Management at Metal Toad
• RWD wireframes are death – moving to responsive prototyping

Interactive Prototype

From simple paper prototypes to pre-alpha software working models, drive rapid iteration and emotional engagement by showing how fidelity products will look and feel in the real world. Prototyping deserves an article by itself but the basic premise is go and try.

Offline

• Sketching UX
• Paper prototyping

Online

• POP iPhone app for quick and easy prototype
• Hand craft HTML5 prototyping tool
• UIE talks about picking up right tools for prototyping
• Love this article HTML vs. Axure
• I use Jetstrap

Narrative Reports

Writing is a great tool for thinking and organising. Open conversation and structured naming conventions make a project stable. This includes written reports, presentations, formal recommendations and proposals, detailed results or even analysis reports. All serve others in understanding the big picture or detail. As always, reports can get pretty detailed – keep in mind no one will ever read a 60 page document about one single interaction. Keep your documentation as focused as possible. Use the same naming convention across all documents so that consistency is your strength not weakness.

• Using same naming convention.
• Client workshops
• Brief Clearleft

Designing

Part of experience design is the design itself.  While building your documentation or prototype help your designer to see what is in it – do not work in a vacuum. Layer transitions, collapsed and expanded statuses, and so on, helps others to extend the viewpoint of the experience.

Concept Design

Concept design is a form of illustration where main goal is to contribute on visual representation of a design, idea, and behaviour for use in the final digital product. This techniques is widely applied in retail design, space design, fashion design and architecture.

• Hugh Graham on topic of Concept design

Storyboards

A storyboard is a series of narrative sketches displayed in sequence that tell a story and paint a picture by showing the interaction between users and systems in context over time.

• Storyboarding User Experience
• MIT on subject User Storyboards
• UX Magazine about Storyboarding

Bill Buxton on sketching experiences, Institute of Design Strategy Conference, May 2008 from IIT Institute of Design on Vimeo

Data Visualisation

An important part our current interfaces is visualising data. The amount of data increases as we start using the service related to performance. Whether we talk about physical activities or daily habits the data of the last decade has become an essential part of our lives. The challenge starts with organising these data into contextual meaningful visualisations that allow us to understand changes without diving into detail or studying spreadsheets for hours.

• Manuel Lima – and his site visual complexity
• Data Visualisation in Sport – Strata
• Data visualisation in healthcare – Fitbit

Lloyds Money Manager on Vimeo.

Retail Installation

In the last decade the retail industry has moved towards an experience window rather than a shopping hub. This change brings new challenges in terms of interactivity and integration with existing services.

Everything that has been presented above should give you an idea of where you stand and what you need to do. The next step is human interaction in a real space. Have a look at these three case studies, which cover all the above points.

• Retail Success Adidas
• Nike-Airmax-2013
• Nike-Fuel-Rally

Conclusion

Design discovery is as important as designing itself. The things that come right after are the evaluation of design, behaviour triggering and finally, the return on the investment.

The third article will not be only about Q&A but also about guidelines, scalability, business expectations and time management.

Let me know if I forget anything.

Experience design (XD) is a discipline that has grown over the last few years into a fully independent field.

As an experience designer in this field, you soon realise  what a big influence on the project and the client we all have. With this responsibility in mind, I asked couple of colleagues  with expertise in the same field the simple question: what skillset do we cover and what type of deliverables do we produce?

This article will summarise all findings into one, hopefully, complete comprehensive document.

XD Skillset and Deliverable for Experience Design

• Discovery
  • Business Discovery
  • User Discovery
  • Tech  Discovery
  • Design Discovery
  • Trends Discovery
• Co-Design
  • Experience Strategy
  • Process Flows & User Journeys
  • information Architecture
  • Wireframes
  • Interactive Prototype
  • Designing
• Testing
  • Q&A
  • …

Experience Design Landscape

Experience Design (XD) is a discipline designing products, processes, services, events, and environments with a focus on the quality of the user experience. Experience design extends to other disciplines, including cognitive psychology,  perceptual psychology, linguistics, architecture and environmental design, product design, information design, ethnography, brand strategy, interaction design, storytelling, heuristics and the communication of service design thinking.

Discovery

Business Discovery

Business Requirements Gathering

Understanding the client landscape is essential to any project related to the digital environment. Simple business gathering can take a day or two (which is mostly used for pitching). Proportional gathering across all digital entities can take over a month and we usually call a discovery session once the project is up and running.

Clients’ digital properties are divided into two separate groups: owned and related (but not necessarily rented). Owned digital properties are places where we have full control of the digital environment (data, APIs, UI, etc.). Related spaces are mostly blogs, social networks and services that bring the audience to our website or platform. Both need to be wisely integrated and well managed.

All our findings are then collected in spreadsheets. A simple matrix compares functions or features across  different digital properties, markets and competitors. These data are ranked from 1 to 10 depending on how granular our evaluation needs to be.

Competitive Analytics

• Local vs. Global market – domain.com  / domain.co.uk, .eu, .fr, .de, .it etc.
• Owned
  • Website(s) – list of products including future scale etc.
  • Integrated Campaign which live on their server space
  • Offerings – special offers, seasonal offers, best sellers, most popular etc.
  • Platform – Intraweb, CMS, Billing System etc.
  • Services – CSM, call centers, delivery service, return policy etc
  • Channels – Physical vs. Digital (TV, Add, Campaigns etc.)
• Rented
  • Social network (Facebook, Instagram, Twitter, Youtube, Vimeo, Google+ etc.)
  • Propaganda (News & magazines)
  • News (Flipboard, Feedly, etc)

Competitive Landscape Gathering

This technique is used for collecting data about clients and their competitors in one place (usually 3 to 5 competitors).  Then you have a chance to see clearly which competitors have better products, offerings or even customer services. By using unified system values you can determine the health of the digital environment within a particular area.

• Heuristic evaluation is a recommended technique that allow you to measure part of the experience
• Content Audit - content strategy etc.
  • Internal - intranet, internal communication etc.
  • External – web, campaign, PR etc.
  • Shared – news , channels – Facebook, Youtube, Instagram etc.

Clients Requirements Gathering

Another important part of requirements gathering is internal workshops. Those recently become very popular and equally overused techniques to get more insights from the businesses and depended digital offerings.

Designing the e-Commerce site means designing “ the behaviour of digital landscape”. With this in mind, you equalise your and client knowledge

• Client Workshop – interesting source from IXDA
• Co-Designed – client workshop advice from Paula Wellings
• Understand the client internal procedure and processes (logistic, hierarchy, delivery)
• Understand client internal challenges (dependent businesses & 3rd party contract)

User Discovery

Usability Research

Understanding how users access services or products is the key to success. All digital properties have to work on different platforms and resolutions, but also in different situations. You need to make sure all  findings are evaluated  against the same criteria.

• Accessibility (or getting started with accessibility assessment )
  • Devices
  • Platforms
  • Languages
  • Application forms etc.
• Readability
  • Small screen (google docs spreadsheet)
  • Zooming (google docs spreadsheet
• Interaction
  • Unified interaction patterns across all touch points.
  • Paradigm and themes(google docs spreadsheet)
    • Unified registration forms
    • Unified payment methods
    • News channels
• Tools
  • W3C – recommended tools from W3C
  • Patterns – this is one from many examples

Access points

More frequently we are designing outside the digital space. Bridges between CSM’s and retail environments have to work and match consumer needs. All these segments of the experience have different entries: mail, brochures, phone calls, a click or touch of a button – all of them sending a message or request to the system. Make sure your system responds equally well to  these different calls.

• Retail vs. Digital – User journeys – User Scenarios
• CSM – Customer Services Management – User Scenarios
• Ecosystem – Service Design Map
• Service Design tools

User Research

The complexity of the current digital environment would not work without user contributions. Capturing these inputs in a tangible form has several benefits.

The first one is a clear distinction of user groups and their needs,  which has immediate impacts on the business. The second benefit is mapping behaviour patterns against future trends.  The third is disclosure of socially relevant communication that is integrated into the core of the business model.

• Target Audience – Age groups
• User Interviews – Focus groups, Surveys
• User types – Early adopters, Mass, Active, Trial Users, Advocates

User Surveys

User surveys are a predefined set of questions  placing the user in particular situations.  They can give  a real insight into the first set of improvements that you should consider. The same questions used across multiple audiences can reveal existing gaps and set for immediate challenges.

• Accessing the experience – how, where, when?
• Maintaining the client Relationship – accuracy of the response, social relevance, report a problem, help etc.
• Experience in Social space – does the brand know the user and does the user know the brand?

Analytics

This discipline allows you to look inside the digital landscape of the company that already exists. Summarising all information into one document will eventually support your previous findings and crystalise the tasks you should focus on. This includes owned and rented sites mentioned above.

If you are in an unfortunate situation where the client does not have any analytic whatsoever, propose that they install one and set the parameters as follows.

• Number of users (How many users access)
• Location (Where they are accessing from)
• Time (When they access the site)
• Drop off time (How long they stay on the site/page)
• User groups (How many user groups they have and how granular they are)
• Demographics (What type of demographics they have)
• System (From which system user access the site)
• Browser (What type of browser they use)
• Device (What type of device they use – laptop, tablet, mobile)
• Language (How many languages they support and how many of them are actually working)

This should give you decent insights into the audience and the current health of the site.

Tech  Discovery

If you are not a design studio of “one”, do not do it by yourself. This part is for developers and the developer department only.

Front-End discovery

The best situation is when the front-end is separated from the back-end and work is on request through the API. If this is not the case, ask your developer what you can touch and what has to remain.

Draw for your development team a diagram which communicates clearly what is front-end and what is back-end. Be part of the team (you could save yourself a lot of time internally and externally to communicate changes and propositions).

• Current System Architecture (front-end & back-end integration)
• Proposed System Architecture (changes in front-end & back-end)
• Implementation diagram (work out for your developer)

Back-End system discovery

This discovery defines the health of back-end systems and of course, the future scalability of your proposed solution.

As an experience designer, be part of the technical discovery. Keep in mind that everything you do will eventually set up the limitations and clear directions on what can be done, what has to be build from scratch from and what is absolutely impossible to achieve.

• System Architecture (databases, dependency)
• Code base (programming language – PHP, MSDN etc.)
• System CMS Technology – (health of the system)

Social

Evaluation in these areas running across all digital properties is the same as business requirements gathering above. These gatherings are focused on tone of voice, relevance to the brand, response time, quality of the response, but also more importantly, dealing with negative feedback.

Online audit

• Owned platform – Tone of voice, Customer service, Content, Number of owned properties – What is doing well and what is not.
• Competitor – talking about us, Social scale, Word of mouth, Social presence
• Social listening – talking about us
• Our Brand (market share, audience, sentiment, volume)
• Competitors Brand (tracker for social listening)
• Summary of findings – Recommendations (5-10 things to do)

Design Discovery

Following the same note I mentioned above for technology, this exercise is for designers and the design department only. We work closely enough? with our visual designers. Our documents get a taste of design elements and layouts, including icons, controls and BTN’s.

It also sends the client right message about what you are trying to communicate. To create one unified visual language that is implemented across all digital properties is the most important part of big projects.

Brand Elements

Each brand is built from elements such as logo, colour, patterns and shapes that can be used in the physical world (for example, on a business card) and also in the digital space (for example, as a profile image on a Facebook page, Twitter, Google+, Flickr, LinkedIn, etc.). This has recently become equally relevant to all digital offerings – having all logos the same followed by a unified visual system that is supported across the web, applications and native apps.

Design Components

Unifying the brand language starts with design elements and is followed by components that share the brand identity. Yes – advertising! The ad world is endless and complex on its own. Environments are increasing exponentially via mobile and tablet. Recently, we have all experienced the wave of ads being tested in places you would not expect.

“What is your brand Ad strategy” – do you have one?.

Think where these components appear and how they are related to the main site, product or even more closely, to your brand message.

• Facebook Marketing – Video
• Mobile Ads from Google
• How ads look in the new News Feed layout
• Android mobile ads
• Google AdMob reference
• Responsive ads offers solutions and ad technologies  geared toward the convergence of all screens.
• Making Advertising Work In A Responsive World (Source: SmashingMag.)

Design Controls

in a more sophisticated world where customisation is taking place we defining the set of controls (set of icons that represents these actions). As an example: B I U representing the action or behaviour in one unified cohesive system to edit text. At this point the collaboration between visual designer and experience designer is basically inevitable.

• Unified controls – BTN
• Unified iconography for the web app etc. (Example)
• Unified safe web colours
• Why it is important to unify the customer experience

Trends Discovery

Watching the trends becomes part of our daily lives. Evaluating and implementing these findings becomes a challenge in your everyday practice. Trends are important for you to set the right direction for the project – especially if it is  a project that will take  months or years to build. Make sure that your proposal document to stakeholders include the comparison to the trend you referring to.

• Industry Trends (Banking, Cars, Goods, Sports)
• Technology Trends (API, Language etc.)
• Business Trends (Business trends in particular area)
• Human Trends (Living, Socialising, Behaviours, Future thinking)

This is the end of the discovery session. Once this part is done, the team is usually ready to start work on the solution itself. The following article will be about co-designing, cooperation and modularity.

Let me know what do you think?

At FOWF – Future of web design 2010 in London,  we heard about real implementations and the benefits that change the way we look at the web ever again. 2 year we persuading our clients to not waste money of fixed solution and implement flexible one immediately one for all.

It seems like this year become the one where we no longer say this is normal web and this one is responsive – we just say “this web will work everywhere”.

“Web was always responsive”

Those who remember HTML era before <tables> came and mess entire WWW look on responsive design like “well, right now you finally got it”. I’ll safe you from buzzwords like separate cascade style sheets or other geeky stuff that is necessary to run these things properly. Let’s have a look at the client side of it and what does it mean in world of  business.

Not on mobile

If your business is not on the mobile today you a practically death, because those who are will be preferable source of information.

Let me teel you a short story about demand of data. Data consumption moved from the desktop to mobile almost 3 years a go. We are no longer researching on our desktops. Information become contextual, to the location, situation you are in or even context you referring to. Search on your mobile device will return different result of the services you demand based on your location. To search pizza in Singapore has different result than Bangkok or Kuala Lumpur. Globally related data become locally referred data.

Imagine you are on the short trip in the city you’ve never been to. You reserved yourself the hotel in advance. Printout get handy, but in the airport you split a coffe over it and you can not read the telephone number neither the address. “Free wifi” on the airport allow you to search. You go back to your emails – reveal the reservation again and you call the hotel to pick you up. Or perhaps you want to safe some money and you go by yourself. Open the website that unluckily is not mobile optimised. To locate the address  on the site was relatively easy, but there is no map. You opening the map on you mobile device in good will you’ll get the right directions. After getting the sense of the place and transportation points you start looking for the earliest train to the city – you choose the train.

On the train you realise you are off from the public wifi and you are back on your tarif. Bandwidth is very low and map get freeze. The location couldn’t be found. Then what …

Well you get the picture

We moved from the desktop to the mobile entirely. Our communication was transfered in to mobile where device itself become center of our connection to the world.  Time management, social involvement and recently health tracker or even payment tool – all this you can get from your mobile.

Whats your current option then

“Don’t panic” actually quite a few. You can write a separate piece of code that transfer your current site in to mobile version (not that easy – trust me). Or perhaps you can think about the new web – the responsive one.

In this case you have couple of option. I’ll highlight some of those that make a sense for SMB – small businesses. Considering that SMB is someone between 1-50 emoployee delivering product or services.

The first option you have is to choose pre-build solution which is already integrated with social media like a “Squarespace“, or any other similar service that provides responsive solution, integration, 24/7 support and good price.

Another option you have is the template world of WP, Jomola  (responsive-magazine-template) or any other CMS. In this sense be aware of variety of the code and pricing. One of my old client  bought theme for $24.99 with blessing himself how much he safe in forst place. Finally he spend $2.500 to integrate this solution to his business.

Of course you can choose customised solution which I’ll probably recommend but this takes time, effort, focus, good designer and very > very good developer. (I’ll talk about these in one following post soon)

Before you start

Do yourself a favour. Ask or get out there and find some analytics from your website. Who’s using it, how long they stay on the page, when they leave and why. Is it your consumer or just observer. Are they looking for information or buying.

“Write your self a small brief what is one single objective of your website.”

Who is doing it right

Just briefly few sites who do it right so you get an idea where to start. In terms of service offering – Hotell Web  is very good solution. As a visual person you might appreciate  some portfolio style presentation.  Andersson Wise use very nice transition between images and formats. Everything adapt to the screen smoothly.

Online store – Im glad you ask. Nixon Watches os the best one so far – and many other coming soon. We’ll look some of these in one of the following post about responsive eCommerce.

Finally if you looking for the news provider you might choose instead of Smashing Magazine or Mashable choose – Read Write in a while you’ll know why.

(More responsive examples are at media queri or this-is-responsive/)

Why

There will be many “why” and “why not”. Responsive solution are not answer for every website or service, but let me give you three reasons that always lead to company success and increase of ROI – return of your investment into digital world.

Clarity = Usability

Limited space allow you present only important information. Those information are relevant to the user in particular situation. Don’t overwhelm your audience with noise – be clear with your message – sen the signal. Every page has one single purpose.

Data = Loading time

imagine situation described above and think how much information you have on your site and how many of them actually make your business. Think again are they easy to locate and easy to access. Imagine loading your super design page on G3 network without WiFi.

Access everywhere

No matter what business you are in from build, construction, services to special offerings – you customer (user) can reach you via phone. Be accessible everywhere, all the time.

This Year

This year resolution shrink from 1280×960 to 640×960. Try to see your business through your smart phone. Why – because you can

(GIVISION is responsive since 2010 thanks to team Super Koderi)

Happy browsing.

Looking back at 2012 I have to say it was quite journey. I was actually wondering how much time we spent on the road and up in the air. So I grab a piece of paper and wrote all trips and destinations to see how far we travel, how many locations we visit, how much time we spend in the cabine, in the bus or in the car, waiting in the que or packing up to reach our destination.

At the beginning of the year we started in the Europe with small trips to Italy, Austria and Sweden. When the May pass we moved to Asia – Singapore to explore Malaysia, Indonesia, Thailand and some islands in Japan.

We spent enormous time on the roads but what is more interesting, was the time we spent in the air and on the airports. After 60 thousand kilometers up in the air you get the impression that this world is not big enough.

65.390 km is actual number according to google maps between all locations we traveled. As is common on every journey you meet a dozens of people that tells stories of their life. They travel from country to country, airport to airport, hotel to hotel or even from  beach to beach. Dots on the map so called cities become a location that earns it owns character, specifics un-tangible meaning tide up with incredible colourful memories. I tried to capture some of these moments and states of mind in small photo-book on Flickr and tumblr which recently becomes my public diaries.

(Total number of visited places this year is 132)

London > Stockholm > London > Vienna 

Everything starts in London. Venice was our first trip. Italy and all Italian people were so noisy ‘-), but in a while you just get use to it, and sometime even appreciate it. Incredible place to eat a lots of cakes - ladies. Destination between the airport and city was fair and within hour you can be in the hotel. After Venice I flew to Stockholm to support the project that has been assigned to me. Stockholm was amazing city. I had a chance to walk around the canals and city a bit. Lots of cyclist – literally cyclist heaven! Morning run in Djurgarden Park was just breath taking. Swedish people especially those I’ve meet, are very nice and open minded – I would love to come back. Following trip was to Viena in Austria. This airport I traveled over 40 times already. It seems to me like coming home. The positive things for the passengers Vienna has fastest check in I have ever seen.

London > Singapore

Moving to South east Asia happened literally over the night. Following day I entered to real summer. Singapore is one of the location in Asia that has relatively constant weather 32 degrees pretty much everyday.

Singapore > Tokyo > Nagasaki > Fukuoka > Okinawa > Fukuoka > Nagasaki > Tokyo > Singapore

In couple of days when I get settle down, I’m hitting road again and leaving through Tokyo to Nagasaki to spend my holiday. Booking via ANA was probably hardest thing in the world for the foreigners, but customer services in Japan were indescribable. Japanese people are generally very organised and externally polite. Arriving to Tokyo was reminding me again the time of my say in 2008 – 2009. For the transfer between the flights I had only 30 minutes and I was wondering I might miss the plane. In fact I manage even to have time to get アイスコーヒー (Ice coffee) and extremely tasty cheese-cake.

Nagasaki Airport

Next stop is the island called Iki - part of Nagasaki prefecture. Ferry transportation is quite common in South Japan and is extremely confortable. Organised que of people just moved as one on the deck in a sec – literally. 250 people in 5 minutes & ferry leaving docks.

Iki is famous for UNI if you don’t know – google it! If you do – this is the haven for Uni. Sushi, Sashimi, soup well basically everything was from uni – soo tasty. Our friend lend us the car so we could drove around. Driving around the island is very easy. Architects will probably knows Kisho Kurokawa and his work on Isshikoku Museum. 

Back to Fukuoka where we catching our plane to Okinawa. Two words “Okinawa is amazing” sorry it’s three, but you’ve got the point – this is the part of the world we I want to live. Okinawa deserve at least special page or post. Okinawa airport was very well designed all gates are just right if front of you – no looking for a numbers or lost in the crowd.

Then back to Nagasaki and through the Narita back to Changi – Singapore.

82 hour officially up in the air

More and more people geting to the cabine. Tired and exhausted from all the waiting. When they finally reach they seats, they have another challenge to face it. IFE suppose to be entertainment for your journey. I’m always curious and watching people how they observe, discover and struggle with new controls and navigations on these screens. Considering factors like a light reflection, response to the touch physical button and the reaction on the screen it’s always discovery.  Small kids automatically touching and swiping regardless switch mode on or off.  Poor UX literally make people suffer.

Three takeaways if you designing the IFE:

• Select the language before anything else
• Simple UI doesn’t mean less content - horizontally explore vertically select
• Match the controllers with physical buttons

Public WiFi

Every airport welcomes you with Public WiFi so you can check your hotel, transportation or even you can call a friend to pick you up. All these services requires un-necessary painful registration. Predominantly not mobile optimised web offering a drop downs menus to choose the country that you’ve just arrived.

Best country that solve this is surprisingly Thailand – after you land you can buy for cca £20 unlimited internet sim card for 2 weeks. Problem solved – and you are reachable again! Or another solution could be same as on KLIA on arrival you have a set of hotspots with iPads locked down to the docking station for your immediate use – free of charge.

Surprisingly there is no airport in EU that has it – or do you know any?

Three takeaways:

• If you have to design WiFi login for your provider – please avoid drop-downs & if you really need to use them (call your developer) so they are at least integrated with OS
• All the airports should have WiFi named Airport Public WiFi so the user is one click away from the source – make it easy for the user.
• If you really need some identification how about FB, twitter or G+ all of them are legitimate and has API to share the basic – name & email.

Digital property

Digital property all of airlines are pretty much same. This topics by itself deserve entire article I’ll focus only on two things – Booking and Customer services. Bugget airline has figured out how to improve their booking experience online and they setting up the standards (EasyJet & JetStar) but their services on the ground or on board are still not there yet.

On the other hand as an example of great customer services in both human and digital way – I’ve lost my luggage on the way to Stockholm. After registration that took 10 minutes I received 3 emails from BA. Saying “We apologise”, “We found your luggage” &  ”Your luggage was delivered to your hotel” on the BA expense, and I earned X air miles – “well done BA”.

Way Finding

Way finding is the key when you running out of the time or you meeting someone on the airport you never been to. Over a three decade we haven’t learn anything from people. Some of us can not read from long distance, or perhaps we just forget our glasses, but we still make all sign too small to be read from distance of 20-30 meters. It is exactly the destination you make a “decision” if you’ll turn to gate A or B – you just miss the plane.

Tickets

One of the most frustrating things when you fly is handling the ticket. I heard many times in front on me in the que “Oh, I forget print out my ticket” saying the lady holding her smartphone.

All airlines regardless the class should send “the confirmation email” including the ticket. Wouldn’t be so hard instead of selling me cars, hotels, and so on – include simple JPG / PDF with my ticket summarising:

• WHEN > usually date
• WHERE > Airport + Terminal + Gate (optional)
• DEPARTURE > 16:00 (small) closing gate 15:00 (Big)
• + MAP of the AIRPORT so you know where you going.

Actually, some airlines already do it – they only send a ticket and not long mail with 75 promotion how you should spend your holiday. Hope all airlines realise soon that we don’t need their promotions we need the facts in tangible simple navigation. On same note how many of you really download airlines apps for your smart phone? Or now how many time you actually use it. Hopefully someone soon will come up with unified standardised service for all airlines including tickets, maps, runways, weather, delay, etc.  Solution similar to Pass Book or Kayak.

Time spend by packing

We had about 24 trips in total – this give us approximately 2 hours for a trip spent of packing. Considering that we have to pack twice for our relocation from Europe to Asia and back is actually less than hour per trip. And to be honest, when we flew to Venice we just grab T-Shirts, shorts, creditcard, book of Haruki Murakami and camera ‘-) Packing took 3 minutes & Let’s go!

Conclusion

When you travel consider your space and space of others. Take as less as possible. Bring as much as you can counting experiences that you can share. Get yourself a nice book, camera and passport – that what you really need for the weekend.

And why you should travel – because you can.

R/GA

RGA – originally founded agency for Nokia has grown to more than 14 clients including O2, Pearson, NIKE, Unilever, Virgin Atlantic. Core of our business, and the way we work, initiate creating  new departments as well as building on-site digital retail laboratory. This space was designed with one single purpose – to help designer and developers to prototype and test their solutions in real retail environment.

As a result of this growth we need more space to sustain all departments and people we need. The facility at St. James Square become too small and the building at Rosebery Avenue seems like a great solution to our immediate needs.

Some of us work between offices already. Traveling between two offices was adventure itself. Catch the meetings, scrums or even lunch with your colleague become daily routine. It hasn’t turn us down and within the 2 month or so we were ready to move.

Thanks to amazing team collaboration, this move become one weekend operation. It’s incredible to see how fast you can move 100 people. All the packing and arranging and following day you sitting in different corner and simply continue.

And it does not stop here.

Stockholm

Meanwhile this preparation, I have been assigned to another R/GA office to help establish framework for new incoming project. Stockholm has become my first R/GA branch where I worked along side with R/GA London. Believe me – we have amazing team out there. Small office with an amazing dog, incredible good food and stunning bike shop – simple addict-able constellation bot even mention talented team.

Singapore

Finally we have got the stage, when other branch of R/GA needed my help – and I said  ‘YES’.

So here I am – within the year relocated from desk to desk, from floor to floor, building to building, from country to country and finally from continent to continent.

This symbolic “move video” was made for the move between offices. It seems it means more than that.

Stay tuned.

I believe everybody who consider themselves as a creative has got already MakeDay in their professional or personal live. You know the feeling – you want to do something but it shouldn’t take long, it shouldn’t cost that much and it has to prove the concept or idea you aiming for. Also you don’t make it only for yourself – that will be silly and no fun. Most importantly the challenge will be gone – so you take your idea and talk to your colleagues, get the idea spread it.

#RGAMakeDay

We can see these phenomenas of MakeDays growing around at 99%, Google, Ideo, Frog Design and many others inventors companies and studios. What is actually interesting is not taking office “productive time off” but it’s bringing the benefit of open collaboration, and the power of open leadership within a small teams and short time.
This always show hidden qualities where some individuals enable potential of under-discovered passion that can be used in many different ways.

When the company leaders in head of Russel Davis announced the #RGAMakeDay entire company get exited and start thinking about the concepts or projects which they want to introduce to the world – how can we do this and how we can bring this to the life in a day, how about if we try this, oh it wouldn’t work – amazing consistence of all professional passioned about their own little “baby” projects start rumbling arround. As you can imagine there was a real competition, oh yeah in deed and many people and their teams were locked in small meeting rooms over a whole day to achieve their goals. How they did it you’ll see on the end. I’ll try to supply the list of the links if they are available online.

the team

Luckily enough this year my team was stuffed by geeks who pushed my daily imagination in to many different direction and this get decided that even on a MakeDay we will get together again and show our colleagues what they couldn’t see anywhere else only in R/GA.

I knew that Ant (Anthony Baker – Solution Architect) was crazy about W8, METRO style and all connecting services with other plaforms – don’t ask – sometime he can have a monologue about dynamic libraries for an hour and doesn’t really care if anyone understand. But on the other had he is the guy who make things happen – oh yeah he does. If you are UX guy and you want your “stuff” work you better get him on the board.

Danny (Danny Lee – Software Engineer) he is always in the code – literally  he is the guy who always read between the lines. He never says no – always suggesting solutions improving UX and SEO forward. Luckily enough sometime he get me understand a bit of code – in a pieces – so I’m not getting greedy that fast.

And finally Mr. “NO” (Sebastien Jouhans – Sr. Flash Developer) well I believe if there is any piece of code written in artificial language this French guru is probably the one who will understand that. He is the guy who make a Camera talk to you – wired isn’t it.

So we have team, we also choose the technology, collect all the guidelines, frameworks  from all major platforms in to one research knowledge. All gadgets showing right values – what we actually missing now, is how do we tide this up in to a something which is actually useful.

I don’t want you to believe that I came up with entire solution or concept even sometimes I have my moments – we all did and that’s what I love on every single project with these guys we challenge each other. We all sat down and bring all the puzzles on the table and make it work for one single purpose – serve us to make a better and more efficient work.

R/GA Locator

If you are geek and you want to know which W8 library, METRO  & MSQL or what Open framework we lined to please jump straight away to blogs of my colleagues and get yourself wild with future development. I’ll be focusing more on the concept, user cases we covered and W8 Framework we used for our build.

Challenge

Every growing company in our industry experience expanding communication patterns and difficulties to keep focused on work without any distraction. Many people primary PM – project managers in fact running around and  looking for someone in particular time and place. For your meeting, sign the contract, show another idea, department meeting or just your regular daily Scrum – you’ve heard that “where is James, have anyone seen James”.

Particular challenge was eliminate any physical action like swipe, or check in or other techniques. Bring all collected information to a source without real effort or act of collecting it. On daily bases we overwhelmed by tuns of interaction – and bring another one will harm the process and whole idea to create unique knowledge “where the people are?”.

Other challenge was present full integration with existing framework and services show the capability of cross-platform sharing and communication. Be able to scale this system for all R/GA offices. Show the real power of integrating platform as a global challenge.

Solution

Bothered by the people running around the office to looking for those who matter at that time – we came up with the idea of R/GA Locator – simple colleague finder within all R/GA offices.

The tool or platform (however you want to call it) capable to capture your face while you entering the office and automatically to sign you in. As a immediate respond you receiving all notification of your day or other information which matter to you (flexible to the user settings) you can see the upcoming meeting, your holidays, holidays of your peers or just simple feeds of the news from the company or industry – what ever you prefer. All tailored with global and local information for you.  Local weather, transportation update as well as a mail and calendar.

No more rumbling around to find your colleague because by checking your diary you know he is in the office and he is already on the meeting you are just late for. Your smart-phone, your laptop even your touch screen all devices and all platforms connected through one simple solution.

User Scenario

You coming to the office – while you passing entrance desk the screen welcome you and show you information related to your current working day. You’ve noticed that colleague of your who supposed to be on the meeting with you has got holiday and he is not checked in – so you wouldn’t expect him to be at present. On the other hand your other colleague is checked in you see he is in different office – so it’s better to chase him up – system generates SMS message which is sent to a specific mobile number – and your colleague is on the way.
Finally you are late ad you changing the time of your meeting – other colleagues receive notification but also massage when you reach the office that meeting can start in about 10 minutes.
All time based event can be organized by the user, as a creator you giving a privilege to see you calendar by others.

Metro

Let me just quickly mention METRO style from first UX observation. While ago I worked with amazing MSDN team using Sitecore framework. That time I have great teacher .NET Solution Architect who was opened to share with me all MS UX resource – a bit geeky but it was quite engaging. This time I had a get lucky again – before we start Antony shared his resources and videos. Those make my life significantly easier.  I’m not “MS fun” but I’ll gladly accept any challenge for W8 and same team.

Hungry for a result! – well we didn’t won, let’s say we didn’t have this sparkle on the top, but even so we receive the most generous feedback wort of any victory – from people who lead their industry and who really matter.

#RGAMakeDay

… was great & I believe it gave us all better understanding what we are capable of – not only as a team but as a entire company. The family spirit of R/GA London is flowing around and you better watch out, because there are many “bad asses” and Im sure we’ll hear from them soon.

Personally in this 2 solid days I learned more that I’ve learn  from anyone at any commercial pitch project – how bizarre. If you like to know more drop me a line bellow and we can discuss your current challenges. Do you like the idea? – well then, ask boss and if s/he is wise enough you might experienced same vibe as we all do at R/GA!

Reference

1. Steve Kaneko on unification and Metro
2. Building “Windows 8″
3. Windows Phone 7 Design Resources – UI Guide and Design Templates
4. Windows Phone Templates V3.0

Thanks again all it was remarkable experience

To make it even easier this will be simple list. To make it complete please feel free to add the book you’ve read and you think it might fit in to our UX Repository.

Usability and User Experience Related Books Repository

User Experience

1. Don’t Make Me Think: A Common Sense Approach to Web Usability by Steve Krug – this book is almost classic and shouldn’t be missed at any UX library. I personally recommend Steve’s workshop – which give you more flavour of actual testing and usability.
2. Information Architecture for the World Wide Web: Designing Large-Scale Web Sites by Louis Rosenfeld, Peter Morville (http://searchpatterns.org/) – noone should miss this one either. Solid, short, but very well written book and website which support all techniques about search capability.
3. The Elements of User Experience: User-Centered Design for the Web by Jesse James Garret.
4. About Face 2.0: The Essentials of Interaction Design & About Face 3.0: The Essentials of Interaction Design by Alan Cooper, Robert M. Reimann – is mainly received as a bridge between strategy and design – early days I found it very use full to understand all principles in Ix Design.
5. The inmates are running the asylum by Alan Cooper
6. Site Seeing: A visual approach to web usability by Luke Wroblewski – Luke’s approach is minimalistic, but very well written and very condensed in terms of useful information.
7. Interaction Design: Beyond Human-Computer Interaction by Helen Sharp
8. Measuring The User Experience: Collecting, Analyzing, and Presenting Usability Metrics by Tom Tullis and Bill Albert
9. Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfacesby Carolyn Snyder
10. Observing the User Experience: A Practitioner’s Guide to User Research (Morgan Kaufmann Series in Interactive Technologies) by Mike Kuniavsky – Don’t miss this book if you ever want to research for UCD.
11. The Humane Interface: New Directions for Designing Interactive Systems by Jef Raskin

Design

1. Designing Web Usability : The Practice of Simplicity by Jakob Nielsen -
2. Designing With Web Standards by Jeffrey Zeldman
3. Designing Gestural Interfaces & Designing for Interaction by Dan Saffer – Dans books compiling technology methodology and design based approach. If you are designer from the bottom of your hearth – you should start right here.
4. Web Forms Design – Filling in the blanks. Wroblewski, Luke: Rosenfeld Media 2008.
5. Institutionalization of Usability” written by Eric Schaffer
6. Web ReDesign: Workflow that Works by Kelly Goto and Emily Cotler
7. Information Architecture: Blueprints for the Web by Christina Wodtke
8. Design Research: Methods and Perspectives by Laurel, Brenda Laurel
9. Handbook of Usability Testing: How to Plan, Design and Conduct Effective Tests by Jeffrey Rubin
10. Emotional Design: Why We Love (Or Hate) Everyday Things by Donald A. Norman
11. The Design of Sites: Patterns, Principles, and Processes for Crafting a Customer-Centered Web Experience by Douglas K. van Duyne, James A. Landay, Jason I. Hong
12. Designing object-oriented user interfaces by Dave Collins
13. Designing interactions by Bill Moggridge
14. Web ReDesign: Workflow that Works by Kelly Goto and Emily Cotler.
15. Thoughtful interaction design: A design perspective on information technology by LÖWGREN, Jonas; STOLTERMAN, Erik. Cambridge, Mass.: MIT Press, 2004.
16. The Design of Everyday Things by Donald A. Norman

Communication

Before …

This year’s conference was accompanied by amazing weather, which changed from  the usual rain and foggy to real weather exception. Even those who arrived from Italy, Spain, U.S. and even Australia can fully enjoy the beauty and picturesque corners of the Bloomsbury & Russell Square. Home atmosphere was given not only by beautiful weather, but also by international festival hosted in nearest Russel Square Garden give win to the event.

The garden in front of  the University was full of students staring at Chinese characters and preparing for upcoming tests. Other participants, lying around who enjoying last minute on the grass was suddenly disrupted by call “Look look” where one of the participant noticed one of the key presenter Mr. Erik Spiekermann, passing by. Almost entire park as one man rise and began to follow him into the lecture hall. That was clear sign that London TYPO can begin.

I am afraid we will not have enough space to go into depth of each talk separately, but I will try to cover at least what deserves your attention from my personal perspective.

The first day

Daniel Herigstad

The first lecture set the bar very high. Not only from speaker perspective but also as a presentation itself. Daniel Herigstad introduced his projects where he faced with space and its perception and not only for the computer but also for the television and games. Developing  digital space adjusting perception of the observer’s position. This topic follow and extend some of my thoughts from workshop, I recently had a chance to present at  the Web Expo conference in Prague this autumn.

Observer’s position is clearly changing – and we as designers should be more aware of how we structure the information and how do we transform it into a “comprehensive” form. How the viewers will perceive it and digested. Daniel also pointed out to reality where immediate integration of internet and data into a film is necessary part of today acknowledgement. He showed us on the example of movie scenes where they use GPS to mark the location where particular scene was shooted and googled biographical data of the current actor. Another interesting feature was the continuity and distribution of individual scenes where the viewer can interact with the context of the scene.

For me the most interesting part was when Daniel introduced new principles of navigation for game consoles we experienced in the last decade. See the navigation using perspective, observers not only offers the opportunity to completely focus on the appropriate part, but distribute sequentially information in individual sections was just talking from my mind. Spatial perception is particularly important for middle and older generation, which, according to tests, he acknowledges as much resemblance to reality.

(Reference:http://typolondon.com/blog/)

a single visual style of the BBC

Another lecture, no doubt worth a look (and I hope that will soon be published by the online version) is a single handed lecture on visual style of the BBC. Personally, I believe that such a demonstration is not only worth a ticket for £ 400, but also for such an extraordinary effort to make the typeface right in digital space. Many of you have probably seen seen in the Creative Review, Eye, or other information channels, the BBC brought together (back-up) its visual appearance. Neville Brody is the author, whose name itself indicates the quality of good design, but especially sophistication and precision as the code itself for all language versions.

(Reference: http://typolondon.com/blog)

It was really absorbed in sixty minutes – admiring a unique online “Brand Experience”, and especially scalability and modularity of whole ecosystem. The development of the product and language versions can be seen on bbc.co.uk/gel.

Jonathan Ellery, is one of the designer whose work I am personally admire. He proved again (as many times before) that it is possible to find a balance between design and art, and with the face where both world treat you identically. Followed by other lecturers more or less presenting how important it is to be a good designer and have a strong vision.

(Reference: http://typolondon.com/blog/)

The next day

The second day showed a number of great lectures we heard before obviously from different range of design or typography – everybody wait silently for main “design superstar” – Neville Brody. Before we start another dedicate paragraph about mr Brody let’s briefly look at at project THINK introduced by US based designer Susan Rodrigues de Tembleque.

“Dream Project”

Susan pointed out into two milestones that occurred in her professional career.
The first milestone was set when she start the practice by realization that in addition to design or presenting the solutions we as designer need to offer (the user  / observer), a different experiences, and encourages them to “think about” it. Which gave me personally small satisfaction where realising that back to 2004 I was right a make a one step more …
The one was about her last “Dream Project”, a project where she has complete freedom, sufficient funds and also unlimited possibilities in the implementation – the question was – what you could as a designer do?

Follow by her dream she encourage the audience – whatever you do small or big project, always think about who the user, and not him who pays. This “golden” rule applies to publications, presentations, video, navigation, or even an ordinary website.

(Reference: thinkexhibit)

The star

The hall faded and on the stage enter Neville Brody. From previous presentations I’ve had the chance to see, it was immediately clear that from now on everything will be only “extraordinary”. Neville shoed us a several projects where he pointed again on FUSE history and upcoming issue.

Readability

Not only for fonts on the screen, but generally for poster and ideas. Readability in the cooperation and general communication. Horizon student work, which in many ways surpasses the work of all major professional designers presented recently.

Again, he proved that his lectures are not only inspiring, but also opening new horizons by establishing thinking processes that rarely applied in the everyday world.
(Reference: http://typolondon.com/blog/)

Third day

The final day started with a wonderful lecture by Jeff Fullknera. Even I’m not a game player I enjoyed this the rain of UX features  in gaming world. The reality of the scanned area – active players involved in the process and physical sensors – well … simply amazing!

I would like to mention another interesting speakers among them were such – Morag Mzerscough, Jonathan Barnbrook, and Monotype but there is no space. Let me on the end talk a bit about  amazing work on font I personally admire  (http://font.ubuntu.com/ which you can download for free)

ubuntu

Bruno Magg and his team proved that – not only a unique project, but also team and the place play key role to bring something extraordinary.
(Reference: http://typolondon.com/blog/2011/10/bruno-maag-collaborating-types/)

The TYPO Conference ended with dignity of embossed designer Chip Kidd. One of the best speakers, classic designer and typographer, who is an inspiration to others, once again proved that the design itself is a never-ending challenge of creativity and humility that most of us have the honor to share.

“Design is a sharing”

Entering the door of ICA I realised  all the seats were taken with a great variety of people from different fields of the digital industry: marketing managers, designers, developers, UX people and even beginners. To cover everything would probably take a much longer article so I’ll only highlight parts which I personally found interesting and relevant for the audience I’m talking to.

Share different stories

The talk was designed as a one long presentation where we were allowed to stop and ask questions. This gave us an opportunity to share different stories from different fields but it also brought more to the presentation itself. Steve is a great speaker, which makes a big difference when you’re learning about the process of others.

Bright Idea

Here Steve talked about how you must start by presenting the website you want to test as soon as you have something to show (this actually refers TDT – test driven development). The main focus was on execution, which is really important for the observer to grasp the granularity of the task and level of the engagement.
Also communication is one of the key elements where the leader should always facilitate an open conversation on the topic -to make the user focus on the required task.

An interesting note was the idea that developers like to complicate things – and it’s very true. They like all these buttons and menus and cross-linking. The entire complexity of the solution represents they skill-set to which they are truly proud of. The best developers come up with the solution where the user doesn’t have to think about and application, the developer just makes it for them (sign up with Open ID as a example) and it should simplify their life.

Equipment

Then we moved to technical equipment where Steve described what works well and doesn’t cost that much. Also he introduced a couple of Internet services which we can use on our quick projects. We covered in-house testing as well as remote testing, hiring participants and finding the right target audience for your project.
There was actually one challenge which I personally came up in my practice and it was hard to keep the participants in focus where we did the testing remotely. It was really hard to make the observer / participant focus on the task as well as manage all distraction on leader or participant side. We gathered enough practical examples of how to succeed.

One, Two and Three

The following section was about applying the user testing internally: set up the date when your company has decided on a testing date and all the projects you’re working on go through the testing sessions One, Two and Three which follows “Brief over the lunch” where you as a leader facilitate conversation about what happens in the morning. What are the problems and how do you categorize them for another iteration or sprints? What is the challenge with these tasks or bugz and how to manage them and finally which one to fix first? These are the things you need to cover.

“is not good enough to do the test”

After the questionnaire we talked about when to start and why. The biggest challenge for any team I see from my perspective is timing – “is not good enough to do the test” we hear all the time. You can test when ever what ever you have a more you test more you get, and even more you might find that some part of your solution don’t work properly and you can fix it before it’s late.

Test what ever is available to you. Test old versions of the website and you’ll understand what the main issue was on the website and why the client wanted to fix them. Test competitors website – to understand what they do wrong and what you should avoid in your version / build.

Test with a two groups – we discussed that always new participants are better because they don’t have a background understanding of the application. On the other hand you have someone who works in the company and can see the benefits straightway.

After each session with these three participants, I mentioned at the beginning of the article, write down the 3 keys things you can fix. You’ll end up with nine key issues of your build / apps and what you need to fix. The problem we all deal with is money or will the client to do these amendments before launch.

Least you can do

Tweaks – don’t forget if there is time and anticipate the client agreeing or disagreeing with the tweaks, which can be part of your service / delivery. In that case you have a room to go and test / change / tweak parts you were aware of.

Practical example testing

And finally we get the real testing. We crate a test groups where each of us has a site we would like to test. I chose my personal website. Please see video below.

The task was

You are an existing customer of three.co.uk. You own blackberry almost 18 months contract and which almost finish and you decide to switch to an iPhone.  As a happy customer you don’t really often go to provider website to check the services so you act almost as a new customer.

You task is a find an iPhone and compare with blackberry and make a decision to move. The video from the session is placed bellow.

Etre – Workshop with Steve Krug from givision on Vimeo