A PRIMER ON UX DESIGN

What is UX?

The overall experience, in general or specifics, a user has with a product of a service. The experience encompasses more than merely function and flow, but the understanding compiled through all of the senses. Not just a web product – UX is important even while you are building bridges or even cities.

Pillars of UX

The four key pillars of UX are: 1. Information Architecture 2. Interaction Design 3. User Research 4. Usability Testing

UX vs UI

UX determines how the product will feel by exploring different approaches and laying out the foundations of a program in terms of interaction design, information architecture, flow, user feedback and usability understanding. They identify and lay out all the verbal and non-verbal stumbling blocks of a product.

UI determines how the product is laid out. They are in charge of designing each screen or page with which the user interacts and ensures that the UI visually communicates the path that the UX designer has laid out.

The UX Design Process

Define Ideate User Test

Prototype

Build and Deploy

Analyse & Iterate

Design Iteration

Step Decoding Each Step of the Design Process

1. Define 2. Ideate – User Test – Prototype 3. Build and Deploy 4. Analyse and Iterate

Define In this phase, you marry the business goals with the user goals. Let’s take an example: If you were creating the UX of Amazon (in the phase where it was still selling books), your business goal will be ‘Amazon wants to sell books to users’ and your user goals will be the following: a. Users want to search for books b. Users want to read and compare books c. Users want to view books and recommendations about books d. Users want to be able to create wish lists of books e. Users want to buy books with minimal problems and get them shipped to their house

as soon as possible. f. Users want the payment process to be hasslefree and secure and ideally cash less.

Define (contd.) The marriage of the business goal and user goals create a scope document of the product. This ‘scope’ is created with several user interviews and after developing user personas that is done by the UX expert in house and based on the scope a UX metrix is created. A UX Metrix sample is given here.

Step Decoding Each Step of the Design Process

1. Define

2. Ideate – User Test – Prototype 3. Build and Deploy 4. Analyse and Iterate

Ideate – User Test - Prototype The intention of user experience is to ‘positively effect how users feel after they visit your site’, ‘Increase repeat visits from the users and encourage recommendations to others’ The first part of Ideation is to is draw up an Experience Map – which will determine the following: 1. Product features 2. Utilities (utility presented by each feature) 3. Colour and done (starting from branding to the rest…) 4. Design Philosophy (utilitarian, syle driven, etc.) 5. Interaction Philosophy (experience and benefit presented by each interaction on the

site – for example if a site is supposed to be deeply layered then what is the interaction philosophy that is determining it?)

Sample Experience Map of Social Gamer

Ideate – Prototype - User Test The Prototype phase is divided into three distinct deliverables from the UX expert. 1. Flow of the site – a takeaway from the experience map or a modified version of the

experience map which highlights the flow that the user goes through on the site. 2. Sitemap – a complete breakdown of each interaction flow of the site. The sitemap will eventually be made available for users too on the site – so it highlights the entire elements and movements that are happening within the site. 3. Wireframe – this wireframe is the blueprint for the prototype – which forms the basis of the UI design and is dependent on the sitemap. The visual design for the prototype is created based on the wireframe.

Sample

UX Flow

Diagram

Sample

Sitemap

Ideate – Prototype - User Test When you design a prototype – you select the initial flow of the site (taken from the experience map + flow + sitemap) and then create a UI of that. Based on that, you design your Proto (a limited working version with limited functionalities).

Ideate – Prototype - User Test The user test offers a plethora of feedback on the product and leads to iterations across all areas – such as site features, interactivities, design which in turn affects everything from the sitemap to the flow diagram.

What do you think users do

What users actually do!

Step Decoding Each Step of the Design Process

1. Define 2. Ideate – User Test – Prototype

3. Build and Deploy 4. Analyse and Iterate

Build and Deploy The process of building and deploying starts off with the following documents: 1. Sitemap 2. Flow diagram 3. UI 4. Technical specifications document – (typically built by the architect + senior

developers which will specify the technical architecture, the types of technology to be used, the user requirements, server requirements, type of usage specifications, how many users will simultaneously work on the site, etc.)

How much detail do we need from UX When you are building and deploying a product, the UX flow diagram needs to have all the requisite details of each interaction. If we were to compare the process of ‘building the site’ with making a film – the UX flow document needs to have the detail of a completed script + storyboard. For example: If a user starts creating content on a blog and then abruptly clicks the ‘close’ button on the top right corner, then the UX flow needs to say that there will be a message box which will open up and say ‘XXXXX’ with the options of ‘saving’ and ‘continue’ buttons.

Step Decoding Each Step of the Design Process

1. Define 2. Ideate – User Test – Prototype 3. Build and Deploy

4. Analyse and Iterate

Analyze and Iterate Post deployment – the analysis stage needs to be constant and the entire process of User test’ needs to be employed at a large scale.

Thank You