A short primer on the UX Design process with the possible deliverables at each stage.

1. A PRIMER ON UX DESIGN

2. 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.

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

4. 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.

5. The UX Design Process
Define
Ideate
User Test
Prototype
Build and Deploy
Analyse & Iterate
Design Iteration

6. Step
Decoding Each Step of the Design Process
1.Define
2.Ideate – User Test – Prototype
3.Build and Deploy
4.Analyse and Iterate

7. 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.

8. 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.

9. Step
Decoding Each Step of the Design Process
1.Define
2.Ideate – User Test – Prototype
3.Build and Deploy
4.Analyse and Iterate

10. 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?)

11. Sample Experience Map of Social Gamer

12. 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.

13. Sample UX Flow Diagram

14. Sample Sitemap

15. 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).

16. 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!

17. Step
Decoding Each Step of the Design Process
1.Define
2.Ideate – User Test – Prototype
3.Build and Deploy
4.Analyse and Iterate

18. 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.)

19. 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.

20. Step
Decoding Each Step of the Design Process
1.Define
2.Ideate – User Test – Prototype
3.Build and Deploy
4.Analyse and Iterate

21. 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.

22. Thank You