UX Process Document
1 like797 views
Joe Jancsics is a user experience designer who believes in collaborative design processes like prototyping and participatory design to create great experiences; he describes methods for gaining empathy for users, facilitating groups, rapid prototyping, and storyboarding; the document also outlines a study on vehicle mode attributes and templates for design deliverables like vision documents, click-through prototypes, and wireframes.
UX Process Document
- 1. Joe Jancsics | User Experience Designer
- 2. Design Process | Worldview Collaboration and prototyping are the foundations for designing great experiences.
- 3. Design Process | Methods Gain Awareness & Empathy for the User Activities Environments Interactions Objects Users
- 4. Design Process | Methods Leadership & Facilitation of Collaborative Groups • Hosted the 2013 KC Service Jam • Importance of diverse thinking types Capture the best ideas
- 5. Vehicle Mode Attributes Study Date: September 24th 2014 Owner: Joseph Jancsics Stakeholders: Kip Dondlinger, (need to find out) Usability Research Questions What attributes does a user find most important for vehicle mode? What attributes are least desirable? Can we identify features that have not been considered yet? Participant Requirements Familiar with concept of “Vehicle Mode” Some experience owning a (preferably newer) vehicle Preliminary conversation about car maintenance knowledge Design of Usability Evaluation Each participant will be presented with Attribute Cards and an Importance Scale (Fig. 1). Each card will show a unique feature/attribute, which may or may not be suitable for “Vehicle Mode” experience. The user will then sort, or place, the cards on the Importance Scale in one of the following categories: Must have; Nice to have; Sounds Interesting/Cool; Don’t Care (Indifferent); Don’t need/want. Figure 1. Attribute Importance Test (based on Kano Model Analysis 1 ) For each card placed the participant may be asked questions: Why did you place ‘X’ attribute there? How would you see ‘X’ feature being used? (probe for use case) Wild Cards (I.e., blank) will be provided for participants to write/suggest their own features for the exercise. Participants will be asked to ‘think-aloud’ while completing the exercise. Required Resources Paper printouts (Attribute Cards & Importance Scale) Paper and pen to take notes Timeline & Deliverables Running Study – Week of Oct. 6 th Preparing Findings report – Week of Oct. 20th 1 http://www.mindtools.com/pages/article/newCT_97.htm Design Process | Methods Participatory Design • Extract information Requirements gathering • Document results • Integrate into the experience
- 6. Design Process | Methods Rapid Prototyping • Make mistakes early Identify weak designs • Get them out of the way! To produce strong designs
- 7. Design Process | Methods Paper Prototypes • Iteration towards the best solution • Constraint of time & budget Results prove value added
- 8. Design Process | Methods 9000 HomeScreen Storyboarding 3 By pressing on the preview display Gary is able to view the combination in full- screen mode. The end Layout Current Layout Fishing Docking Cruising Water Sports Devices Layouts Settings Info SOS Storyboarding • Stories convey ideas Illustrates multiple interactions • Conclude with a goal As the user would 9000 HomeScreen Storyboarding 2 After adding the chart he takes a moment to position and resize it. After positioning the chart he decides to add a radar. Following a similar process to adding a chart, Gary is able to add a radar and see options for initial positioning. Not yet fully satisfied with the layout, Gary decides to add some numbers. By selecting “numbers” from the home- screen the new options appear. Using the numbers tools Gary is able to add and position his numbers to work best with the new layout. Chart Radar Sonar Gauges Video NumbersDone Chart Chart LAYOUTS Drag & Drop Save as... Layout Navigation 3d Perspective Fishing Fish Eye NumbersDone CHART Select Type Save as... Layout NumbersDone Chart Radar Sonar Gauges Video Radar NumbersDone Harbor Offshore Dual Range Sentry Radar Overlay RADAR Select Type Save as... Layout Layout NUMBERS Drag & Drop Done Custom Horizontal Vertical Corners Advisor Layout NUMBERS Drag & Drop Done Custom Horizontal Vertical Corners Advisor LAYOUTS Drag & Drop Data B 00Data B 00 Data B 00 Data B 00 Engine Data Colors Data D 00 Data D 00 Data D 00 Data D 00 Save as... Layout 9000 HomeScreen Storyboarding 1 Gary is viewing the chart. He then wants to change to sonar, so heopens the homescreen menu. From there he presses the sonar icon onthe left. The homescreen closes and he takes a Chart Radar Sonar Gauges Video Settings Info Devices Layouts SOS Layout Chart Radar Sonar Gauges Video Settings Info Devices Layouts SOS Layout Chart Radar Sonar Gauges Video NumbersDone LAYOUTS Drag & Drop Save as... Layout Chart Radar Sonar Gauges Video Settings Info Devices Layouts SOS Layout
- 9. Design Process | Deliverables Deliverables are tailored to project needs and audience, using the best method(s) to communicate the vision.
- 10. Design Process | Deliverables Vision Documents • Best for long-term projects Early stages, high level • Identifies & communicates design goals Discovery involves input from subject matter experts • Illustrates conceptual models & system architecture 2 Garmin HomePort GOAL More Intuitive Chart Interactions *Graphics are not final | For example only Confidential Garmin International, Inc. Software User Experience Design pg. 23 Vision Chart Interactions chart Waypoints Routes Tracks File Edit View HelpFile Edit View HelpFile Edit View Help Search Drawings Chart Tools Planning Tools (A) N 31.63021° W080.37992° 0.36mi M286° Waypoint 1 Route 001 to 009 Type Name Date Added Notes Data 1/16/2013 1/15/2013 Waypoint 2 Route 010 to 015 1/15/2013 1/03/2013 Select View: All Send to GPSMAP8012 Planning Tools (B) View Controls Planning Data Planning Tool & Data Options Click Here... (e.g;”add waypoint”)Off-chart mouse is a standard pointer *Graphics are not final | For example only Confidential Garmin International, Inc. Software User Experience Design pg. 62 garmin.com user boat(system) HomePort User Input Existing Communication Future Communication BlueChart Mobile
- 11. Design Process | Deliverables Click-through Documents • Best for rapid implementation New features or software updates • Captures & communicates a prototype or idea • Each page shows an interaction 14 Garmin Marine User Experience Confidential & for internal use only Auto Guidance Design NextPrev Auto Guidance InfoWaypoints<...> SOSMarkMenuHome ! ! ! ! Cancel Done Touch path to add points, press & drag to reposition. Auto Guidance InfoWaypoints<...> SOSMarkMenuHome ! ! Cancel Start Navigation Adjust Path Hazard Review ! ! Auto Guidance InfoWaypoints<...> SOSMarkMenuHome ! ! ! ! Cancel Done Touch path to add points, press & drag to reposition. 15 Garmin Marine User Experience Confidential & for internal use only Auto Guidance Design NextPrev Auto Guidance InfoWaypoints<...> SOSMarkMenuHome Calculating... Cancel Auto Guidance InfoWaypoints<...> SOSMarkMenuHome ! ! ! ! Cancel Done Touch path to add points, press & drag to reposition. Auto Guidance InfoWaypoints<...> SOSMarkMenuHome ! ! ! ! Cancel Done Touch path to add points, press & drag to reposition.
- 12. Design Process | Deliverables Wire-frame Documentation • Best for detailed designs New products or innovations • Provides entire use cases on each page • Notes in margins detail requirements UX Requirements EGarmin International, Inc. | User Experience GroupConfidential Virb Control Bar Description Overview | Virb Control Bar InfoWaypoints<...> SOSMarkMenuSettingsHome Virb <NAME> 53% Standby REC 12min Virb <NAME> 53% Standby REC 12min A B Name of Virb: This will show a name for the detected Virb device. If more than one are connected there will be arrows on each side of the name to toggle. Battery Life: Will show remaining battery life for detected/selected Virb. Name of Virb Virb 1 Models Base Elite Battery Life Storage Space Information Function ANT A B C D E F G Photo Button Record Video Button Status Expand C D E F G Storage Space: Will show approximate remaining storage space (in minutes) available on detected/selected Virb. Photo Button: this can be used anytime, even while recording. Record Video Button: toggles on/ off of recording function. Pressing will perform function, user does not need to 'slide' or 'swipe' it. Status: This area will display the mode of camera operation. While recording it will show a red light with a time-count to indicate current recording length. Expand: This button allows a user to quickly have a full-screen controller and access the Virb menu. Return to Contents Confidential Garmin International, Inc. | User Experience Group UX Requirements 9 Adding a Virb Virtual Device to a Combo Figure 1-6: Existing 8xxx Procedure a. User can go through existing process to create a combo (split-screen). CHARTS Done InfoWaypoints<...> SOSMarkMenuSettingsHome 1 2 Functions 2 Overlays 1. Nav Chart 2. Choose Function Name Charts Split Vert CHARTS Back InfoWaypoints<...> SOSMarkMenuSettingsHome 1 2 Charts Radar Overlay Sonar Graphs Gauges Video 4.0 Virb Virtual Device | Adding to Combo 4 21 5 3 6 7 InfoWaypoints<...> SOSMarkMenuSettingsHome Menu Chart Menu Edit Combo Back InfoWaypoints<...> SOSMarkMenuSettingsHome CHARTS Functions 1 Overlays 1. Nav Chart Name Charts Done InfoWaypoints<...> SOSMarkMenuSettingsHome 1 Press 2 Press Edit Combo Press Menu Press Choose Function Press Video Press Done Press Back Press Back Press Back Press Back Press Functions Go to Next Page CHARTS 2 3 4 1 Back InfoWaypoints<...> SOSMarkMenuSettingsHome 1 *Note: In this illustration the Virb Virtual Device is located within 'Video', which is inconsistent with the home screen behavior. We are still investigating what makes the most sense for the placement of the Virb Virtual Device. * Return to Contents
- 13. Design Process | Deliverables Animations • Used when motion plays a critical role in the experience
- 14. Design Process | Deliverables Scenario Videos • To introduce a new feature
- 15. Design Process | Deliverables Interactive Prototypes • Using Axure Output is HTML Launch Prototype A Launch Prototype B