1. User Experience Design
By Zia Rahman

2. Intro to User
Experience
Design

3. What is User Experience (UX)
User Experience is a way a person feels about
using a product, system or service

4. User
person

5. Feelings
People
are emotional

6. Experience
Using Something

8. Bad UX
Frustration
Annoyed Customer
Negative perception
Loss to Business

9. Why should we care about UX?
Build Brand Loyalty
It’s a Good Business Sense

10. The Misconception
UX is Good User Interface
UX is just about Usability
UX is just about the User

11. So is UX about a
Good User Interface?
Certainly Not..

12. So is UX just about Usability?
This would lead to
destination
This would be a fun trip to
the destination

13. So is UX just about the User?
Business
Goals
Requires a
right balance
Users Goals

14. How do we create
great experiences?

15. Think about….
•
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

16. UX Vision
Technology

17. Research
• Business Goals
• Product Strategy
• Product Features
• Go-to-Market
• Roadmap
• Revenue Model
Market
Study
Business
RESEARCH
• Demographics Research
• Psychographics Research
• Job Type & Task
• Challenges & Constraints
• Needs & Expectations
User
Technology
• Potential
• Process & Workflow
• Competitive Analysis
• Challenges
• Opportunities
• Custom/Product
• Features
• Channels – Web/mobile
• Challenges & Constraints
• Market Trends

18. 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“
Design
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
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.
Prototype
(Wireframe)
Personas
Task
Analysis &
Task Flow
Usability testing is a technique
used in user-centered
interaction design to evaluate
a product by testing it on users
Design
Usability
Testing
Visual
Appearance
& branding
UI
Engineerin
g
•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
•HTMLIZATION - HTML, CSS, JavaScript,
•Compatibility – with all standard
browsers
•Accessibility Compliance – WCAG 2.0
(Priority 1,2, & 3)

19. User Goals
Good quality food
Personas
A quick and painless online
ordering of food
1.
Expectation While Ordering Online
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
persona of a
Teacher
Offer variety, Quality , Efficient Delivery,
Loyalty Points, Discounts, Combo Offers,
One Click Order, Track the Delivery
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
2.
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.
Persona
Would like to order food online
almost everyday
Order food online when friends
visit him.
3.
4.
Time of the day you
order food online the
most? - Mostly
evenings after school or
twice on weekends.
Expect from an online
food ordering portal? Better apps for phone
and tabs, lot of variety
and good quantity.
Difficulties faced by you
when ordering food
online?- None
Biggest concern while
ordering food online?Food taste when trying
a new restaurant,
would like to read few
reviews.
Scenarios
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.
Click on favorites and open the website that he frequently
visits, check for websites for offers and discounts.
Order food as per friends taste

20. Task
Analysis
A sample
task flow of
online book
store
http://www.uxmatters.com/mt/archives/2010/02/hierarchicaltask-analysis.php

21. Prototype
(Information
Architecture)
Affinity Building
Process to Design
Information
Architecture

22. Prototype
(Wireframe)
A Sample
Wireframe
Design of
Travel
Booking
website
Tools - http://mashable.com/2010/07/15/wireframing-tools/

23. Visual
Appearance
& branding
A Sample
Visual Design
of travel
booking
website
http://www.hongkiat.com/blog/web-design-trends-2014/
http://www.slideshare.net/goldengekko/mobile-apps-designtrends-2014

24. http://www.csschopper.com/blog/responsive-web-designconsider-6-points-while-designing-a-website
UI
Engineering
SWD - Scalable
Web Design OR
RWD Responsive Web
Design
HTML 5
CSS 3.0
JavaScript Library –
JQuery, AngloJS,
Bootstrap etc.
Flash/Flex
Web Font

25. http://uxdesign.smashingmagazine.com/2011/10/20/compreh
ensive-review-usability-user-experience-testing-tools/
http://www.usability.gov/how-to-and-tools/methods/usabilitytesting.html
Usability
Testing
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.
Focus Group Review
Heuristic Evaluation
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.
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.

26. UX 360 Degree View
Information
Architecture
Interaction
Design
Designing the
Experience
APIs
Architecting the
Technology 3
Content
2
User Touch
Points
Package
Solution
Creative
Thinking
Prototyping
Visual
Design (UI)
User
Research
Back-end
Testing
Usability
Branding
Platform
Total User
Experience
MultiLingual/
Localization
Animation
Business
Analysis
Total User
Experience
Defining the
Problem
1
Business
Intelligence
Requirement
Gathering
Java
Scripting
Front-end
Development
Delivering the
Experience
4
HTML
Evaluation
Research
Accessibility
Task
Analysis
Problem
Framing
Rich
Interface
Technology
CSS
Mobile &
Tablet

27. Web App – UX Design Case Study

28. Global Workforce Planning Tool
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

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

30. Global Workforce Planning - Before
• Very cluttered and
confusing design.
• No proper grouping of
the sections to make the
form simpler
• Input forms not userfriendly
• No search, filtering or
sorting
• Cognitive overload for
the new user and for
existing user very
cumbersome process to
work form
Resource Management Page

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

32. Global Workforce Planning– Wireframe
1
3
2
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,
3
Resource 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

33. Global Workforce Planning– New UI
Login
Group Model Selection

34. Global Workforce Planning– New UI
Resource
Management

35. Global Workforce Planning– StyleGuide
Navigation
Layout
Color Palette
Grid
Buttons
Fonts

36. Thanks
Zia Rahman
Consultant – UX Design
zia.rahman@gmail.com