UX Overview_ZiaRahman

50 %
50 %
Information about UX Overview_ZiaRahman

Published on February 16, 2014

Author: ZiaRa

Source: slideshare.net

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/services) • The process and the inter dependencies • The technology and it’s limitations

UX Vision Technology

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

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)

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

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

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/wireframing-tools/

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

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

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.

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

Web App – UX Design Case Study

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

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

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

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

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014


Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...