Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
What to Upload to SlideShare
Loading in …3
×
1 of 36

Joel Baskin UX Design and Artifacts

1

Share

Download to read offline

Descriptions of UX Design projects and the design thinking behind them. The foundational work includes personas, task analysis, user stories, user goals, and problem statements. Later steps include wireframing, mockups and prototypes constructed in tools like Axure, Balsamiq, Sketch. or Figma. User Research and Usability test reports appear in several projects.

Related Books

Free with a 30 day trial from Scribd

See all

Joel Baskin UX Design and Artifacts

  1. 1. JOEL BASKIN UX DESIGN ARTIFACTS AND PROCESS DIGITAL PORTFOLIO IS AT JDBASKIN.WIXSITE.COM/PORTFOLIO 425-766-3947 jdbaskin@hotmail.com Education Experience Research Design Process
  2. 2. Education  Carnegie Mellon (HCII) – Masters of HCI  Hybrid program of Design, Psychology, and Computer Science  With added coursework in the Software Engineering Institute (SEI) covering software engineering and project management  Masters Project – Digital photo album hosted on Tablet PC  Utilized handheld form-factor with stylus input  Optimized tasks for labeling, recall, and display  Included controls for rotation, cropping, and brightness control  I conducted user testing with over 100 people from around the world – with zero budget  Independent Study Project  Presented paper at CHI Comparison of Cognitive Models (GOMS and KLM) Link to abstract  Each type of cognitive model predicts different total time for the same task – why do they not match and how is this useful?  KLM models serial processing and predicts novice use/start of the learning curve  GOMS models parallel processing and predicts expert use/plateau of learning curve  Cornell University – BA in Physics Education Experience Research Design Process
  3. 3. Recent Work Experience  AMPSIGHT  Sr. UX Designer to extend the interaction model and UX design of a POC to demonstrate the project’s usability and desirability.  INRIX  Sr. Product Designer on app for literally mapping road rules by transportation authorities and municipalities and consumed by manufacturers of autonomous vehicles  Capital One  Identified feature gaps from user signal and mapped solutions to technical services in order to project product roadmap up to 6-24 months  Microsoft Azure  Improved efficiency and usability of dashboard used by Azure Support  Ericcson/T-Mobile  UX Architect for primary T-Mobile service inspection tool  Microsoft Store  Designed visual and interaction UX for industrial-strength web builder  PlayNetwork  Defined requirements and prototyped internal web and iOS apps  zulily  Design decreased time on task over 50% for internal app Education Experience Research Design Process
  4. 4. Work Samples  AMPSIGHT Page 5-6  INRIX Page 7-9  Capital One Page 10-11  Microsoft Store Page 12  PlayNetwork Pages 13-16  View full case study at https://www.slideshare.net/jbaskin/playnetwork-design-process-and-artifacts  All Star Directories Pages 17-19  Vertafore Pages 20-21  Verdiem Pages 22-23  Isilon Page 24  Microsoft Security Group Pages 25-33  Lotus/IBM Pages 34-35 Education Experience Research Design Process
  5. 5. AMPSIGHT  Problem statement  AMPSIGHT is building a Cloud Migration Assessment tool to support their consulting engagements with US Government agencies needing to migrate their systems  Users and form factors  AMPSIGHT consultants will construct, deploy, and complete the assessments, then review the analytics with the clients and AMPSIGHT technical teams  Clients will answer assessments questions, review progress, and evaluate assessment results  My role  Worked remote with team located around the Washington, DC, office, most work remote  Working from a POC that was not accepted by the client, my job was to quickly improve the usability and visual design for a MVP candidate that would be acceptable  Structured design process and reviews for company with no design professionals  Responsible for user model and logic, interaction design, and visual layout  Methods and tools  Created personas and scenario documents to focus requirements and success criteria  Produced storyboards, task flows, mockups using Figma  Reviewed designs twice weekly with Dev Lead and SME, and daily with CEO/Product Owner Education Experience Research Design Process
  6. 6. AMPSIGHT Education Experience Research Design Process Defining Dashboard Requirements Application Frame and List Page
  7. 7. INRIX  Problem statement  Enable transportation authorities and municipalities to authoritatively enter their local road rules quickly and efficiently to encourage accuracy, completeness, and responsiveness.  Users and form factors  Novice to expert skills and familiarity with road rules, including office workers (interns, contractors, salaried clerks) and transportation experts in government agencies  Web-based app for desktops with limited use on handheld tablets in the field  My role  Seated in head office with executive team in Kirkland. Worked with dispersed team based in Los Angeles, DC, and Israel  Structured design process and reviews for company with no design professionals  Responsible for user model and logic, interaction design, and initial visual layout  Methods and tools  Interviewed users of the POC to learn tasks, constraints and considerations  Conducted competitive analysis of map-based apps and methods  Produced storyboards, task flows, mockups and prototypes using Sketch and InVision  Spec’ed interactions and interdependencies of front-end elements  Built cadence of twice-weekly UX reviews and weekly 1x1 reviews with key stakeholders Education Experience Research Design Process
  8. 8. INRIX Education Experience Research Design Process Wireframing to refine complex graphical interactions Placing Speed Restrictions Quickly Defining visual standards for lists Early View of Roadway Details
  9. 9. INRIX Education Experience Research Design Process 1) Defining a region on a map 2) Grap and place corner 3) Handle appears midsection 4) Grab and place midsection
  10. 10. Capital One  Problem statement  Encourage and educate bank customers to improve their financial health by paying down debt and increasing emergency savings using behavior economic theories  Users and form factors  26-40 year old customers with debt and little savings that use mobile banking apps  Mobile app (iOS and Android)  My role  Establish compliance process for cutting edge product in a highly regulated industry.  Identified and seeded features for consideration on 6-18 month roadmap  Quickly spec and design supporting non-golden path features, including User Assistance, Feedback  Methods and tools  Reviewed previous compliance efforts, identified and contacted compliance stakeholders in several divisions for the corporation, and organized and conducted information sharing sessions that established an improved and speedy review process  Methods for future feature work enumerated on next slide  Mockups created in Sketch and prototypes in InVision Education Experience Research Design Process
  11. 11. Capital One  Future Feature Work  Combed user research transcripts and analysis for user problems and pain points, improvised tools, and missing tools that users said would help them track their spending and saving  Ideated solutions and feature sets that could address them  Mapped proposed features to new and existing technical services to leverage efficiencies and extensibility and estimate cost Education Experience Research Design Process
  12. 12. Microsoft Store  Lead designer on web-builder app to be used to construct all Microsoft consumer web properties  Think of an industrial-strength Wix  Internal app not released to public Education Experience Research Design Process
  13. 13. PlayNetwork  Designed and prototyped Device Management Dashboard  View “Design Process and Artifacts” at SlideShare.net/jbaskin  Interactive prototype in Axure (demo on request) Education Experience Research Design Process
  14. 14. PlayNetwork  Designed and prototyped mobile Music Player/Device Controller  Created an interactive prototype in Axure Education Experience Research Design Process
  15. 15. PlayNetwork  Designed and prototyped mobile Devise Provisioning Manager  Created an interactive prototype in PowerPoint  View prototype screens at Slideshare.net/jbaskin Education Experience Research Design Process
  16. 16. PlayNetwork  Designed Music Curation web app prototyped in Balsamic  Walk-thru at www.slideshare.net/jbaskin/brand-programming Education Experience Research Design Process
  17. 17. All Star Directories  Navigation and site map highlighting user paths to conversion Education Experience Research Design Process
  18. 18. All Star Directories  Redesigned core funnel page Education Experience Research Design Process
  19. 19. Microsoft Robotics  Designed for self-navigation communication device  Designed and user tested menu system for gesture and voice control  Customer experience diagram of purchase-to- setup scenarios and opportunities to delight Education Experience Research Design Process
  20. 20. Vertafore Identity Manager  Wireframe of pages and navigation flow for 3 user roles (Visio) Education Experience Research Design Process
  21. 21. Vertafore Identity Manager  Interactive wireframe used for user testing (constructed using iPlotz)  Full prototype at https://www.slideshare.net/jbaskin/vertafore-identity-manager Education Experience Research Design Process
  22. 22. Verdiem Surveyor 6.0  Wireframes demonstrating current and future releases (Visio)  Full-size images at https://www.slideshare.net/jbaskin/verdiem-ui- map-8-18 Education Experience Research Design Process
  23. 23. Verdiem Surveyor 6.0  High Fidelity Mockups branded for Verdiem and Cisco Education Experience Research Design Process
  24. 24. Isilon Admin Console  Clean, easy to read and understand, pleasing  Standardized CSS for improved consistency and ease of implementation Education Experience Research Design Process
  25. 25. Microsoft Forefront Client Security v2  Driving ‘critical visibility’ feature  Designing fully customizable dashboard  Designing reports across 8 protection technologies and 3 feature teams  Navigation uses contextual links within charts for drilling into data Education Experience Research Design Process
  26. 26. Microsoft Forefront Client Security v2  Using affinity diagrams to create personas and scenarios Education Experience Research Design Process
  27. 27. Microsoft Forefront Client Security v2  Socializing the design within the team Education Experience Research Design Process
  28. 28. Microsoft Forefront Client Security v1  As UX PM  Drove UX team to RTM and Ship  As User Researcher  Designed tests  Scheduled sessions  Ran sessions  Reported results  Pushed changes into product Education Experience Research Design Process
  29. 29. Microsoft Forefront Client Security v1  Communicating changes across milestones Education Experience Research Design Process
  30. 30. Microsoft Forefront Client Security v1  Presenting estimates and defending features Education Experience Research Design Process
  31. 31. Teaching at Microsoft  For Premier Partners (quoted by attendee at conference 8 years later)  For internal dev teams Education Experience Research Design Process
  32. 32. Firewall Control Panel  Before  Cannot easily diagnose problems  Cannot change settings easily nor predict final state  After  Common tasks are presented first  Important information presented on opening page Education Experience Research Design Process
  33. 33. Windows Firewall Control Panel  Information architecture  Flow diagrams  UI Maps Education Experience Research Design Process
  34. 34. Lotus Notes Mail  Designed new toolbars framework for client  Dockable  Auto-Resizing  Drag and drop customization  Designed pioneering email and chat integration  Other features  Quickrules for folders (later copied in Outlook)  Folder indicators for new mail in child folders (usability problem in Outlook)  Blacklisting of spam Education Experience Research Design Process
  35. 35. Lotus Notes Chat Integration  Active names in emails are fully editable  Full range of IM options are presented in multiple contexts  IM action button on far left to avoids buttons changing positions when IM is not active  IM incorporated into meeting requests Education Experience Research Design Process
  36. 36. Joel Baskin For more information  jdbaskin@hotmail.com  425.766.3947 Education Experience Research Design Process

×