0
User Experience Design
By 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
Frustration
Annoyed Customer
Negative perception

Loss to Business
Why should we care about UX?
Build Brand Loyalty
It’s a Good Business Sense
The Misconception
UX is Good User Interface

UX is just about Usability
UX is just about the User
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

Requires a
right balance

Users Goals
How do we create
great experiences?
Think about….
•

The company and the
business need

•

The competition in market

•

The people (users of the
product/serv...
UX Vision

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

Market
Study

Bu...
Information Architecture - Focuses on
organizing, structuring, and labeling content in
an effective and sustainable way.
I...
User Goals
Good quality food

Personas

A quick and painless online
ordering of food
1.

Expectation While Ordering Online...
Task
Analysis

A sample
task flow of
online book
store

http://www.uxmatters.com/mt/archives/2010/02/hierarchicaltask-anal...
Prototype
(Information
Architecture)

Affinity Building
Process to Design
Information
Architecture
Prototype
(Wireframe)

A Sample
Wireframe
Design of
Travel
Booking
website
Tools - http://mashable.com/2010/07/15/wirefram...
Visual
Appearance
& branding

A Sample
Visual Design
of travel
booking
website

http://www.hongkiat.com/blog/web-design-tr...
http://www.csschopper.com/blog/responsive-web-designconsider-6-points-while-designing-a-website
UI
Engineering

SWD - Scal...
http://uxdesign.smashingmagazine.com/2011/10/20/compreh
ensive-review-usability-user-experience-testing-tools/
http://www....
UX 360 Degree View
Information
Architecture

Interaction
Design

Designing the
Experience

APIs

Architecting the
Technolo...
Web App – UX Design Case Study
Global Workforce Planning Tool
Evaluation of Staffing Needs
Workforce Planning tool provides a solid Data Foundation and R...
Global Workforce Planning - Before
• Homepage not well
structured; does not give
useful information upfront
• Navigation n...
Global Workforce Planning - Before
• Very cluttered and
confusing design.
• No proper grouping of
the sections to make the...
What we did & how
•

Interaction with business users

•

User interviews and questionnaires

•

Information Architecture &...
Global Workforce Planning– Wireframe
1

3

2
1

Login Page – A neat a balance design layout

2

Landing Page to select Mod...
Global Workforce Planning– New UI

Login

Group Model Selection
Global Workforce Planning– New UI

Resource
Management
Global Workforce Planning– StyleGuide
Navigation

Layout

Color Palette

Grid

Buttons

Fonts
Thanks
Zia Rahman
Consultant – UX Design
zia.rahman@gmail.com
UX Overview_ZiaRahman
Upcoming SlideShare
Loading in...5
×

UX Overview_ZiaRahman

1,050

Published on

Published in: Design
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
1,050
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "UX Overview_ZiaRahman"

  1. 1. User Experience Design By Zia Rahman
  2. 2. Intro to User Experience Design
  3. 3. What is User Experience (UX) User Experience is a way a person feels about using a product, system or service
  4. 4. User person
  5. 5. Feelings People are emotional
  6. 6. Experience Using Something
  7. 7. Bad UX Frustration Annoyed Customer Negative perception Loss to Business
  8. 8. Why should we care about UX? Build Brand Loyalty It’s a Good Business Sense
  9. 9. The Misconception UX is Good User Interface UX is just about Usability UX is just about the User
  10. 10. So is UX about a Good User Interface? Certainly Not..
  11. 11. So is UX just about Usability? This would lead to destination This would be a fun trip to the destination
  12. 12. So is UX just about the User? Business Goals Requires a right balance Users Goals
  13. 13. How do we create great experiences?
  14. 14. 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
  15. 15. UX Vision Technology
  16. 16. 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
  17. 17. 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)
  18. 18. 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
  19. 19. Task Analysis A sample task flow of online book store http://www.uxmatters.com/mt/archives/2010/02/hierarchicaltask-analysis.php
  20. 20. Prototype (Information Architecture) Affinity Building Process to Design Information Architecture
  21. 21. Prototype (Wireframe) A Sample Wireframe Design of Travel Booking website Tools - http://mashable.com/2010/07/15/wireframing-tools/
  22. 22. 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
  23. 23. 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
  24. 24. 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.
  25. 25. 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
  26. 26. Web App – UX Design Case Study
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. Global Workforce Planning– New UI Login Group Model Selection
  33. 33. Global Workforce Planning– New UI Resource Management
  34. 34. Global Workforce Planning– StyleGuide Navigation Layout Color Palette Grid Buttons Fonts
  35. 35. Thanks Zia Rahman Consultant – UX Design zia.rahman@gmail.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×