Persona

Posted at: 1:01 PM by Marianna

2008 will remain in history as the year where Internet changed politics forever. The main reason for that is the pre-election campaign of Barack Obama, especially the way his consultants used the internet as a political tool.

The very well designed website of the today's President of United States and the wide use of e-mails, YouTube and other social networks as Facebook and MySpace, but also the use of other tools for the gathering of funds, are nowadays established tactics that are being used from other politicians too.

Lots of people claim that if it wasn't for the web Barack Obama wouldn't be a President today. I recently came across a very light full blog post "Lessons for User Experience Consultants from Barack Obama" that evaluates Barack Obama pre-election campaign web site published by John Yesko.

Among the lessons the author believes Barack Obama's website teach us are:

·Lesson 1: Use Clear Calls-to-Action: Donate now is the key call to action Obama uses on his website while is not the only message.

·Lesson 2: Put a Priority on Creative: Work with smart, talented creatives. Involve them from the beginning, and encourage them to be the stewards of the brand throughout the process.

·Lesson 3: Make Personal Connections (Or At Least Fake It): Use labels that are simple and easily comprehensive from the users (see also my post: can users read your website)

·Lesson 6: Be Young, Charming, and Good Looking: Everyone wants to have a fluid experience, come across with new concepts and ideas and view an aesthetically pleasing website when navigates through the net.

If we take a closer look of Barack Obama's web site homepage in comparison with his competitor John McCain's we can see clearly why Barack Obama's internet campaign was more successful:

Navigation: Obama's website has 6 main navigation elements and 2 less highlighted while McCain's website has 9 main navigation sections (far too many).

Labelling:The labelling Obama uses is more user friendly and commonly used in public as People, Media, States while McCain uses more vague terminology as Issues, Coalitions & Contribute.

Website goal: Obama's website has a strong "donate now" message while McCain's dominant point is "vote now" message and how to promote his personal image more.

Images: By comparing the politicians' images on the top left hand side we can also see that Obama's low angle shot looks more professional. A politician is the voice of the public so he needs to use humanise photos. Unfortunately McCain and Palin photos fail to convince us that they are potential future leaders.

Top Homepage message: Obama chose to use a very communicative personal quote "I'm asking you to believe..." while McCain chose a distant message using capital letters making it even more alienated from the users "COUNTRY FIRST REFORM....".

Page layout: Obama chose a two column page layout while McCain chose a three column template. While Obama placed efficiently information on the page leaving sufficient space in between, McCain made the mistake to place lots of information with different coloured icons, buttons and banners to the three columns resulting in a distractive output.

Here is a visual presentation of what I mention above:

Have a look on the two politicians' websites to judge by yourselves:

Picture 1: Barack Obama website

Picture 2: John McCain website

After reading this post I hope you are now convinced that User Experience Architecture can make a difference in the way people see and get influenced by your website.

Labels: experience, politics, user, website

Posted at: 4:37 PM by Marianna

How many times have you visited a website, get attracted by its design but couldn't find what you were looking for and navigate away? But still after you left the website you did not know what was the problem as the website seemed so aesthetically pleasing, user friendly and all the information at least on the homepage you visited seemed to be in the right position?

The problem is in Nomenclature Design. It is important users to be able to comprehend the labels and the terminology you use. Before you define the content of your website you should ask some crucial questions:

·Who are your customers?

·What tasks do customers want to complete when they visit your website?

·What content are customers looking for via your website?

·How can you help customers find the information they need via your website?

·What are the services your company offer and you try to promote via your website?

·What are your business objectives? (See also: Online persuasion or better user experience - You be the judge!)

·How do your business objectives align with your website goals?

·What search terms are customers using?

After consider all these questions you should also make sure you choose user- centric language for your website and not internal, company language. Virtually no user read a webpage word for word so it's important to have the information they require in the best places. If they can't find what they are looking for in a few seconds then they will disappear. Also, if they don't understand a term you use then there's a good chance they will disappear too.

Sometimes different websites aim to different audiences so many sections though they are repeated in many websites are labelled different. For example many websites use the word "Vacancies" for the section where they place the job positions while others use the word "Jobs" or "Careers". This varies depending on whether you are looking for people for a short period of time or you advertise a position where actually the applicant can build a career inside your company. It also varies depending on what kind of users will visit your website.

Have a look of how three different websites use different labelling for job positions:

Picture 1: Oxfam website

Picture 2: BT website

Picture 3: Scottish Health Council website

As Rick Oppedisano states in his article "Common Principles: A Usable Interface Design Primer" : "Simple and comprehensible navigation is essential for the success of any application. Users must be able to move from page to page via links, buttons, or menu items. More importantly, navigation must also address the tenuous balance between real-life user goals and business goals of the application. When business requirement terminology filters into navigation, there is risk that the typical user may misinterpret the language used in the navigation. This misinterpretation compromises the user's ability to complete the task, and can override the benefits the technology aims to provide".

If you can go out of your corporate role and try to read your website as a simple user or have the opportunity to ask external visitors who are not aware of your company's jargon and they can understand the aims of your web site; then the rest of the world will do too!

Labels: design, experience, labelling, navigation, user

Posted at: 12:57 PM by David

To coincide with World Usability Day last month (13 November), the influential New Media Age User Experience Directory was sponsored by Persona this year!

It's a pretty big deal as this publication is regarded as the annual who's who in online usability and is read by the industry's biggest players as well as brand leaders from all over.

If you don't subscribe to NMA, you can download the report in PDF format and read the two great articles from our ever vocal leader, along with an eye catching agency advert. We've also used the back page to soft-launch our industry standards initiative - Wireframeworks.org.

So if in these difficult times you need to engage with your audience in a more positive and effective way - you know where we are.

Labels: experience, world usabilty day

Posted at: 11:21 AM by Marianna

A workshop formed by User Experience Architects in the phase of requirements gathering is a meeting or a series of meetings, depending on the size and budget of the project emphasising interaction and exchange of information among a number of participants.

Before the workshop:

· Invite the people that are related to the project (if it is possible from different departments; all can add value to the discussions).

· Make a list with the willing outputs from this workshop i.e. define related personas to the project, discuss all the sections the web pages should have, prepare questions to capture as many project requirements as possible, understand all the aspects of the project in detail.

· Organise exercises for the workshop as: card sorting method, exercises aiming to group design of conventions (i.e. site navigation bars, search facilities), or create priority lists to get all people interested in the workshop.

· Review all the information you have gathered so far for the project.

During the workshop:

· Check the list with the willing outputs from this workshop to make sure everything is achieved (do not hesitate to make alternations if you get valuable input during the workshop).

· Explain the scope of exercises to the participants. If the number of the participants in the workshop is large, form smaller groups. Make sure to gather all the outputs at the end of each exercise.

· Try to encourage all the people to speak and participate during the workshop sessions.

· Be a good listener. Do not try to lead the conversation by expressing your opinion, but leave the other people participating in the workshop to express their thoughts, sometimes argue with each other. "The best way to have a good idea is to have lots of ideas." (Linus Pauling)

· In the end ask if they have anything else to add, that has not mentioned at all.

· If there are moments that no one is speaking try to find efficient ways to start the conversation again i.e. suggest something really radical that can raise controversial opinions.

After the workshop:

· Group the information you have.

· Check if you accomplished all the tasks from your list.

· Analyse the data you have gathered.

· Continue to the next step (that varies to the project i.e. organise a new workshop, create Personas, design User Journeys).

Labels: card sorting, experience, focus, group, workshop

Posted at: 11:04 AM by Hammad

Most of us use planes, trains and automobiles all the time, so we're used to things that go bump in the night.

This year, World Usability Day is on November 13th (don't worry, it's not a Friday!) and the topic is Transportation. Visit www.worldusabilityday.org and you'll be amazed at the number of events, webcasts and discussions taking place by some of the best thinkers out there on how the next generation of transport systems will be better for all of us.

Labels: experience, persona, usability, world usabilty day

Posted at: 2:33 PM by Marianna

CAPTCHA (contrived acronym for: Completely Automated Public Turing test to tell Computers and Humans Apart) is a program test used in computing to protect websites against web robots by generating and grading tests that humans can pass but current computer programs cannot (captcha.net).

One of the main reasons websites use CAPTCHA is to prevent spambots to create numerous accounts through sign up forms. Other applications of CAPTCHA are:

• Preventing Comment Spam in Blogs
• Protecting E-mail Addresses from Scrapers
• Ensuring the validation of Online Polls results
• Preventing Dictionary Attacks in password systems
• Search Engine Bots
• Preventing E-mail Worms and Spam (source: captcha.net)

Though it is a useful tool for developers not all CAPTCHA are designed to be user friendly or even accessible from users who are blind, have low vision, or have a learning disability such as dyslexia. Example:

Picture 1 : Hard to read the letters due to colorful background (forums.steampowered.com)

Recommended guidelines for any CAPTCHA code:

• Accessibility. CAPTCHA's must be accessible. CAPTCHA's based solely on reading text or other visual-perception tasks prevent visually impaired users from accessing the protected resource. Any implementation of a CAPTCHA should allow blind users to get around the barrier, for example, by permitting users to opt for an audio or sound CAPTCHA.
• Image Security. CAPTCHA images of text should be distorted randomly before being presented to the user. Many implementations of CAPTCHA's use undistorted text, or text with only minor distortions. These implementations are vulnerable to simple automated attacks.
• Script Security. Building a secure CAPTCHA code is not easy. In addition to making the images unreadable by computers, the system should ensure that there are no easy ways around it at the script level.
• Security Even After Wide-Spread Adoption. There are various "CAPTCHAs" that would be insecure if a significant number of sites started using them. An example of such a puzzle is asking text-based questions, such as a mathematical question ("what is 1+1"). Since a parser could easily be written that would allow bots to bypass this test, such "CAPTCHAs" rely on the fact that few sites use them, and thus that a bot author has no incentive to program their bot to solve that challenge. True CAPTCHAs should be secure even after a significant number of websites adopt them. (source: captcha.net)

Good examples of CAPTCHA:

Picture 2: CAPTCHA with audio option (digg register form)

Picture 3: CAPTCHA with not case-sensitive letters and help for disabled (gmail sign-up form)

Picture 4: CAPTCHA with refresh button (my space form)

The CAPTCHA used in the World usability day website complies with all the guidelines mentioned earlier.

Picture 5: The website has audio CAPTCHA option for blind users / ability to refresh the CAPTCHA in case user does not find it easy to read / help section (world usability day account)

However the W3C group published an article in 2005 about the inaccessibility of CAPTCHA considering that they should not be used as there are other ways (spam filtering and/or heuristic checks) to spam control. Among their arguments were:

CAPTCHA using logic puzzles with mathematical equations prevent users with cognitive disabilities to register. Example:

Picture 6: CAPTCHA with logic test (Quantum Random Bit Generator Service: Sign up)

·Users who are deaf-blind, don't have or use a sound card, work in noisy environments, or don't have required sound plugins are likewise left in the lurch. Since this content is auditory in nature, users often have to write down the code before entering it, which is very inconvenient. Worst of all, some implementations of this technique are JavaScript-based, or designed in such a way that some blind users may not be able to access them.

·External projects such as BREAKING, AICAPTCHA and PWNTCHA have shown methodologies and results indicating that many of the systems can be defeated by computers with between 88% and 100% accuracy, using optical character recognition.

CAPTCHA should be used only where is necessary and mainly in large websites. It is advisable smaller websites to use other mechanisms to prevent spam. When used, the developers should make sure they are accessible from different categories of users.

What's your opinion about CAPTCHA? Are there any good or bad examples you came across lately?

Labels: accessibility, CAPTCHA, experience, guidelines

Posted at: 12:05 PM by Marianna

Though most web sites have sign-up forms, they are not always necessary or useful. There is the danger sign-up forms transform a nice website user experience to a bad one; by restricting users from pages that should be accessible to all i.e. content pages, access to resources pages (case studies). This usually is noticeable in websites that have a persistent sign-up form on the homepage and urge the visitors to sign-up first before they can navigate throughout the website. As a result, there is a risk to alienate visitors who do not wish to commit to your site yet.

However there are many websites (see smashing magazine: list) where sign-up forms are necessary such as most of the e-commerce sites. Especially when a user wishes to purchase a product he has to navigate in secure pages so as to complete payment detail forms. It is critical though when we should ask the user to sign-in and where we should place links that lead to the sign-up forms. Common place to have a link to sign-up forms is on the top of the page and repeated in all the pages, not only on Homepage. This could give the chance to the user to sign-out if he wants or sign-in from all the pages. Nevertheless there are occasions when a sign-up form needs to be on the homepage i.e. in social networking websites (i.e. Facebook) that most of the website's pages are based on users' customised settings. In this case make sure that you explain the customers why they need to use them and how they can use them.

Elements sign-up forms should have:

- Place sign-up form or sign-up link where people can see it (i.e. amazon homepage)

- Have a message reassuring them for the privacy of their details (i.e. windows live hotmail)

- Make them easy for users to understand them-use an example (i.e. BT account sign-up)

- Clear labeling next to the input fields (i.e. my space sign-up)

- Ways the user could retrieve from errors i.e. enter wrong password (i.e. ebuyer.com)

- Provide friendly inline messages at the point of the form where the error has occurred along with an overview at the top of the form (i.e. google mail sign-in form)

- Indicate clearly the mandatory fields (i.e. delicious form)

- Ask only necessary information / avoid long list forms (i.e. last.fm form)

What's your opinion about sign-up forms? I am interested in listening your examples and experiences.

Labels: experience, sign-in links, sign-up forms

Posted at: 2:59 PM by Marianna

One of my responsibilities as an Information Architect is to keep abreast of the latest releases in the computer science industry. Recently I have come across a selection of different maps from a variety of sources that have made me realise there is a trend nowadays to use more and more interactivity when presenting data. A set of examples is:

- A UK interactive map that enables Regional Economic Strategy (RES) to display evidence data in an engaging visual way.

- A world interactive map from www.publicprofiler.org which presents the distribution of certain surnames, compiled by researchers from the University College London (UCL) using publicly available sources of information such as electoral registers and telephone directories. It contains information on over 300 million names covering 26 nations from Europe, America, Asia and Oceania.

- And a visualisation tool in the form of a map created by the New York Times providing information about the Olympic medals throughout its existence. Each country that has won medals during the Olympic Games is represented by a circle - its size relative to the number of medals won.

In terms of usability these three maps along with all the other well designed maps in the web are bright examples of well presented data, in a user friendly way saving a lot of time for the user. The users can effortlessly figure out how to use these interactive interfaces and at the same time they are easily memorable. The usage of a variety of colours in association with tables, pop-up windows with information or lists under the maps form a powerful source of information accessible within a few seconds. The efficient usage of white space also enhances the user experience.

Interactivity is one of the major advantages of web maps, enabling simple map tools to fully integrate multimedia elements. It helps to explore maps, change parameters, navigate and interact with the map, reveal additional information, link to other resources, and much more. My conclusion of this short reference to interactive maps is that they are a powerful tool in terms of efficient access to a large amount of data.

Labels: experience, interactivity, usability, website

Posted at: 2:40 PM by Marianna

Some days ago Google released a beta version of their new browser called "Google Chrome". The browser is still in an early stage of development but as Google states they will constantly updating the browser following users' reviews. With this browser Google team believes that they will "add value for users and help drive innovation on the web".

My first observation is that Chrome is a modern browser managing to introduce a new minimalistic design, leaving behind old design concepts. The first innovation you notice is the usage of tabs at the top of the page instead of being under the address bar and toolbar. This layout eases the way users manipulate tabs. They can easily add or remove them and each tab can be dragged independently out of the browser window opening a new Google Chrome browser improving the speed that users handle different tabs.

The Google team has also created a user-friendly help page where you can find all the information you need for various topics, either using the help search engine or clicking a link from one of the group links (getting started, troubleshooting, using Google chrome, and popular articles or help resources). From this help page a user can change the language settings too.

The browser's homepage is another newbie. It is called the "Most visited" page and so far it displays icons with links to the most frequently visited pages. It also has an internal search engine where you can search among those pages, together with a box of recent bookmarks and a link to a full history list. This page can save a lot of time to the user eliminating the number of clicks he has to make in order to view his bookmarks and navigate to the most popular pages.

Picture 1: Google Chrome Homepage

The combination of the address bar and search engine into one (known as the "omnibox") is another plus point of Chrome. Many times in the past I got frustrated by Mozilla Firefox's browser when I typed a word in the address bar but a "failed to connect" message appeared. Then I realised I was not typing on the search engine box! I am sure I was not the only one! This feature makes the design more simplistic and saves more space on the tools area too.

An additional feature that Google launches for the first time is the "incognito window "where you can view pages without appearing in your browser history or search history, and they will not leave cookies, on your computer.

Picture 2: "Incognito window" feature

Enough with all the appraisals! Google Chrome received a lot of bad reviews too; though it has become the 4th browser used already. Google has released a list with known issues for Google Chrome that grows bigger day by day. Among them are plug-in issues such as "Scrolling is delayed on pages with a lot of plug-ins" and display issues such as "Google Chrome's fixed width font is tiny on some sites". There are also claims that Chrome is not a secure browser at the moment but this is probably expected as it is a beta. In terms of user experience a negative issue indicated by the usability blog is that Google chose for the browser to use Windows Vista icons that are not allowing any customisations made by the user. As a result users with poor eyesight, tend to increase the size of these controls so they can easily minimise windows without accidentally closing them.

Google has still a lot to change in Chrome, especially things that they see as important, and it'll be interesting to see how it will evolve.

What do you think about Google Chrome? A good User Interface or not?

Labels: browsers, chrome, experience, google, usability, web

Posted at: 9:10 AM by Marianna

While finishing the first draft of a website's project wireframes; I noticed that one of the pages that troubled me most was the "Thank you" page. This wireframe can be just designed as a plain page with a simple "Thank you message" being polite to the user after accomplishing a purchase or an action.

On the other hand this page can be a lot more than that and I believe it should be designed with a lot of attention to detail:

• This page could have effective calls to action so as to bring the users back again to your website instead of saying goodbye to them and lead them to navigate away. If the message is "Thank you for purchasing a product", this page can be a great opportunity to advertise more products. Statistics have proven that a big percentage of consumers (39%) continue to purchase another product if they are prompted in the "thank you page".
• This page can also show some authority of your website by reminding the user that his card details were securely used. Furthermore it can inform the user that the details of the purchase will be send to him through an e-mail.
• This page can provide a signature or a photo making your website more personal for the user. As a result a trustworthy relationship will develop between your website and the user (Alexandria K. Brown).
• It is important to provide the customer with instructions in case something goes wrong with the purchase or if he requires any other help.
• Last but certainly not least, you should provide a path for the users to exit the "Thank you page" without having to close the web browser or navigating away from your website.

I am sure there are other reasons why we should carefully design "Thank you" pages for websites. I am looking forward to hearing your ideas too.

Good examples of "Thank you" pages:

Picture 1. "Adobe" website "thank you" message after downloading free trial software.

Picture 2: "East Midlands Trains" website "thank you" page after completing a form to receive ticket offers information.

Labels: experience, ia, theory, website, wireframes

Posted at: 11:04 AM by Marianna

There is a thin line between designing a web site to increase the company's sales and to increase the users' experience.

A clients' main reason for creating a web site or redesigning their existing web site is to increase profit/company sales, which can happen by improving the web site's traffic.

Sometimes Information Architects have the dilemma of whether to design with focus on a client's or a user's needs. Don't get me wrong, both should be taken into consideration, but some circumstances dictate more attention should be given to one than the other.

If we create a new user experience that should strongly promote services and products (Picture 1), persuading more and more people to engage with the page, we have to design a web site with authority, give examples of what other users do and add user testimonials. In general, we should enhance understanding, create persuasive visual design, generate confidence and stimulate desire (How to manipulate website visitors). On the other hand, if we are more user-focused (Picture 2) we should for example: avoid blinking imagery (though it could drive user attention to a service or a product), have no more than one animation per page and provide users with a sense of control.

As Spencer Gerrol and Kim Snedaker discussed at UPA 2008 there is a difference between what users "can do" (usability) and what users "will do" (persuasion) while visiting a website. I believe the best approach, is to ensure that users will have access to all the possible options before proceed to the desired action.

Picture 1

Picture 2

Labels: experience, ia, usability

Posted at: 9:18 PM by Hammad

It's not often that I come across a bit of industry lingo that I haven't heard before, but whilst working with a partner agency recently, I came across just that.

A Silent Corridor.

Now apparently the phrase was coined by somebody at BT and it refers (at least in the world of Information Architecture anyway) to a column on a page that becomes completely empty under certain circumstances.

For example. It's commonplace to use a 3 column layout for a web site, with the right column used for related links etc. However, what happens if a page/template no longer needs to use this area as defined? It's not always as simple as allowing the central column to 'flow' into this open space, as it's often restricted by a series of inherited template definitions (especially if the site is developed on a Content Management System; aka CMS). This actually happens quite a lot, like on Privacy policies or Sitemap pages. It can also be relevant during an e-commerce/shopping process, when you want to strip back on the hard-sell and keep people focused on what happening on the core real estate.

The result is a silent corridor; a complete end-to-end column that is empty and has nothing to offer anybody wandering into it. If you try to use it, you will go unheard.

It's not actually a bad thing to happen though, despite the eerie name it has become Christened with.

Template and layout consistency is very important for a good user experience and so by using a silent corridor effectively, you can keep your users focused on the important content on a page, instead of ramming unnecessary links and promos in their face and making them claustrophobic.

(oh dear, I think the hospital connotations are starting to take over!).

Labels: experience, ia, theory

Posted at: 2:07 PM by Marianna

Persona is involved in a new IA project for the redesign of one of a partner's client website. The deadline for designing a new sitemap for the client's website was tight so we conducted a card sorting exercise to identify possible ways to design the navigation layout.

The Card sorting method was chosen among other user-centred design methods as it is a useful tool Information Architects' use when they have to design a website sitemap in a quick, inexpensive, and reliable way. Card sorting helps efficiently structure the information you have. Furthermore, it gives suggestions for navigation, menus and taxonomies. (Donna Maurer)

The card sorting method usually does not provide results that can be used in the final structure of a sitemap, but can help to resolve several initial issues as:

• Structure the Information under the same group
• Find names for the groups
• Identify categories that the Information Architect might have not included
• Identify whether users want to see information structured with focus on subjects, audiences, or both

In order to organise the test sessions, we formed a list with items that could be placed in each card. Then we created 53 different cards with short labels that participants could quickly read but were detailed enough for the card content to be comprehensible. Seven individuals were invited to participate on the exercise. They were advised to carefully read the cards and try to group them accordingly. Throughout the sessions, we tried to answer some of their questions and took some notes to keep track of insightful comments they made. Finally, at the end of each session, we encouraged each individual to add any other cards he thought would be appropriate, or exclude any he thought were not relevant within any group.

Some individuals preferred to organise the cards in groups and then decide which will be the name of each group (picture 1, 2) while others chose to form a sitemap by first identifying the main navigation sections and place each card under them where appropriate (pictures 3, 4, 5). None of the individuals added any new card, though some of them excluded some which proves that we might have added more cards than those needed.

Picture 1

Picture 2

Picture 3

Picture 4

Picture 5

After the completion of the exercise, we gathered all the results and designed a sitemap, taking into account most of the users' preferences. The whole card sorting procedure proved to be very helpful as we wanted to form a navigation layout that would be more user- than project-driven. This method of involving real users before the design helped reach that goal and it also reduced the research time.

Finally, we would like to thank all the participants involved for their time and clever suggestions.

Labels: card sorting, experience, ia, sitemaps

Posted at: 2:19 PM by Hammad

Lately, I've been tracking various types of user behaviour when using web sites; you know, the usual kind of thing like navigation use, links, calls to action etc.

One strange behaviour patterm that has come to my attention though was actually one of my own!

I've noticed that when I see long web pages (e.g. with a scroll), it doesn't quite put me off, but I generally scroll down to the bottom straight away - to get a feel for how long the content is that I'm about to either enjoy or waste my time on.

Quite often, I'll then start reading back up the page in blocks/paragraphs; in a weird attempt to see if the rest of the article is worth reading. I guess it's a kind of 'read the last page of the book' type of syndrome.

Now I know many of you will think that I'm just plain stupid (and perhaps you're right), but I wonder how many other people out there have a similar behaviour pattern and indeed if the percentages are high enough to actually give this more thought when architecting a content page wireframe or design.

I'll put this to the test and report back anything new I find...

Labels: content, experience, fold, scolling, testing, usability

Posted at: 9:03 AM by Hammad

Notebooks in Disguise

When Toshiba told us they would be tying up with one of the big summer blockbusters, we we're hoping it would be Transformers!

So, when we got the call to attend a briefing at Toshiba HQ, the childhood dreams of the lads at Persona came well and truly to life.

We've produced an interactive campaign web site in Adobe Flash that highlights their featured notebooks and promotes the tie up between the two iconic brands.

Optimising a Prime time experience

Using the movie footage as inspiration, we've used choice cuts of film, stills and sound to produce an intro sequence that sets the mood for the site concept.

The site then features an interactive, 360 degree viewpoint of a Satellite notebook that users can 'Transform'. Browsing through the site, visitors can also take part in a competition to win a Helicopter flying lesson - a direct reference to the new movie Transformer 'Blackout'.

On a more technical level, the site uses ASP.NET to provide 'send to a friend' functionality and also process the competition entries.

Under the bonnet

The intro sequence was edited together and sound synced in Adobe Premiere, with Adobe After Effects used to add the atmospheric lighting. Finally, this was exported as Flash Video and added to the main site without needing any additional browser or plug-in software for visitors to view it.<.p>

For the competition, our ASP.NET code validates entries and posts them as XML to a remote web service on Toshiba's contact database; in a format that complies with their specifications. The web service then returns XML instructions that we use to re-direct visitors to the right page; either a message highlighting any problems or a confirmation that their entry has been successful.

To keep a smooth user experience, we've also used AJAX for the navigation, so the page isn't reloaded when moving between sections.

More than meets the eye

Toshiba and Transformers are both iconic brands in their own right; so how do you start to blend the two together in a partnership?

After being briefed by Toshiba, we worked with the Paramount Pictures footage, image library and usage guidelines to ensure both identities were given the right balance.

In our creative brainstorm, we came up with the concept that just like the Transformers robots, we needed to show that there can be more than meets the eye.

Other than highlight the more obvious brand synergy of Technology between the brands, we wanted to do something different.

For the site, everyday features such as USB connections and Keypads have been shot in an abstract style; suggesting they could be parts of a Transformer. By focusing on areas often taken for granted, we've created a mood that emphasises that the difference with a Toshiba notebook is that style and technology are equally important.

Using the All Spark

Using our in-house photography studio, we had full control of the lighting to create the right artistic style. We then put the shots through digital post production to add the Blue lighting - a common feature in footage from the movie.

Autobots, Roll out

Producing a site is only the first part of a campaign - the challenge is to get people to it. Toshiba have used a number of promotional channels to market the site, including:

• Press Releases to the media
• Banners on the main Toshiba Computers web site
• Send to a friend email
• Viral seeding and link building

With the campaign being time-critical (it's only being ran for the Summer), it is important that the PR activity focused on outlets of quick turnaround; specifically weekly publications and online media. Press releases have been sent to the design, IT and brand media to bring awareness of the campaign to the more effective audiences.

Toshiba have also agreed page sponsorships with Tiscali and have promotional material and signage in Dixons and Toshiba retail stores around the country.

The site features a send to a friend feature, that is branded as either Autobots or Decepticons depending on the users choice. The email sent is branded in the same style as the site, so recipients are enticed to visit the campaign to find out more.

Finally, the site has marketing analytics installed to track visitor levels, user journeys and conversion goals for the competition.

Avoiding Decepticons

Targeted traffic is being sourced and driven to the site using viral marketing. This was chosen over Pay Per Click advertising, so that the word-by-mouse effect would spread fast and search marketing budgets could be reduced - giving more creative freedom to the production side of the project.

Labels: campaign, creative, digital, experience, media, movies, toshiba, transformers