Thank you and Good night

This will be my last post for the ‘Design for New Environments’ course. It’s been a great course and there has been some great input from my fellow students. So thanks to Michael Dunbar our lecturer and to everyone else doing the course.

The jury is still out on whether to keep this blog going. Chances are I will. I always have something to say on current design trends so maybe I should start putting them down on paper. Well this digital paper.

Thanks again everyone. Good luck with the rest of your studies.

Cheers
Paul

Communication Design and New Environments

This is an interesting concept to me that the visual design of a new environment is the skin that makes things look nice. In my business we are first and foremost a design studio and the design always come first.

But then when I speak of design for new environments, I don’t think I consider the design of a website to be only the visual aspect of it. It’s looking at all parts of the environment as an integrated being working together to create the whole.

So to answer the question ‘What does the communication designer do other than just making things look good?’…

The communication designer:
• plays the role of brand custodian to ensure the essence of the brand is maintained and styles are adhered to;
• maintains the visual integrity of the design to ensure consistency throughout the environment;
• ensures the client’s key messages are clearly maintained within the environment;
• manages how the new environment fits within the clients existing output of marketing material and literature. In other words making sure the messages are consistent on all levels of their communication.

and of course the basics of communication design being:
• setting visual hierarchies for the presentation of information;
• taking a lead role in the physical appearance of the website, layout, colours, use of typography, use and style of images.

And

Where do you see your own design practice heading?

This course has been an interesting journey for me. To be honest I have always shied away from the development of websites and when receiving  a brief from a client to develop one I usually find myself leaving it to the ‘Web Heads’ to take care of. My involvement has been about the design and looking after elements such as those listed above. The problem with this limited involvement however is that the final outcomes of these projects have always lacked a certain something that I have never been able to put my finger on.

Since undertaking this course my attention to the development of new environment has changed significantly. Previously, quite naively it seems, I have never considered the possibility that as a designer I can play a significant role in influencing the user experience through UX design.

Currently we are reviewing the way we approach the development of a new environment, focusing on the user experience as an integral part of the development process. Using personas has already made a difference to some of the projects we are currently working towards helping, not only ourselves but more importantly the client, to remain focused on the end user and final desired outcome.

The use of wireframes has also had a huge influence on our process. They are a very new tool for me to use as a formal way to work through the functionality and layout of a new website with the client. Admittedly, the wireframes for this course turned out to be a much bigger task than I had initially anticipated, but while working them up, they have proven to be a lot easier to change and alter than if I was working with a more finished design. I can see how that will save both time and money for our clients and us.

So in short, I see this new knowledge of UX design helping my practice to develop far better websites than we have done so previously. Personally I will be far more involved in the development of new websites so that they no longer lack that certain something that now, is now so clearly, a lack of any sort of UX design influence.

Cheers
Paul

A New User Interface

In redesigning www.hotelclub.com the aim was to enhance the member experience and increase returning member bookings by creating a more personal approach to the online experience for members of www.hotelclub.com.
This includes creating a more personalised experience for the member at login and creating a dialogue between HotelClub and its members. This is achieved by:
Home Page
–    The home page welcomes the user to HotelClub and clearly states the three simple steps in booking accommodation.
–    Step 1 encourages existing members to sign in as well as encouraging new users to sign up.
–    Step 2 is the search facility. For those users that wish to search for accommodation without signing up, there is a quick search facility.
–    Step 3 advertises ‘member’ deals available only to HotelClub members to further entice new users to sign up to become members.

Hotel Club – Home Page

Log in Process
–    On login, a welcome back message is displayed greeting the member to the website, engaging the user by ‘hoping they enjoyed their stay’ at the last hotel they stayed in.
–    This pop-up message also asks what they would like to do – ‘book accommodation’ or ‘check their member rewards balance’, This screen could have additional task options for example; ‘manage their booking.

HotelClub – Pop-up Welcome Screen

Navigation
–    The Hotel Club website is very content heavy so navigation has been simplified into two separate areas. The main navigation for the site sits across the page with links to the websites seven main sections.
–    For each section, a secondary navigation panel sits on the left hand side of the page and is known as the ‘Toolbox’. Each section’s toolbox contains the navigation for the individual section and remains on each page.
–    It was decided to treat the navigation this way so that the content for each section can be easily accessed. Drop down menus were considered but discarded due to the intensity of the information on each page.

HotelClub – Navigation and the 'ToolBox'

HotelClub – the Hotel Finder 'ToolBox' and more personal searches

Language and other UX enhancements
–    Language used for these areas of the site is friendly and conversational and is aimed at prompting the user while they’re completing tasks.
–    As part of the search process the website offers a recommendation of hotels at their chosen destination based on their member profile.

I’ve attached a PDF of the mock-ups for a closer look – HC_Mockups

Cheers
Paul

There’s a UI Pattern for Everything!

Outlined below are some UI Patterns that I have identified as appropriate for the redesign of www.hotelclub.com.

For ease of explanation I have grouped them in to categories as per http://ui-patterns.com and http://developer.yahoo.com/ypatterns

Layout

Because the Hotel Club Website has a large amount of information that needs to be managed, I am proposing that the navigation be broken into two parts. The main site navigation that will run across the page and the secondary navigation will be presented as a vertical menu on the left of each section as a type of ‘Toolbox’

‘Module Tabs’ could be used to accommodate this so that the user can navigate the various tasks related to each section without leaving it.

Throughout the site there are areas where images of the hotels are used in particular the search area. ‘Thumbnails’ are used to show smaller versions of the larger images of the hotels

Member Registration

The HotelClub site has a member program where you can earn member rewards that you can use to pay for future accommodation booking.

‘Account Registration’ lets the user register an account with the website that allows you collect information on the user which allows personalisation of the information displayed to the user

When creating an account the user must pick a suitable password. UI Pattern ‘Password Strength Meter’ give the user an indication of how secure their intended password indicating whether it is either Too Short, Weak, Fair, Good or Strong.

For users visiting the site that may not be ready to become a member of the website, ‘Lazy Registration’ allows the user to create a ‘Free’ account to try out the site. This can later be converted to a full account when they are ready. It also allows the website to collect preliminary information on the user.

Hotel Reviews

The redesign of HotelClub allows for its members to rate hotels they have stayed in. The UI Pattern ‘Vote to Promote’ allows users to vote for hotels that are then displayed in order of how popular each hotel is.

Usability

The aim of the redesign of www.hotelclub.com is to create a move interactive experience for its members leading them through step by step to book accommodation.

‘Wizard’ allows for this process particularly when the steps needed to reach the final goal may vary due to decisions made at various stages throughout the process.

When searching for accommodation, there are many variables that the user must input in order to complete the search. ‘Fill in the Blanks’ allows for predetermined answers to be put into part of a sentence or question so that the user can simply select the desired input. Unfortunately, this pattern does not working seamlessly with multi-lingual sites which inturn can disrupt the conversation with the user.

The process for booking accommodation has a number of steps. The UI Pattern ‘Steps Left’ lets the user know at what point along the process they are and gives simple instructions to the user what task to complete at each step.

HotelClub – Working with Wire Frames

Below are 3 wire frames outlining the proposed new layout for www.hotelclub.com. The wireframes include the ‘Home Page’, the welcoming pop-up screen after member login and the member profile page.

This my first experience with working with wire frames in the development of a website layout. Initially it seemed like I was doubling up on processes by not working with the final design and design elements however, while working through the layout I found that my initial thoughts on layout and how the website should hang together changed significantly. Working with wire frames made the process so much easier to make changes, try different approaches and hopefully come up with a better outcome than initially planned for.

Using annotations with the wire frames has also proven to be a great way to describe what is going on within each page simply and directly.

Proposed HotelClub Home Page

Proposed HotelClub 'Welcoming' pop-up window for returning members

Proposed HotelClub Member Profile page

Attached is a PDF file of the wire frames for closer detail. HotelClub_Wireframes

Exciting times or just less time for myself?

On Friday 09.10.2009, AGDA (the Australian Graphic Design Association) held their National AGM at which I was voted in as National Vice-President. I think these are very exciting times for our industry as a whole and I’m excited to be in a position where I am in the thick of it! It’s important to support our industry so get out there and get involved.

Go check out AGDA’s own newly redesigned website: www.agda.com.au

Cheers Paul

A Wireframe in Time Saves Nine!

What kinds of design decisions do wireframes help us to explore and make?

For me wireframes are a very new concept. Well not really, because we all do rough sketches (or wireframes) when working out layouts etc, just the idea of using them to present to a client the structure of a websites page layout initially in a much simpler way rather than presenting the almost complete design ideas first.

They would been a huge help in a recent website redesign we did where there were countless hours configuring and re-configuring the site map (it could have been more right if the client politics didn’t get in the way) so you can imagine what it was like trying to work with the client to refine the websites physical design.

Had we approached the page layout stage using wireframes, there would have been so much time saved in having to rehash the design. Layout changes to the home page could have been done simply and quickly, not having to worry about colours and fonts etc until after the page layout had been agreed upon.

And there would have been a lot less heartache from the designers having to change the design over and over again.

Cheers Paul

Who Are You and What Do you Want?

Why would an experience design brief be important?

To complete any design project, there needs to be some sort of brief between the client and the designer. Without a brief, we are just guessing. With no understanding of the basics: like what is the job for? and who is the target market? it would be like playing pin the tail on the donkey: we know we are supposed to do but is it actually a donkey what sort of tail would he like?

When taking an effect brief from a client, we need to take in so much more than only what the client is saying with intuition playing a huge role in gaining an understanding of not only what the client wants but also who they are. Taking the brief is one thing but, if not undertaking the design work yourself, you then need to effectively communicate to the designer working on the project all of those vital and unsaid details.

In my office, we have a briefing sheet that we give to our clients that tries to dig up some of these unsaid details. Funnily enough more often than not these questions are left unanswered with comments being ‘we don’t know’ which means more digging on our part.

Well written briefs are great if you have that initial understanding of the client, with new clients however, only having a brief, no matter how well written, can be missing that little extra if you can’t talk directly to the client. In my experience when working with an account manager that doesn’t want the designer to talk to the client???, the situation can go pear shaped because they haven’t been able to communicate the clients needs effectively. In one case, the account exec was putting their own spin on what the client wanted. Disaster!!!

So after my rambling, briefs are very important to the design process because that help make sure everyone is on the same page and stay on brief and target for the project. There is however no substitute for meeting with the client and designers to discuss the project to gain the best understanding possible of the requirement for the job.

So why are experience design briefs important? So that the experience designer can clearly articulate to the designers and developers how the personality of a website need to be developed so as to maximise the user experience in a particular way. I also think that the greatest benefit of an experience design brief, is to assist those who don’t necessarily have the ability to understand an experience or empathise with a persona do so.

Cheers Paul

To Redesign or Not to Redesign..? That is the question…

Thanks to Tor for this link to Jakob Nielsen’s article on how aggressively you should redesign an existing website: http://www.useit.com/alertbox/familiar-design.html

I thought it was a great article and one worth sharing.

Cheers Paul

HotelClub Site Map and Task flow for Member Login

Below is Draft 1 of the site map for the redesign of the HotelClub website. My main focus here is the user experience for members of HotelClub and their login process.

Image 1 is the overall site map. Although on a whole it isn’t hugely different to the existing website – the general information/FAQs sections etc haven’t changed in their structure a great deal, my focus is on the login process as show in image 2 below.

Image 1 – HotelClub Site Map

Image 2 shows the login process for HotelClub members. The aim of this new process is to create a more personal experience for the user when they are booking their overseas accommodation through HotelClub.

HotelClub member login process

The goal of this redesign is to enhance the member experience and increase returning member bookings by creating a more personal approach to the online experience for members of www.hotelclub.com.