The anatomy of user experience

What is UX? User experience (UX) is what your customer feels when interacting with your online offerings. To deliver a great user experience, the digital designer must manage a balancing act, considering the goals of the user and the business as well as technical limits. Here's advice for anyone seeking to create a new website or digital product.

The five elements

1. Conception
It all starts here, usually with quantitative (such as structured surveys) and qualitative (like open user interviews) research. Once the data’s been sorted into categories of users, it’s developed into ‘personas’. These are fictional customers whose habits and needs are based on common elements identified in consumer research.


The personas serve as useful references. They also help to address your product’s potential ‘pain points’ – problems a user may have – and are used as a guide when identifying the site objectives.

Personas usually contain this information:

•    Goals and needs
•    Behaviours
•    Pain points
•    Scenarios
•    Biographical information.


2. Imagining the baby
Based on the user needs and site objectives, the designer must write a series of functional specifications. These are the features needed to ensure you have a working product or service. Once you have determined these, you need to list the content requirements, such as words and text. If you were creating a photography app like Instagram, for example, you would need to ensure the user could take photos and share them. Taking photos is the function; uploading and sharing the images creates the content.

3. Building the skeleton
Next, the designer must create the structure – information architecture (IA) – which organises the information in a logical way. Typically this involves creating a site map. Then the ‘interaction design’ is developed, which allows the user to access the site or product in the best possible way, also referred to by interaction designers as ‘the happy path’.


4. Assembling the organs
Once the flow and architecture of the product have been determined, the designer creates the functions, which are separated into three main parts: interface, navigation and information design.

When designing the interface, the designer must predict what the user may need to do to complete certain actions, which involves determining, for example, the behaviour of buttons, sliders or form fields.

Then the navigation is designed. This guides the user through the site or product, via tools like menus and ‘breadcrumb trails’ (secondary navigation devices that reveal the user’s location in a website).

Information design determines the hierarchy of the content, which includes the positioning of elements from the site or product. These include images, titles and sidebars.

Once all these elements are in place, a wireframe is designed. This is a page plan or blueprint (like an interactive editorial plan) which is then thoroughly tested to ensure all the elements work well together.


5. Putting on the skin
Finally, using the wireframe as a base, all the visual components – such as graphics, icons, colours, images and fonts – are added to create a prototype. This is then tested on sample users to check that the product works. When this is complete and the design is approved, the actual code is developed prior to the product launch.

The result, hopefully, is a happy and healthy infant.



By Randle Juan