Regular Joe Consulting LLC. Duplication, reproduction or disclosure of information is this document without the express written permission of Regular Joe Consulting is prohibited. Enjoy the work. We hope you find it useful. Detailed Design Preserving the UX from concept through delivery UX Australia ’11 Joe Sokohl @mojoguzzi @RegJoeConsults Friday, September 2, 2011
it? Where does it break down? Why? Break What are some solutions? How do we work within our projects? Break How does Agile fit in? Open discussion, Q&A 3 Friday, September 2, 2011
Independent UXers § Highly regulated areas: healthcare, government, military § Anyone working with distributed teams (including cross-border, multiple time zone teams) 6 Friday, September 2, 2011
Heterogenous teams § UXers who also do the front-end development of their apps § Co-located, nimble teams who don’t have a need to retrace steps § Teams in which no one dies, no one leaves, and no new people come on board 7 Friday, September 2, 2011
Heterogenous teams § UXers who also do the front-end development of their apps § Co-located, nimble teams who don’t have a need to retrace steps § Teams in which no one dies, no one leaves, and no new people come on board 7 Then again.... Friday, September 2, 2011
competitive reviews, heuristic analysis, mental models/affinity diagrams, and personas § User/task matrixes § Hi-level wireframes § Concept models § Card sorts § And on and on and on... 11 Friday, September 2, 2011
competitive reviews, heuristic analysis, mental models/affinity diagrams, and personas § User/task matrixes § Hi-level wireframes § Concept models § Card sorts § And on and on and on... 11 Friday, September 2, 2011
at the wireframe. § You need to let the development team know how to realize this wireframe as a functioning Web-based experience. § In 10 minutes, identify what you think would be needed. If you run short of time, circle items on the page that you would communicate. § Think how you would do this. 12 Friday, September 2, 2011
Requirements § Requirements cannot be “gathered” § Requirements are not features § Requirements are not specifications § Specifications § “Effective documentation combines text and images to describe the anatomy and physiology of a product.” § “With a complete spec in hand, engineers should not have to make a single guess about the appearance or behavior of the product.” 16 Friday, September 2, 2011
Requirements § “Anything that drives design choices” (B. Lawrence, 1997) § Minimal Specifications § “This might work for a tightly integrated team....In most cases, though, it frustrates the developer... and disappoints the customers....” § Understand the Goal § “Instead of being dogmatic about how much detail to include...remem- ber your goal: to understand the user’s objectives with the system well enough to enable developers proceed at low risk of having to do rework.” 17 Friday, September 2, 2011
Business, User and System Requirements • Define Business Requirements • Define User Requirements • Develop Creative Brief • Define System Requirements REQUIREMENTS DOCUMENT Discover the project goals, define requirements, and frame the initial scope of an application. VISION INCEPTION ELABORATION WORK WEB Activities • Create High-Level User Experience Design • Create User Proof-of-Concept • Conduct Usability Testing • Create High-Level System Architecture • Create Technical Proof-of- Concept • Develop Initial Deployment Specification HIGH-LEVEL DESIGN DOCUMENT Activities • Usability Testing • User POC • Create Detailed User Experience Design • Assess and Select Technologies • Deployment Plan • Detailed Architecture • Create Technical POC • Coding Standards • Plan and Implement Development Environment DETAILED DESIGN DOCUMENT Activities • Create Deployment Plan • Update Detailed Design Document • Develop Components (Component Source) • Conduct Code Review FUNCTIONAL TESTING RESULTS Activities • Initial Data Load • Deployment • Create Administrative Guide • Develop User Education Manual • Transition to Maintenance Team USER ACCEPTANCE TESTING RESULTS Design the information structure and system architecture of the application. Refine the User Experience Design & System Design so an application can be built. Develop the application, integrating front end and back end systems. Deploy the finished application into production, transfer ownership to support and maintenance teams. Friday, September 2, 2011
project goals, business reqs, and initial scope. Activities •Define goals •Key success factors •VOC workshops •EOC interviews •B/U/S requirements •Site analysis •Audience analysis •Initial use cases •Business processes Further define a set of requirements and create systems and UX models Activities •Brainstorming •Scenario building •Wireframes •Visual direction •HL Info Architecture •HL Sys Architecture •Define technology Refine design details, create final design and obtain signoff. Activities •Merge visual and functional design •Final content •Test scenarios •Object analysis, modeling, design •Database analysis and design •Design documentation Build and integrate front-end and back-end systems. Activities •Image and page creation •Content integration •Coding •Unit testing •System staging in QA environment •Incremental QA and testing on multiple platforms Complete the commercialization of the product Activities •Acceptance testing •System and knowledge transfer •Product deployment •Marketing campaign 20 Friday, September 2, 2011
project goals, business reqs, and initial scope. Activities •Define goals •Key success factors •VOC workshops •EOC interviews •B/U/S requirements •Site analysis •Audience analysis •Initial use cases •Business processes Further define a set of requirements and create systems and UX models Activities •Brainstorming •Scenario building •Wireframes •Visual direction •HL Info Architecture •HL Sys Architecture •Define technology Refine design details, create final design and obtain signoff. Activities •Merge visual and functional design •Final content •Test scenarios •Object analysis, modeling, design •Database analysis and design •Design documentation Build and integrate front-end and back-end systems. Activities •Image and page creation •Content integration •Coding •Unit testing •System staging in QA environment •Incremental QA and testing on multiple platforms Complete the commercialization of the product Activities •Acceptance testing •System and knowledge transfer •Product deployment •Marketing campaign 21 Friday, September 2, 2011
the User Interface Rich Internet Application Solutions Users achieve goals by performing tasks Reliable content and data form the foundations of a strong user experience Single, reliable view of the user’s entire relationship with the enterprise supports business processes critical to the delivery of a seamless experience They accomplish tasks by interacting with content, features, and functions in the agent portal and other applications, software and tools User interfaces bring the user experience alive, providing simplified, enjoyable online interactions and instant feedback in flexible, intuitive and forgiving workspaces Loosely joined customer- facing and internal business processes support quick and continuous experience improvement Powerful Interactions Single View of the Customer Information Delivery Transactional Marketing Campaign Management Analytics Reporting and Monitoring Notification Workflow Others Content Management Authentication and Authorization Identity Management Syndication Web Sites Distributed Content and Functionality product / service content & data analytic data meta data user Business Processes User Interfaces Experience Enablers Software / Tools Applications Expectations frame users’ experiences through brand perception and prior experience Beautiful experiences are more than pixel deep Friday, September 2, 2011
artifact help further the UX vision? § Who are you creating artifact for? Who’s going to use it? § What do they need? § How can you meet their needs while not losing sight of the UX vision? § Do you have a need to proceed? 24 Friday, September 2, 2011
in our styling department is that they not only have a great feel for design, but also for the fact that the design needs to function properly on a motorcycle. That melding of functionality and styling is what makes our motorcycles very, very special. Friday, September 2, 2011
on a project § IA Information architect § IxD Interaction designer § VisD Visual designer § BA Business analyst § PO Product owner § PM Project manager § SA Systems architect § DA Data architect § DBA Database analyst § Dev Developer § QA Quality assurance analyst 33 Friday, September 2, 2011
which task § RACI § Responsible: Does the task § Accountable: Signs off the work Responsible does § Consulted: Provides input, opinions, advice § Informed: Consumes output & information from the team § Only 1 Accountable per task § Work in teams, then we’ll gather to discuss 34 Friday, September 2, 2011
“detailed design”? • My definition? A detailed design is • The body of information that conveys sufficient detail to communicate that which can be coded. • Just enough detail to enable the non-UX team (dev, biz, mkt, release) to understand the UX designer’s intent. 35 Friday, September 2, 2011
Track BaselineCM Baseline Configuration Management Release Manager once per project BaselineCM Create a Scenario Business Analyst Every iteration User QoS Requirements Scenario List Scenarios BaselineCM Create a Quality of Service Requirement Every iteration Lifestyle Snapshot Scenario List Iteration Start CM Plan CM Guidelines CM Access Control Policy CM Baseline Report CM Guidelines scenarios BaselineCM Plan Project IPM Officer Once, at start of project Project Manager Dev Manager QA Manager Master Schedule Org Process Guidance Tailoring Guidelines Vision Statement Personas Project Process Instance Project Plan Master Schedule Risk Management Strategy Project Commitments Track Complete Define-Update Test Approach Architect Test Approach Test Metrics Test Approach UATs QoS Req List Subject Friday, September 2, 2011
Create a Scenario Business Analyst Every iteration User Experience Architect QoS Requirements Scenario List Scenarios BaselineCM Create a Quality of Service Requirement Every iteration Lifestyle Snapshot Scenario List Iteration Start BaselineCM Create Product Requirements Every iteration Application Architect scenarios QoS Requirements Lead Developer Service Specifications Reference Solution Application Diagram System Diagram Functional Requirements UI Flow Model Operational Requirements BaselineCM Establish Environments Build Engineer Once per iteration Integration Sequence Rationale for Integration Sequence Support Docs for Integration Environment Product Integration Criteria BaselineCM Create Solution Architecture Once at the start of a project and on-going at start of each iteration Threat Model Performance Model Existing Architecture Vision Statement Org Coding Guidelines Static Analysis Guidelines Static Analysis Rules Coding Guidelines Architect UATs QoS Req List Domain Model Subject Matter Expert Deployment Diagram Logical Data Center Diagram Selection Justification Infrastr… Architect Peer Review Feedback Friday, September 2, 2011
system shall allow the teacher to click a control which displays the first answer in the lesson. NOTE: Subsequent answers can be accessed by individual controls after the first answer is displayed. The “Show Answers” and “Show First Answer” controls shall be displayed outside of lessons in a toolbar in the Learning Environment. Answers should be displayed to both the teacher 40 Friday, September 2, 2011
As a clinician and/or front desk assistant, I need to record the writer, provider(s), assistant(s), as well as the date and time of entry for every clinical note, so that I can maintain accurate clinical records. Friday, September 2, 2011
I consulted for in the past 6 years, only one had UX professionals contributing to the project. http://www.modernanalyst.com/Resources/Articles/tabid/115/articleType/ArticleView/articleId/1735/ Are-you-ready-to-wear-your-UX-hat-when-duty-calls.aspx Friday, September 2, 2011
to Leesburg, Va., and arrange for transportation of the sick and those unable to walk to Winchester, securing the transportation of the country for this purpose. The route between this and Culpeper Court-House east of the mountains being unsafe will no longer be traveled. Those on the way to this army already across the river will move up promptly; all others will proceed to Winchester collectively and under command of officers, at which point, being the general depot of this army, its movements will be known and instructions given by commanding officer regulating further movements. III. The army will resume its march tomorrow, taking the Hagerstown road. General Jackson's command will form the advance, and, after passing Middletown, with such portion as he may select, take the route toward Sharpsburg, cross the Potomac at the most convenient point, and by Friday morning take possession of the Baltimore and Ohio Railroad, capture such of them as may be at Martinsburg, and intercept such as may attempt to escape from Harper's Ferry. IV. General Longstreet's command will pursue the main road as far as Boonsborough, where it will halt, with reserve, supply, and baggage trains of the army. V.General McLaws, with his own division and that of General R. H. Anderson, will follow General Longstreet. On reaching Middletown will take the route to Harper's Ferry, and by Friday morning possess himself of the Maryland Heights and endeavor to capture the enemy at Harper's Ferry and vicinity. Friday, September 2, 2011
Case: 3.3 Requirements Matrix: 4.A.1, 4.A.2, 4.A.3, 4.A.4 Site Map: site_map_display_all_fees Base Wireframe: 4.1,4.2,4.3,4.4,4.5 Separated Rooms and Fees 1 The room stay is separated by first the total for all rooms reserved, without any taxes or fees. Then the estimated taxes and fees appears, followed by the total stay amount. If taxes and fees are included in the rate, use the term “included”. Breakdown of Taxes and Fees 2 The system breaks out and identifies all taxes, separate from any optional service charges. The CPM system provides the tax and fee information. If taxes and fees are included in the rate, use the term “included in reservation amount”. Optional Service Charges 3 If the property assesses any additional yet optional charges, they appear here. If there are no optional charges, do not display anything. 1 3 Functionality of this page is based on the current reservation review, reserve, and confirmation pages. It covers reservations made in currency amounts. The GCCI free night reservation confirmation wireframe appears on the next page. All modified items should be consistent with existing functionality and visual standards. 2 4 Additional Confirmations 4 The Reservation Amount module appears the same on the following pages: • Reservation Confirmation Email • Change Reservation • View Reservation • Cancel Reservation It contains the same information as the Reservation summary, just in a different layout. Friday, September 2, 2011
Case: 3.3 Requirements Matrix: 4.A.1, 4.A.2, 4.A.3, 4.A.4 Site Map: site_map_display_all_fees Base Wireframe: 4.1,4.2,4.3,4.4,4.5 Separated Rooms and Fees 1 The room stay is separated by first the total for all rooms reserved, without any taxes or fees. Then the estimated taxes and fees appears, followed by the total stay amount. If taxes and fees are included in the rate, use the term “included”. Breakdown of Taxes and Fees 2 The system breaks out and identifies all taxes, separate from any optional service charges. The CPM system provides the tax and fee information. If taxes and fees are included in the rate, use the term “included in reservation amount”. Optional Service Charges 3 If the property assesses any additional yet optional charges, they appear here. If there are no optional charges, do not display anything. 1 3 Functionality of this page is based on the current reservation review, reserve, and confirmation pages. It covers reservations made in currency amounts. The GCCI free night reservation confirmation wireframe appears on the next page. All modified items should be consistent with existing functionality and visual standards. 2 4 Additional Confirmations 4 The Reservation Amount module appears the same on the following pages: • Reservation Confirmation Email • Change Reservation • View Reservation • Cancel Reservation It contains the same information as the Reservation summary, just in a different layout. Friday, September 2, 2011
4.A.4 Site Map: site_map_display_all_fees Base Wireframe: 4.1,4.2,4.3,4.4,4.5 Separated Rooms and Fees 1 The room stay is separated by first the total for all rooms reserved, without any taxes or fees. Then the estimated taxes and fees appears, followed by the total stay amount. If taxes and fees are included in the rate, use the term “included”. Breakdown of Taxes and Fees 2 The system breaks out and identifies all taxes, separate from any optional service charges. The CPM system provides the tax and fee information. If taxes and fees are included in the rate, use the term “included in reservation amount”. Optional Service Charges 3 If the property assesses any additional yet optional charges, they appear here. If there are no optional charges, do not display anything. 1 3 Functionality of this page is based on the current reservation review, reserve, and confirmation pages. It covers reservations made in currency amounts. The GCCI free night reservation confirmation wireframe appears on the next page. All modified items should be consistent with existing functionality and visual standards. 2 4 Additional Confirmations 4 The Reservation Amount module appears the same on the following pages: • Reservation Confirmation Email • Change Reservation • View Reservation • Cancel Reservation It contains the same information as the Reservation summary, just in a different layout. Friday, September 2, 2011
and specifications closely. § Provide iterative guidance to engineers, product manager, and marketers. § Use well-structured, carefully written language that avoids ambiguity. § Highlight language with diagrams that support the specification of experience. § Strive to limit the formality of documentation to just enough, just in time. 64 Friday, September 2, 2011
get away from needing to provide 'objective evidence' of design inputs, verification & validation and design outputs, this being the bare framework of what is required by the FDA and most, if not all the international medical device quality requirements.” 67 Friday, September 2, 2011
You can’t develop a user-centered product from user stories § You can use personas to ask, “What would Juan do?” § Take photos of sketches. Place them in the backlog. § Embed scenarios into the backlog for empathy traceability 70 Friday, September 2, 2011
two teams § Challenge team creates potential probs/challenges § Solution team creates features & strengths of the product § Challenge team selects a card from the deck and plays it face up § Solution team tries to find a card that can provide a solution to it. § If the Solution team can’t play a reasonable solution card, the Challenge team gets a point. Otherwise, the point goes to the Solution team. § Work together on each challenge to find that solution. 71 Friday, September 2, 2011
of information that conveys sufficient detail to communicate that which can be coded. § Just enough detail to enable the developer to understand the UX designer’s intent. § The codification of empathy, tracing UX vision through development Friday, September 2, 2011
axure.com § Brown, Dan § Communicating Design: Developing Web Site Documentation for Design and Planning, Second Edition. New Riders § Goodwin, Kim § Designing for the Digital Age: How to Create Human-centered Products and Services. John Wiley & Sons § Morville, Peter & Jeffrey Callender § Search Patterns. O’Reilly Media, Inc § Wiegers, Karl § Software Requirements, 2nd Edition. Microsoft Press § Zaki Warfel, Todd § A Practitioner’s Guide to Prototyping. Rosenfeld Media 77 Friday, September 2, 2011
uhooi
yukiringo
recruitengineers
torije
abcmisuzu
helemarudesu
ryoya_frst
jdesign_tokyo
takaikanako
sugiyama_sukedachi
wattlaa
moriyuya
paigeccino
michaelherold
jeffersonlam
rocio
chriscoyier
reverentgeek
eileencodes
tenderlove
mongodb
bkeepers
akosma
aki_iinuma
![Joe Sokohl [email protected] 1.804.873.6964 @mojoguzzi @RegJoeConsults Many thanks! Friday, September](https://files.speakerdeck.com/presentations/4e80f263d4209c0063000111/slide_115.jpg){kind=link}
