User Experience DesignBy Zia Rahman

Intro to User Experience Design

What is User Experience (UX)

User Experience is a way a person feels about using a product, system or service

User

person

Feelings

People are emotional

Experience

Using Something

Bad UX

FrustrationAnnoyed Customer Negative perception

Loss to Business

Why should we care about UX?

Build Brand LoyaltyIt’s a Good Business Sense

UX is Good User Interface

UX is just about Usability

UX is just about the User

The Misconception

So is UX about a Good User Interface?

Certainly Not..

So is UX just about Usability?

This would lead to destination

This would be a fun trip to the destination

So is UX just about the User?

Business Goals

Users Goals

Requires a right balance

How do we create great experiences?

• The company and the business need

• The competition in market

• The people (users of the product/services)

• The process and the inter dependencies

• The technology and it’s limitations

Think about….

UX Vision

Technology

Research

Business Market Study

User Technology

RESEARCH

• Business Goals• Product Strategy• Product Features• Go-to-Market• Roadmap• Revenue Model

• Potential• Process & Workflow• Competitive Analysis• Challenges• Opportunities

• Demographics Research• Psychographics Research• Job Type & Task• Challenges & Constraints• Needs & Expectations

• Custom/Product• Features• Channels – Web/mobile• Challenges & Constraints• Market Trends

Design

Design

PersonasPrototype

(Wireframe)

Usability Testing

UI Engineerin

g

Personas identify the user motivations, expectations and goals responsible for driving online behavior, and bring users to life by giving them names, personalities and often a photo

Information Architecture - Focuses on organizing, structuring, and labeling content in an effective and sustainable way.Interaction Design - often abbreviated IxD, is "about shaping digital things for people’s use“

Task analysis is the process of learning about ordinary users by observing them in action to understand in detail how they perform their tasks and achieve their intended goals. •HTMLIZATION - HTML, CSS, JavaScript,

•Compatibility – with all standard browsers•Accessibility Compliance – WCAG 2.0 (Priority 1,2, & 3)

Task Analysis & Task Flow

Visual Appearance & branding

•Visual Appearance –Design theme, layout, graphics, typography, colour scheme, animation and selecting appropriate images to support the brand message•Branding: Guidelines and style guide assets

Usability testing is a technique used in user-centered interaction design to evaluate a product by testing it on users

A sample persona of a Teacher

Personas

Khaled The Foodie!

I live to eat, I love trying out new

food.

Name - Khaled Tariq

Age - 27 years

Income - 10,000 SAR

Industry - Teaching

Employer - Al Hussan International

School – Riyadh

Computer Skills – Intermediate

Device - Laptop & Android Phone

Orders food online almost every

day after school.

User Goals

Good quality food

A quick and painless online

ordering of food

Background

Khaled is very active in filed field and contributes

to a variety of information platforms, including his

own website, wikis, and blogs. Khaled lives alone

and spends most of the time in school, at end of

the day he wants to come home and relax and

order his food online at times. A typical day for

Khaled starts with school in the morning, visiting

friends or family in evening if there is strength left

he cooks or he orders food online. He is a foodie,

he loves trying out new food and often take

recommendations from people around him. “I

would like to order food online, at good price and

where I can get lot of variety”

Khaled likes spending time on internet looking for

recipes when he is not working on school

assignments, he orders online what he can’t cook

or least to say can’t cook it “good enough”.

Preferred Restaurants

Expectation While Ordering Online

Offer variety, Quality , Efficient Delivery,

Loyalty Points, Discounts, Combo Offers,

One Click Order, Track the Delivery

Persona Scenarios

Would like to order food online

almost everyday

Checks online for recipes or food he can order. Is heavily

influenced by recommendations made by colleagues, friends

and relatives

Finds site compare prices and orders food that looks alluring

and suits the budget.

Order food online when friends

visit him.

Click on favorites and open the website that he frequently

visits, check for websites for offers and discounts.

Order food as per friends taste

1. Time of the day you order food online the most? - Mostly evenings after school or twice on weekends.

2. Expect from an online food ordering portal? -Better apps for phone and tabs, lot of variety and good quantity.

3. Difficulties faced by you when ordering food online?- None

4. Biggest concern while ordering food online?-Food taste when trying a new restaurant, would like to read few reviews.

A persona represents a cluster of users who exhibit similar behavioral patterns in their purchasing decisions, use of technology or products, customer service preferences, lifestyle choices, and the like

A sample task flow of online book store

Task Analysis

http://www.uxmatters.com/mt/archives/2010/02/hierarchical-task-analysis.php

Affinity Building Process to Design Information Architecture

Prototype(Information Architecture)

A Sample WireframeDesign of Travel Booking website

Tools - http://mashable.com/2010/07/15/wireframing-tools/

Prototype(Wireframe)

A Sample Visual Design of travel booking website

http://www.hongkiat.com/blog/web-design-trends-2014/

http://www.slideshare.net/goldengekko/mobile-apps-design-trends-2014

Visual Appearance & branding

UI Engineering

HTML 5CSS 3.0JavaScript Library –JQuery, AngloJS, Bootstrap etc.Flash/FlexWeb Font

SWD - Scalable Web Design ORRWD -Responsive Web Design

http://www.csschopper.com/blog/responsive-web-design-consider-6-points-while-designing-a-website

Usability Testing

Heuristic Evaluation

Focus Group Review

Lab Testing

Heuristic Evaluation is a discount method for quick, cheap, and easy evaluation of the user interface.

The process requires that a small set of testers (or “evaluators”) examine the interface, and judge its compliance with recognized usability principles (the “heuristics”). The goal is the identification of any usability issues so that they can be addressed as part of an iterative process.

A focused discussion where a moderator leads a group of participants through a set of questions on a particular topic. Focus groups are often used in the early stages of product planning and requirements gathering to obtain feedback about users, products, concepts, prototypes , tasks, strategies, and environments.

http://uxdesign.smashingmagazine.com/2011/10/20/comprehensive-review-usability-user-experience-testing-tools/

Usability testing is a method by which users of a product are asked to perform certain tasks in an effort to measure the product's ease-of-use, task time, and the user's perception of the experience. Usability testing can be done formally, in a usability lab with video cameras, or informally, with paper mock-ups of an application or Web site.

http://www.usability.gov/how-to-and-tools/methods/usability-testing.html

Defining the

Problem Delivering the

Experience

Architecting the

TechnologyDesigning the

Experience

Total User

Experience

Interaction Design

InformationArchitecture

Usability

Content

User Research

Branding

Visual Design (UI)

Creative Thinking

Front-end Development

Animation

JavaScripting

CSSRich Interface

Technology

HTML

Accessibility

Mobile & Tablet

Multi-Lingual/

Localization

Back-end

Prototyping

APIsPackage Solution

Platform

Testing

Task Analysis

Requirement Gathering

Problem Framing

Business Intelligence

Evaluation

Business Analysis

Research

1

23

4

UX 360 Degree View

User Touch Points

Total User Experience

Web App – UX Design Case Study

Evaluation of Staffing Needs Workforce Planning tool provides a solid Data Foundation and Resource Tracking capability to support basic Resource Management today and more advanced analytics in the future

Primary Users: Managers

User concerns / our observations:• Poor usage by managers; not user-friendly• Unstructured information and navigation flow• Tasks flows too complex; too many clicks• Lack of clarity in visual data and screen layouts

Global Workforce Planning Tool

Global Workforce Planning - Before

• Homepage not well structured; does not give useful information upfront

• Navigation not intuitive. Start point and flow is not understandable

• No Textual / Visual Aids

• Improper utilization of screen real estate. Design is not scalable to accommodate more regions

Landing Page Group Model Selection

Global Workforce Planning - Before

• Very cluttered and confusing design.

• No proper grouping of the sections to make the form simpler

• Input forms not user-friendly

• No search, filtering or sorting

• Cognitive overload for the new user and for existing user very cumbersome process to work form

Resource Management Page

What we did & how

• Interaction with business users

• User interviews and questionnaires

• Information Architecture & screen flows

• Wire frames for visual interpretation of the interaction model.

• Visual Design & HTML prototype tested by users

• Iterative prototyping process

• Prototype as baseline for development

• Usability Testing

• UI Style guide standardization

Global Workforce Planning– Wireframe 1

2

3

1 Login Page – A neat a balance design layout

2 Landing Page to select Model Group– Well defined and clearly visible navigation, Step-by-step approach to select model group and , scalable to add more regions,

3Resource Planning Page – Step-by-step approach by grouping sections under 4 to steps to fill/update data and generate report. Introduce search to find a particular record, structured information, expandable list view to update a record

Global Workforce Planning– New UI

Login

Group Model Selection

Global Workforce Planning– New UI

Resource Management

Global Workforce Planning– StyleGuide

Layout

Color Palette

Buttons Fonts

Navigation

Grid

Thanks

Zia RahmanConsultant – UX Designzia.rahman@gmail.com