Jennifer Nip, P.Eng Portfolio
Jennifer Nip Portfolio Jennifer has over 10 years experience in web design and usability analysis Being the Lead User Experience Designer, she has leading edge web design knowledge with emphasis on Usability, Web Accessibility and Strategic Branding Design. With hands on experience in creating multimedia process flows, wireframes and user interface design by using Visio, OmniGraffle, Axure, Photoshop, Illustrator, Dreamweaver, InDesign and other software technologies. PROFESSIONAL EXPERIENCE & WORK EXAMPLES 1 Usability (Page 3) 2 Web Accessibility (Page 12) 3 Branding Design (Page 18) 4 Mobile Design (Page 35) 1.1 What is Usability? 2.1 What is Web Accessibility? 3.1 Color Palette 4.1 Wireframes 1.2 Why Usability? 2.2 Why Accessibility? 3.2 Dropdown Menu 4.2 Mockups 1.3 How to improve Usability? 2.3 Implementation Plan 3.3 Product Banners 4.3 Icons 2.4 Reference 3.4 Page Layout 2013 2
Usability Best Practices
Usability 1.1 WHAT IS USABILITY? Usability refers to how well users can learn and use a product to achieve their goals and how satisfied they are with that process. METHODS FOR IMPROVING EASE-OF-USE LEARNABILITY Is it easy for users to learn basic tasks the first time? Would it increase training time? Is it meant for all users? Who are your target audience? EFFICIENCY & EFFECTIVENESS Can users perform the tasks quickly? Do they need to navigate to many different pages for one single task? MEMORABILITY Can users easily reestablish proficiency after a period of time of not using it? I have to remember 140 business rules and how this system works. REDUCE ERRORS Is it easy to make errors? Critical? Recoverable? I got an error at the end of the activation, and lost all the information I previously entered. SATISFACTION Is the web site pleasant to use? How about its look and feel? 4
Usability LEARNABILITY Is it easy for users to learn basic tasks the first time? Would it increase training time? Is it meant for all users? Who are your target audience? Let users know what happens if they click on a button or a link. For example, links or buttons should be self explanatory. If possible, we should provide information for the links/files to our users. LINKS/FILES INFORMATION Type: Slide? PDF? Excel? External Web Site? Size: How big is the file? Date: When was it created? ICON File Name [File Type, Size, Date] LearnUsability [PDF, 1.20MB, April 2012] 5
Usability EFFICIENCY & EFFECTIVENESS Processes with many steps increases processing times and potential errors. Every time we make changes to an existing flow, we should review the whole process to ensure it remains consistent and efficient. SITE RE-ENGINEERING If the site has been developed for a long time with many incremental updates over a period of time, its information may become unorganized, we could consider a site re-engineering. Example of a process of a web site contains 25 steps, and the information is unorganized. Home Screen Eligibility Check Customer Information & Method of Payment Equipment & Phone Number Selection Confirmation & Agreement After site re-engineering, the following items have been accomplished: Usability enhancement Re-organized the information and reduced the process down to 4 steps. Optimized the transaction down to 5 minutes Provided quick access links to important flows Introduced In Progress indicator to inform customer about the wait time. 6
Usability MEMORABILITY Can users easily reestablish proficiency after a period of time of not using it? I have to remember 140 business rules and how this system works. Usable systems minimize the amount that we need to memorize. This may involve displaying relevant information at appropriate points, providing comparison charts or providing flexible password options. QUICK TIPS BOX A Quick Tips information box could remind user of important steps in the site. The location of the box should be consistent. Below is an exmaple of a Quick Tips for phone activation process. QUICK TIPS Steps to complete phone activation: 1. Customer information (Name, Address) 2. Method of Payment 3. Equipment and Plan Selection 4. Phone Number Selection 5. Confirmation 7
Usability REDUCE ERRORS Is it easy to make errors? Critical? Recoverable? I got an error at the end of the activation, and lost all the information I previously entered. Users may forget steps involved in a process and miss certain important steps. We need to ensure the system has a mechanism to enforce steps sequence. SYSTEM ENFORCEMENT We can provide an error check in the system to ensure the input information is correct. This mechanism should be included with each group of information, not at the end of the whole process. Please enter a valid email in the format: abc@abc.com *Email: jen&jennnifernip.com *Mandatory field Let users know if a field is mandatory by putting an indicator, such as an asterisk (*), together with an annotation. 8
Usability SATISFACTION Is the web site pleasant to use? How about its look and feel? To ensure customer satisfaction, not only do we need to ensure a web site is easy to learn and use, memorable, and errorfree, it is also important to maintain a balance between functional elements and non-functional elements. A good web design does not necessarily include a lot of information or graphics; white space is also an important visual aspect of a page. A well designed web page should always consider the following elements: WEB DESIGN ELEMENTS PAGE SIZE The page layout or size of a web page usually determined by the average screen size of our site s visiters. For example, a commonly used page width is 980 pixels wide. As for length, normally it should be less than 2 pages long. PAGE LAYOUT Depends on the purpose of the page, it varies from 1 3 columns. PAGE TITLE Title should be displayed on all pages. USE OF COLOUR A single, consistently-used palette helps give a unified look and feel to the site while minimizing visual distractions. Do not use colour as the only means to distinguish items of information. All such information should be provided by at least one other method, such as shape, position or textual description. 9
Usability 1.2 WHY USABILITY? A highly usable web site offers benefits to both users and businesses. It has direct impact on online sales and success rate vs drop-off rate. THE IMPORTANCE OF MAKING WEB SITES USER-FRIENDLY GOAL We want to increase sales, promote the company brand, and ensure our site is presented professionally reflecting its actual abilities and capacities. One way of ensuring that a web site is usable is to follow a user-centered design process, where users are considered and involved in the process, and usability testing is carried out at many stages of the design process. USER CENTERED DESIGN User centered design is a process to ensure user centered activities can be included throughout the design and development process, from concept development to final testing and beyond into support and maintenance. User Centered Design involves three key aspects: 1. Know your audience 2. Designing for your audience 3. Involve your audience throughout the design process LOOK AND FEEL The look and feel could be enhanced by page size, layout, use of colour, icons and graphics. It should be based on the company brand, theme colour and primary colour such as black, grey, white, red. 10
Usability 1.3 HOW TO IMPROVE USABILITY? Involving the users throughout the design process is the key to improve usability. There are many ways that this can be done, from concept design to implementation and beyond. THE PROCESS OF USABILITY Listed below is the process of usability PLANNING Kick-off meetings start in the beginning to identify the users, the objective of the web site. ANALYSIS Gather requirements: customer needs vs business needs. SURVEY Review feedback from customers. DESIGN Design should be based on business requirements and customer feedback. USABILITY TEST Conduct usability test based on prototypes and mock-ups. The usability test identifies the key usability problems and collects quantitative measures of efficiency, effectiveness and satisfaction. REVISION Revise prototypes and mock-ups based on the feedback from the usability test. 11
Web Accessibility
Web Accessibility 2.1 WHAT IS WEB ACCESSIBILITY? Web technologies and standards are constantly evolving and Web accessibility plays a major role in making web sites more effective and inclusive. WEB ACCESSIBILITY Web accessibility means access to the Web by everyone, regardless of disability. Web Content Accessibility Guidelines (WCAG) 2.0 covers a wide range of recommendations for making web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, photosensitivity and combinations of these. Following these guidelines will also often make our Web content more usable to users in general. Web Accessibility includes: Usability & design for people with diverse abilities Best practices for Web content Device independence Search engine optimization (SEO) 67% of the population uses Internet in 2006 16% of the population with disabilities in 2006 13
Web Accessibility 2.2 WHY ACCESSIBILITY? Accessibility as a tool for social inclusion, not only for people with disabilities, it also includes others, such as older people, people in rural areas, and people in developing countries. THE IMPORTANCE OF WEB ACCESSIBILITY To provide equal opportunity to people with diverse abilities. The UN Convention recognizes access to information and communications technologies, including the Web, as a basic human right. The Ontario Regulation 191/11, ACCESSIBILITY FOR ONTARIANS WITH DISABILITIES ACT, requires web sites to conform to it by January 2014. ONTARIO REGULATION 191/11 ACCESSIBILITY FOR ONTARIANS WITH DISABILITIES ACT Section 14.2. Designated public sector organizations and large organizations shall make their internet websites and web content conform with the World Wide Web Consortium Web Content Accessibility Guidelines (WCAG) 2.0, initially at Level A and increasing to Level AA, and shall do so in accordance with the schedule set out in this section. Section 14.4 Designated public sector organizations and large organizations for their internet websites shall meet the requirements of this section in accordance with the following schedule: 1. By January 1, 2014, new internet websites and web content on those sites must conform with WCAG 2.0 Level A. 2. By January 1, 2021, all internet websites and web content must conform with WCAG 2.0 Level AA, other than, i. success criteria 1.2.4 Captions (Live), and ii. success criteria 1.2.5 Audio Descriptions (Pre-recorded). 14
Web Accessibility 2.3 IMPLEMENTATION PLAN The objective of this project is to ensure a high level of Web accessibility is applied uniformly across web sites in two years. IMPROVING WEB ACCESSIBILITY It is important to plan for implementation of accessibility. This page lists resources and planning processes. Actual implementation plans should be tailored to the organization s needs. STANDARD Web Accessibility Initiative (WAI) - http://www.w3.org/wai/ Web Content Accessibility Guidelines (WCAG) - http://www.w3.org/wai/intro/wcag.php MEASURING METHODS Initial Assessment and Conformance Evaluation On-going Evaluation On-Demand Evaluation TEAM RESOURCES Project manager: coordinate the project. Usability: communicate the goal, the importance, and the impacts. Marketing: impact to multiple media might affect marketing strategies. Web development: Assess and implement the changes to conform standard. Tech Lead: update new techniques for accessibility. Testing team: run and report evaluation tests. Representatives from key departments: form core committee to provide recommendations. SCHEDULE Q1 Q1 - Q4 Q1 - Second Year s Q2 Q4 - Second Year s Q2 Second Year s Q4 Info gathering, Communication Initial Assessment Implementation Conformance Evaluation On-going Evaluation 15
Web Accessibility 2.4 REFERENCE For more information, visit The World Wide Web Consortium (W3C) http://www.w3.org/ WCAG 2.0 QUICK LIST CONFORMANCE REQUIREMENTS 1.1 Text Alternatives: Provide text alternatives for any non-text content 1.2 Time-based Media: Provide alternatives for time-based media. 1.3 Adaptable: Create content that can be presented in different ways (ie simpler layout) without losing information or structure. 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background. 2.1 Keyboard Accessible: Make all functionality available from a keyboard. 2.2 Enough Time: Provide users enough time to read and use content. 2.3 Seizures: Do not design content in a way that is known to cause seizures, refer to flashing contents 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are. 3.1 Readable: Make text content readable and understandable. 3.2 Predictable: Make Web pages appear and operate in predictable ways. 3.3 Input Assistance: Help users avoid and correct mistakes. 4.1 Compatible: Maximize compatibility with current and future user agents, including assistive technologies. 16
Web Accessibility IMPROVING WEB ACCESSIBILITY CONFORMANCE REQUIREMENTS 1. Alternate versions web page satisfies all the Level A Success Criteria, or a conforming alternate version is provided. 2. Full pages Conformance (and conformance level) is for full Web page(s) only, and cannot be achieved if part of a Web page is excluded. 3. Complete processes When a Web page is one of a series of Web pages presenting a process, all Web pages in the process conform at the specified level or better. 4. Only Accessibility-Supported Ways of Using Technologies Provide accessibility support ways to any information or functionality that is not accessibility supported. 5. Non-Interference If technologies are used in a non-conforming ways or not accessibility-supported, then they do not block the ability of users to access the rest of the page. GUIDELINES AND TECHNIQUES 1. Web Content Accessibility Guidelines (WCAG) 2.0 http://www.w3.org/tr/wcag20/ 2. How to Meet WCAG 2.0 http://www.w3.org/wai/wcag20/quickref/ 3. Web accessibility evaluation tool http://www.w3.org/wai/er/tools/complete (Complete list) 17
Branding Design
Branding Design BACKGROUND COLOUR PALETTE COLOR PALETTE A single, consistently-used palette helps give a unified look and feel to the site while minimizing visual distractions. Do not use color as the only means to distinguish items of information. All such information should be provided by at least one other method, such as shape, position or textual description. HEX FFFFFF FCFCFC F2F2F2 E5E5E5 CCCCCC E2D21E RGB 255, 255, 255 252, 252, 252 242, 242, 242 229, 229, 229 204, 204, 204 255, 240, 0 USE Page Table Navigation Table Header Divider Highlight FONT COLOUR PALETTE HEX 000000 333333 777777 0A9AEC 330033 CC0000 RGB 0, 0, 0 51, 51, 51 119, 119, 119 10, 154, 236 51, 0, 51 204, 0, 0 USE Body Fonts Instrustional Message Secondary Message Unvisited Links Visited Links Error Messages 19
Branding Design DROPDOWN MENU The drop-down menus used in the main navigation. These menus contain the list of links related to the line of business as well as promotions (text and image). 20
Branding Design PRODUCT BANNERS A product banner is used to promote products and services offered. The top panel web banner is the first thing a user sees when they go to a web site. Banners should be reflective of the brand. They should be a blending of the corporate colors, fonts, content that is attractive, informative, comfortable for the eye and encourages the user to click on the banner. 21
Branding Design PRODUCT BANNERS 22
Branding Design PRODUCT BANNERS 23
Branding Design PRODUCT BANNERS 24
Branding Design PRODUCT BANNERS 25
Branding Design 26
Branding Design PAGE LAYOUT Layout templates have been created for specific types of content. These layout are the starting point of the site design. Each template serves a specific purpose focusing on the needs of the user, the structure of the content and the purpose of the message. Depending on the function and the content, stakeholders will be able to select the appropriate templates. This ensures a consistent and improved user experience, as well as reduces the turnaround time for delivery. 27
Branding Design PAGE LAYOUT 28
Branding Design PAGE LAYOUT 29
Branding Design PAGE LAYOUT 30
Branding Design PAGE LAYOUT 31
Branding Design PAGE LAYOUT 32
Branding Design PAGE LAYOUT 33
Branding Design PAGE LAYOUT 34
Mobile Design
Mobile Design WIREFRAMESM 36
Mobile Design MOCKUPS 37
Mobile Design ICONS 38
Mobile Design ICONS 39
Jennifer Nip Portfoilo Thank you. jnip@jnip.com 416.704.2941