I was fortunate enough to recently develop and conduct a course on website design inception for one of our clients.

Our team recently determined that it was necessary to orchestrate a workshop that focussed on enabling clients to think more broadly about their brand, their business ethos and most importantly the end user rather than only concentrating on the site requirements. After testing and positive feedback from this method, we determined to use this approach as a standard for all new website development projects.

This process was designed to address specifically:

• The client’s uncertainty about what the website was to deliver
• The client’s requests that were out of the scope of regulations, timeline or budget
• Varying design ideas and options amongst client panel members
• The clarification of terminology/language between the client and us as developers
• The difficulties in identifying the target audience and the design of a site with the end user foremost in mind.

The workshop

After a few weeks of investigation and design, the UX team and I developed a 3-4 hour workshop that provided participants with a baseline of technical/web development language, and a basic understanding of the design process. The success of the workshop also focussed on getting the participants thinking about the user and their experience when traversing a website, and as the designer, coming away feeling confident with a direction when designing the website.

The workshop divided into three different sections:

• User experience design
• Aesthetics
• Structure

User Experience Design

The intention of the focus in this section is to give the client an understanding of user experience design. Participants were encouraged to start thinking about the user's state-of-mind when interacting with a website in general. The focus was to help the clients to understand that website design that is easily navigated, naturally intrinsic and accessible will provide the user with a positive experience and thus guarantee that they will want to return to the website.

This section also begins to introduce website language via labelling the various elements and terminology to participants. It also provides an opportunity for a quick look at the current design and user data trends.

I found that I could quickly skim through this content as it was intended to be a brief overview and also because the participants were well informed and up to speed on this topic. I provided a couple of examples of common websites, their evolution, and functionality, as well as examples of good user experience versus bad user experience.

A few topics we covered were:

• The flow of interaction (how a user interacts with a website, from what they see to what they do)
• Understanding a User Experience
• What makes a good website experience?

Visual design, typography, user interface design, interactive design and usability/accessibility. 

Aesthetics

Where the fun begins, after a short introduction:

“Aesthetics: a set of principles concerned with the nature and appreciation of beauty. The branch of philosophy which deals with questions of beauty and artistic taste.”

We moved onto a series of activities that at first seemed a bit wishy-washy, but started by putting the attendees into a frame of mind for creativity.

Activity 1: Your famous person

If your organisation were a famous person (fictional or non-fictional) who would it be? And why?

At first, clients were a bit sceptical, looking at each other like ‘is he for real?’ but luckily we had some die-hard creatives in the group who helped to start the conversation. This created a great flow in the group, with myself writing down notes on a large piece of butcher’s paper (despite all the technology available in the world, nothing beats post-its and butcher’s paper!). Characters like ‘wonder women’ and ‘Luna Lovegood (from harry potter books)’ where mentioned.

It also queued things up perfectly for the second activity.

Activity 2: The waiting room

Imagine your organisation has a waiting room/reception hall, Ask yourself?

Followed by a series of questions that sparked thought proving responses, such as:

• How big would it be?
• What’s hanging on the walls?
• Is there a receptionist? Or a concierge?

By this time the group was warmed up and already talking about different ideas. One of the best responses was ‘an airport terminal, arrivals and air stewards’ which fitted the genre of the project, other keywords were ‘light and bright’ and ‘open plan’. As the lead web designer for the project, in the back of my head this helped dramatically in drafting up ideas as the project progressed.

As an extra tool for this activity, I made an A4 page that I would hand out with questions and keyword prompts for those people who might be struggling with the task. But I would suggest that if there is a clear flow of creativity developing amongst the group, then there is no need for these prompts (as they may direct design rather than assist it).

Structure

After a short break, we moved on from the feel and emotions of the website and took a glance at the more practical, look and structure of the site.

It began with a short introduction of the grid, (without going too much into the technical language) how sites using frameworks such as bootstrap adheres to rows and columns and allows the site to have a structure and respond smoothly to various devices and the simplicity or complexity of how a grid can appear.

We then moved to the first activity of this section.

Activity 3: Design your book cover

Design a book cover that would best reflect your subject matter

An excellent way to prioritise the main messages the client may have.

The client is given a large sheet of paper with a template of a spine, spine, back and side flaps (like a dust cover). It required them to determine their central message and put it on the front cover and lay out the additional content in the other areas. They were also required to illustrate or diagram any associate images that best represented the cover.

“A good cover conveys the essence of the book. It is readable, and its message is clear. It also is aesthetically appealing.” 

Activity 4: What’s on your homepage?

From this we were then able to move onto an even more practical activity, outlining the clients expectations of the homepage – , the team were able to determine what essential information was – what their key messages were and any call-to-actions.

List the key elements you want to appear on your homepage

Participants brainstormed amongst themselves and then we listed the items on a piece of paper and discussed the importance (priority) of the page (i.e., above the fold, on the footer, etc.).

Activity 5: Sort your site.

By this step the client now had some key ideas of what to include on the homepage; they were able to design a basic wireframe of the site right then and there on the workshop room table!

Armed with a couple of decks of custom designed UI cards, each with a different element, image, content, slider. The team split into two groups each with a deck of cards, and were able to sort through and mock up a layout of their homepage, coupled with some descriptive sticky notes; each group put together a basic wireframe of their homepage. Afterwards, each group took a look at each of the ‘wireframes’ and discussed the pro’s and con’s of each layout and were able to come up with a final version at the end.

I was then able to take this back to my desk and build a prototype of it at a later date.

Overall the workshop was a huge success from our previous methods of the design process, we received excellent feedback from the client on the content and execution of the workshop, and the UX team were able to walk away feeling confident they had a direction to go for the design of the website.

We’ve since used the workshop a couple of times, for various clients, each time resulted in the same positive response and helped with the project development greatly.

One of the key things that we learnt in both researching and conducting the course is that it saves a lot of time and hassle to include clients into the design process rather than acting as a service that provides endless small alterations of a design that can send both the client and designer nuts.

One of the unexpected benefits of this initiative is that running a professional workshop with clients also helps in asserting a level of authority within the developer – client relationship. By talking about, and sharing knowledge of user experience design you are showing the client that you essentially ‘know your stuff’, and you are not just another ‘designer’.