Website design and build

Creative design

The creative design process usually starts with a brief from the client. If there is a brand established already, that provides both inspiration and a certain level of constraint on ideas. A website is a representative of its company and the design needs to communicate the personality and values with continuity to its other marketing material.

By combining colour, shape, typography, photography, graphics, sound and video, a designer creates an atmosphere and a consistent identity, providing a framework to support the functionality and content that will eventually complete the experience.

Functional design

One of the key techniques in functional design is 'chunking' – breaking a system into smaller modules and features. Not only does this make complex systems and processes easier to comprehend and memorise, it makes it possible to zoom in to particular components and spend time identifying low-level problems that might otherwise be missed. This object-orientated approach also allows individual components to be combined or integrated into larger processes, without duplication or unnecessary redundancy.

A functional specification is neither a creative brief nor a technical specification. It shouldn't dictate design or worry about how the functionality is implemented by the developer. The purpose of a functional specification is to describe – primarily from a user's point of view – the individual modules, features, inputs and outputs of the system, together with the logic that constrains them and the relationships that link them.

User experience design

User experience design is a subset of experience design with a focus on digital interactive products, including software applications and websites. By combining the outputs of creative and functional design activity – adding the disciplines of accessibility, usability, information architecture, interaction design, user interface design and contingency design – a positive, valuable and consistent experience can emerge.

It is important to recognise that user experience is a key part of branding. Good user experience increases conversion rates by generating trust and encourages both loyalty from existing users and new traffic from viral referrals.

Accessibility

Web accessibility is about designing content and functionality that is accessible to people with disabilities, including sight, hearing and speech; physical, cognitive and neurological disorders.

The Web provides a gateway to all kinds of content and services, and crucially, has the power to enable people with disabilities to access these resources with a level of freedom and independence that would otherwise be impossible.

In the UK alone there are an estimated 8.5 million disabled people with a combined spending power of up to £50 billion. The number of users with some form of disability is constantly growing due to the increasing older population with a desire to venture online for the first time or to continue doing so.

Essential in designing accessible Web applications is understanding what disabilities people have and what technologies (screen readers, refreshable braille displays, magnification, voice-recognition, etc.) they use to facilitate access to digital content. By recognising the needs of these users and predicting problems that they may face, designers can remove barriers and develop solutions that make their interaction an easier, more enjoyable – and most importantly, inclusive – experience.

Usability

A usable product is one that is practical and efficient. Contrary to popular belief, usability and user experience are not one and the same. Usability is just one part of the overall experience a user has when interacting with a website. Usability has a narrow focus on utility and efficiency and must work in harmony with the other aspects of UX in order to generate the positive feelings, emotions and attitudes that are so crucial in attracting users and keeping them satisfied.

Information architecture

The Web is an incredibly diverse resource of information but unless it is organised in a way that is both logical and efficient, any value it may hold is lost. This is the job of the information architect – to recognise patterns in information, group related items according to a taxonomy that users can understand and provide sensible routes through that information.

Users and other stake holders can be involved in the IA process through a range of activities, including card sorting. By asking a number of users to arrange and categorise a series of cards, each representing a subject or an individual piece of content, it is possible to identify trends in the way people expect information to be structured.

Interaction design

Commonly referred to as IxD, the interaction design process answers questions about how users (and other systems) enter information and receive output from an application. Ignoring the functional interfaces that control the interaction, IxD specifies the logical actions and exchanges that happen during a process.

For example, in order to process an order, a website will firstly need to interact with a customer. The customer requests details of a product and the website displays the relevant information. The customer requests that the product be added to their basket and the website records that request. During the checkout process, the website must interact with a payment gateway to request authorisation and understand what to do with the response. Once payment is made, the website needs to inform the customer and also exchange information with another stock management system. Each of these interactions, and all possible permutations and outcomes, must be designed.

User interface design

Not to be confused with interaction design, UI design is concerned with the layer that sits on top of and facilitates the abstract inputs and outputs between user and system; it's about levers, switches, dials and flashing lights. With a solid understanding of the conceptual interaction model and processes, it is possible to design interfaces that empower users to discover and perform those interactions and to receive the output in ways that are both efficient and enjoyable.

The interaction between a user and a vending machine is designed such that the machine releases a particular product in response to a corresponding number inputted by the user. However, the method by which that interaction takes place – how the user actually makes their selection and inputs the number – is a question for the UI designer.

On the Web, UI designers must consider everything from the position of the main navigation menu to which types of controls are most appropriate to collect information on a form. They must balance their decisions between facilitating the required interactions and providing an accessible, usable and enjoyable experience.

Contingency design

There will always be situations where a user makes a request that the system is unable to answer or performs an action that goes against how the system was designed to work. Leaving form fields blank, requesting a page that doesn't exist, making a spelling mistake when performing a search or trying to buy a product that is out of stock are all examples of how users could challenge a system.

By predicting these challenges and proposing solutions to either prevent or deal with the problem – by answering the 'what if...?' questions – it is possible to find solutions that add value to failure and maintain a positive user experience.

Quality assurance

It is crucial that a product and the thinking that shapes its design are tested, not only just before launch, but throughout the development process. Effective QA is about asking the right questions, understanding what the correct answers should be and identifying where faults exist or where things could be improved.

When testing a complex interactive product such as a Web application, the first questions should reveal whether the system is even ready for further testing. Does it actually work? If the product isn't usable on even the most basic level, real functional testing cannot begin.

The next stage is to test the implementation against the specification; to compare what has been built against what was envisaged in heads and described on paper. If things are different, are they better than had been designed? Most importantly, have the requirements been satisfied and the business objectives met?

Finally, test the boundaries and try to break it. Using a similar technique to that employed during contingency design, and based on the failures designed during that process, it's possible to predict both 'reasonable' and 'unreasonable' challenges that the product might face and evaluate how it responds to those challenges. What happens if a user enters a date in the wrong format, or they use words instead of numbers? What if they try to input JavaScript or SQL queries? Test performance with a reasonable 1,000 and an unreasonable 10,000 concurrent users (or whatever numbers are appropriate for each project) and discover what it takes to cause the system to become noticeably slow, or to fail completely.

This blog post was written by Matt

If you would like to discuss this post why not follow us on twitter?