Andrew Hill USER EXPERIENCE DESIGN PORTFOLIO

Transcription

1 Andrew Hill USER EXPERIENCE DESIGN PORTFOLIO

2 Projects Medical Device Call Center & Field Service Management Desktop & Mobile Apps (Siebel Open UI, ios) User Shadowing & Ethnographic Research Observation Findings Report Wireframe & Visual Design Mobile Recommendations Quota Planning and Sales Compensation Web App (HTML5,.NET, Oracle) Information Architecture User Experience Guidelines Agile User Stories UX Strategy Wireframe & Visual Design HTML Prototypes Usability Metrics Social Business Maturity Ipad App (HTML5 - Phonegap) Wireframe & Visual Design SAP Trade Promotion Management Ipad App (Native) Wireframe & Visual Design Andrew Hill Portfolio. Page 2

3 Projects Sales Force Automation CRM Desktop App (Adobe Flex, SAP) User Research & Personas Wireframe & Visual Design Agile User Stories Rapid Prototyping

4 Medical Device Call Center & Field Service Management Desktop & Mobile Apps (Siebel Open UI, ios) THE ISSUE Client - Global Consumer Health & Medical Device/Diagnostics The client spent nearly two years developing custom call center and field service management applications using Siebel s Open UI (HTML5/JavaScript) framework. Three months before roll-out, lead stakeholders raised concerns about usability, fearing that the applications fell short of their primary usability goal - Easy enough for a six year old to use. A thorough user research and discovery process had not been followed; hence, the client wanted to ensure the solution was both functional and intuitive. ACTIVITIES Lead UX Researcher/Designer (team of 4) Performed a comprehensive heuristic analysis Collaborated with project manager to organize field observations of call center representatives, product investigators, and field service engineers in California, Pennsylvania, and New Jersey Developed observation findings report and design recommendations Created design backlog with quick-win, blue sky, and future-state (mobile) design recommendations Designed wireframes and collaborated with studio designer to develop visual designs HEURISTIC ANALYSIS Andrew Hill Portfolio. Page 4

5 Medical Device Call Center & Field Service Management Desktop & Mobile Apps (Siebel Open UI, ios) FINDINGS REPORT Andrew Hill Portfolio. Page 5

6 Medical Device Call Center & Field Service Management Desktop & Mobile Apps (Siebel Open UI, ios) BE WIREFRAMES FO RE BE FO RE Presentation and order of data fields not aligned to call center incoming call flow Finding contextual information to verify caller account & device information scattered and difficult to find Unviewed data fields displayed at same level as fields necessary to to complete tasks Data grids required required horizontal scrolling and did not offer robust search, filtering, sorting options R TE AF AF TE R Simplified Initiation Dashboard - removed data grids by flattening design and only presenting information necessary to quickly create a new customer inquiry, complaint, or service request Redesigned complaint management screen positions contextual information in an easily accessible area and prioritizes fields necessary to complete while customer on call Removed multitude of tabs, previously requiring users to to navigate around application to find/enter information - All necessary information accessible on one scrollable screen Andrew Hill Portfolio. Page 6

7 Medical Device Call Center & Field Service Management Desktop & Mobile Apps (Siebel Open UI, ios) VISUAL DESIGNS Andrew Hill Portfolio. Page 7

8 Quota Planning and Sales Compensation Web App (HTML5,.NET, Oracle) Client - Leading PC Manufacturer Sales reps viewed the company s sales compensation as being complex and slow. They were frustrated by sales letter timeliness, crediting speed, and quality of performance reporting. Administrative users responsible for building sales incentive plans disliked having to use disparate applications, each with cumbersome and click intensive interfaces. Admins and sales reps needeed quicker and more accurate access to quota & compensation information in a centralized hub. Lead UX Designer (team of 3) Developed a comprehensive application map (IA), which mapped against user roles Designed wireframes* and end-state visuals based on business requirement documents & interviews with functional business owners and end user focus groups *Due to timeline restraints, low fidelity designs were primarily sketches/whiteboard designs Developed User Experience Guidelines, which provided design principles, design themes, visual design components & patterns, and HTML/CSS Framework development guidance Created usability metrics & usability test plan THE ISSUE ACTIVITIES Standardized error messages across application, using business language instead of technical jargon Created agile user stories and mapped to line-level requirements within scope catalog; stories served as input to each sprint cycle WIREFRAME WHITEBOARDING APPLICATION MAP Andrew Hill Portfolio. Page 8

9 Quota Planning and Sales Compensation Web App (HTML5,.NET, Oracle) VISUAL DESIGN BEFORE AFTER Lacked methodical flow to complete form Content heavy modal, requiring multiple scrollable regions No field prioritization or indication of mandatory fields Reduced complexity by breaking create form into steps Mandatory and pre-populated/de-active fields necessary to view for accurate input clearly indicated Improved field spacing, providing cleaner aesthetic design BEFORE Functionality to select Products was extremely click intensive No comprehensive search No easy way to quickly view product selections No quick-view for important product details AFTER Transformed product selection process into consumer-like shopping experience Added search functionality with auto suggestions Added product detail area - details shown by single clicking product in center grid Added dynamic product filtering in a collapsible section Andrew Hill Portfolio. Page 9

10 Quota Planning and Sales Compensation Web App (HTML5,.NET, Oracle) USER EXPERIENCE GUIDELINES Client was unfamiliar with UCD methodology and was often hesitant with proposed design recommendations. The UX Guideline provided functional reasoning behind design decisions via best practice rich internet application design principles, components, and patterns for business & IT stakeholders. Existing error messages consisted of IT jargon (often written by developers), hence was confusing and intrusive. I created a repository of over 200 error messages and mapped them to agile user stories. Additionally, the interaction design was created in such a way to prevent errors from occurring through contextual help like tooltips, information rollovers, and client-side validation. ERROR HANDLING Inline Errors Messages were primarily inline, reducing intrusive popups, unless absolutely necessary to interupt user flow. Confirmation Modal

11 Quota Planning and Sales Compensation Web App (HTML5,.NET, Oracle) USABILITY METRICS

12 SAP Trade Promotion Management Ipad App (Native) THE ISSUE Client - Deloitte Internal Deloitte sought to expand its SAP Mobility offering by developing an ios mobile app for trade promotion management that rivaled that of SAP. SAP s trade promotion management module lacked a pleasurable and intuitive user experience. Deloitte sought to develop a custom front-end application that sat on top of SAP s trade management module and provided a better experience for trade managers. Visual Designer Developed visual designs and style guide ACTIVITIES VISUAL DESIGNS Marketing Calendar SAP UI IPAD UI Trade Promotion Creation SAP UI IPAD UI

13 SAP Trade Promotion Management Ipad App (Native) Trade Promotion Management Dashboard SAP UI IPAD UI

14 SOCIAL BUSINESS MATURITY - IPAD APP THE ISSUE Client - Deloitte Internal An internal Deloitte website was created to allow client executive teams to assess their company s social business capabilities. The assessment tool was used during workshops with participants and during trade shows in company booths. Deloitte sought a mobile version of the tool that could be used offline, and had a hard deadline of five weeks for design and development. We had no access to end users for research & discovery or to better understand pain points in using the web application. No requirements documentation existed. Lead UX Designer (team of 3) ACTIVITIES Created requirements catalog and use cases based on existing web application & interviews with project leadership Developed creative vision and wireframes for ipad application Led team of 3 designers to create visual designs and an asset library (ipad & ipad retina libraries) Created design annotations for developer handoff WIREFRAME SKETCHES The annotated sketches were used to explain interaction to our stakeholder, gather feedback, and iterate. These wireframes provided high level validation of application requirements, enabling quick buy-in before moving into visual design. Andrew Hill Portfolio. Page 14

15 SOCIAL BUSINESS MATURITY - IPAD APP VISUAL DESIGNS W UI P AP AD IP EB AD IP UI ASSET LIBRARY I created a vector asset library using Adobe Fireworks for all of the visual design components necessary for development. The library provided developers direct reference images in their CSS, eliminating the need to recreate or resize images. Even if images had to be resized, I taught the development team how this can be done dynamically within Fireworks, without sacrificing image quality. This dramatically reduced time usually needed to manage design assets, and allowed the development team to focus on functionality rather than design. Andrew Hill Portfolio. Page 15

16 SALES FORCE AUTOMATION CRM - DESKTOP APPLICATION Client - Leading Semiconductor Chip Maker Client had mixed success at implementing sales management applications on top of existing legacy systems. The adoption, usage, and satisfaction, of the sales force in using the applications had been low, confirmed in usability studies by the clients Human Factors Engineering team. Sales employees lacked basic access to CRM tools to help them manage their activities, daily tasks, contacts & collaboration with other users. They used multiple systems to manage leads, opportunities, accounts, product samples, product issues, etc. Users resorted to ad-hoc tools like Outlook, Excel, and PowerPoint to manage many of their daily tasks; knowledge about contacts, accounts, leads, and opportunities, gets stuck on local machines and isn t shared efficiently. UX Designer (team of 4) Perform user interviews Provide inputs for user personas/stories (daily tasks, pain points, system usage, etc.) Developed agile user stories Worked with functional SAP resource to manage requirements and functional spec creation across opportunity, product, and issue management modules Created wireframes, visual designs, and HTML prototypes USER RESEARCH 1 2 THE ISSUE ACTIVITES Interviews revealed that most employees were using Outlook, PowerPoint, and Excel for daily tasks. Interviews also revealed most day to day communication happened via phone calls/ s (little tracking), and users accessing on average 4+ applications per day. Scripts were prepared for conducting user interviews respective to each user role 3 Supported off site group to develop personas and user stories REQUIREMENTS/AGILE STORIES I translated over 200 use cases into system requirements. Agile user stories were then developed using 1 or more requirements. Andrew Hill Portfolio. Page 16

17 SALES FORCE AUTOMATION CRM - DESKTOP APPLICATION WIREFRAMES Created over 300 wireframes across Opportunity, Product, and Issue Management components of the application. Wireframes were used to present application functionality to business stakeholders for sign off. Wireframes were also used in Functional specs to describe UI interaction to developers. VISUAL DESIGN Visual designs for the application were created by a visual designer for release 1. For release 2, I created new visual designs using UX guidelines and a standard asset library. I created over 150 were created for release 2. Another designer and I created rapid HTML prototypes for weekly reviews with business stakeholders during design for release 2. The clickable prototypes were generated with Adobe Fireworks and provided better understanding of interactions requested by the business to provide sign off on design. CLICKABLE PROTOTYPES Visual Cues to guide user through prototype Andrew Hill Portfolio. Page 17