1. NREL is a national laboratory of the U.S. Department of Energy, Office of Energy Efficiency and Renewable Energy, operated by the Alliance for Sustainable Energy, LLC. An Agile Approach to User Interface Design for Web Applications InterLab 2009 Shauna Fjeld November 17, 2009 Using sketching, prototypes, and user stories to define application requirements, get client buy-in, and design a better user experience.

2. National Renewable Energy Laboratory Innovation for Our Energy Future What’s the problem we’re trying to solve? I gave them exactly what they asked for in the requirements specification. I gave them my vision, why doesn’t the application look anything like it?

3. National Renewable Energy Laboratory Innovation for Our Energy Future Waterfall vs. Agile Waterfall Approach Each step of process is a distinct stage, which must finish before next one starts Testing doesn’t happen until system is almost finished Changes cause massive code rewrites Clients are not involved so not bought into result Agile Approach Individuals and interactions over process and tools Working software over comprehensive documentation Customer collaboration over contract negotiation Responding to change over following a plan

4. National Renewable Energy Laboratory Innovation for Our Energy Future Waterfall Web application process Requirements & Analysis DesignCodeTest Implement Maintain

5. National Renewable Energy Laboratory Innovation for Our Energy Future Agile approach Develop high-level requirements Develop user stories and task flows Prototype the user interface Develop & deploy

6. National Renewable Energy Laboratory Innovation for Our Energy Future Develop high-level requirements Gathering needs and ideas from stakeholders and users Understanding how the need is currently being met (if at all) Benchmarking competitor sites Coalescing ideas into high-level requirements Prioritizing requirements

7. National Renewable Energy Laboratory Innovation for Our Energy Future Examples of high-level requirements Provide a mechanism for state energy offices to calculate energy savings from measures funded by the state in the five main energy sectors. Provide reports of savings to DOE.

8. National Renewable Energy Laboratory Innovation for Our Energy Future Agile approach Develop high-level requirements Prototype the user interface Develop & deploy Develop user stories and task flows

9. National Renewable Energy Laboratory Innovation for Our Energy Future Defining primary users Having a good list of users helps us understand functional scope Methods –Surveys –Contextual inquiry –Interviews –Focus groups

10. National Renewable Energy Laboratory Innovation for Our Energy Future What you need to know about your users How many different types of users are there? What are their goals? What tasks will they need to complete? Which of those tasks will the application support?

11. National Renewable Energy Laboratory Innovation for Our Energy Future Prioritizing users Which user types do we care about most? –Why is the application being built? –What business objectives do we hope to achieve? –Which user type is the most critical to support for achieving our objective? For a typical system, expect 2 or 3 primary user types.

12. National Renewable Energy Laboratory Innovation for Our Energy Future Defining user stories How are real people going to use the app? It doesn’t have to be complicated –What does your user do for a living? –Why are they visiting your site? –What do they want to accomplish while here? –What is their level of technical expertise? –What would they deem a successful experience? User stories deliver a “gut check” to make sure you are on the right track when defining requirements, and creating visual and functional design.

13. National Renewable Energy Laboratory Innovation for Our Energy Future User story example Olivia is an energy economist for the Arizona Energy Office. She has worked for the office for nearly 25 years and knows the program well. She needs to account for energy savings from money flowing in from DOE grants. She will use the State Energy Program Metrics calculator to convert energy saving measures funded by the state to actual energy savings.

14. National Renewable Energy Laboratory Innovation for Our Energy Future Task flow diagram The flowchart details how a user will complete all the tasks in an application from beginning to end It can be used as a basis for the prototype Choose stateChoose year Choose an energy sector Fill in data for that sector Save and go to another sector Save and calculate energy savings Print reportExport results

15. National Renewable Energy Laboratory Innovation for Our Energy Future Traditional requirements specification There’s a gap between the requirements and the design It’s difficult to manage changes Complexity means more pages No way to account for different users End result: Application doesn’t match the client’s vision.

16. National Renewable Energy Laboratory Innovation for Our Energy Future Agile approach Develop high-level requirements Develop user stories and task flows Develop & deploy Prototype the user interface

17. National Renewable Energy Laboratory Innovation for Our Energy Future Agile user interface design Working closely with clients and stakeholders to define the interface Design iteratively until you get it right The design is the requirements specification.

18. National Renewable Energy Laboratory Innovation for Our Energy Future Why Prototype? Prototypes are a way to analyze the problem with your stakeholders. Prototypes are tangible. Your clients can understand them. You are both speaking the same language right off the bat. Prototypes are engaging. It leads to better feedback. It gets your clients excited.

19. National Renewable Energy Laboratory Innovation for Our Energy Future Why Prototype? Prototypes are a way to envision the system. Prototypes are thorough. They help you think of things you wouldn’t when just writing a list. They make sure the app has the features your customers need. They help you avoid spending time writing and updating documents that may not be used.

20. National Renewable Energy Laboratory Innovation for Our Energy Future Why Prototype? Prototypes communicate potential UI designs. Client changes come early when they are easier and cheaper to make. They ensure you build the site in a way that your customers can use. –Prototypes enable usability testing—goal is to fail quickly, to be successful sooner. It’s a reality check to implementation. It’s easier to tell if it can really be done.

21. National Renewable Energy Laboratory Innovation for Our Energy Future Four types of prototypes Low visual and low functional High visual and low functional Low visual and high functional High visual and high functional

22. National Renewable Energy Laboratory Innovation for Our Energy Future Low visual and low functional Stickies, sketches, white boards Useful to determine –If the system has all the features required to support the user’s goals –If the workflow makes sense at a high level –Which user interface concept works best –If the vision meets stakeholder’s expectations

23. National Renewable Energy Laboratory Innovation for Our Energy Future Low visual and high functional HTML interactive Useful for –Validating if requirements are implemented correctly –Validating UI design direction with stakeholders –Evaluating the usability of proposed designs with users Especially remote testing (hard to do with low fidelity solutions) –Serves as documentation for development teams

24. National Renewable Energy Laboratory Innovation for Our Energy Future High visual and low functional Artist’s Photoshop file Useful for –Testing the visual design You can do paper prototypes or hot link them with image maps to do browser testing. –More useful for content sites than applications

25. National Renewable Energy Laboratory Innovation for Our Energy Future High visual and high functional Coded and beautiful Takes time and effort Useful for –Evaluating the usability of proposed UI designs for an existing system –Performing usability tests with non-savvy user groups

26. National Renewable Energy Laboratory Innovation for Our Energy Future Begin with low visual low functional Two approaches Sketchboarding Adaptive Path – user interface and user experience design consultants Design Studio Jeff White and Jim Ungar presented this at User Interaction 08 – Jim Ungar formerly worked for Sandia

27. National Renewable Energy Laboratory Innovation for Our Energy Future Sketchboarding Hang up a large sheet of paper Paste up requirements artifacts like User stories Task flow analysis Functional requirements Research findings –Helps focus on solving the right problem

28. National Renewable Energy Laboratory Innovation for Our Energy Future Sketchboarding

29. National Renewable Energy Laboratory Innovation for Our Energy Future Sketchboarding Toss various UI elements onto the page because you know they’ll need to be there Try to get the most important ideas down Design several possibilities. Never do just one. Force yourself to be creative Gradually refine the layout, organization, and interaction of each element until you have a design that makes sense

30. National Renewable Energy Laboratory Innovation for Our Energy Future Sketchboarding Sketch at two levels: Multi-page template –to quickly force out a half-dozen (or more) approaches to a problem –or to convey a flow of an experience across many pages Single-page template –to “zoom in” on a particular thumbnail idea

31. National Renewable Energy Laboratory Innovation for Our Energy Future Sketchboarding It’s not meant to be pixel perfect It’s fast It eliminates needless detail It reasonably conveys highly interactive experiences

32. National Renewable Energy Laboratory Innovation for Our Energy Future The Design Studio Getting ready for the studio Establish goals for the product (features and functionality) Give the team all the information that needs to be there. Don’t give them hierarchies. Give them user scenarios of what a person might do there. Provide a simple list of tasks the user needs to be able to accomplish.

33. National Renewable Energy Laboratory Innovation for Our Energy Future The Design Studio Before the studio Have the team prepare several rough sketches (pen and paper); the idea is to explore different concepts Don’t spend more than 20 minutes on one sketch Don’t spend more than a couple hours total for 4 to 7 concepts

34. National Renewable Energy Laboratory Innovation for Our Energy Future The Design Studio During the studio Put sketches up on the wall Have each person present concept Critique for 8 to 10 minutes – document good and bad Consolidation – review goals, discuss trade offs, make decisions Final design = good parts of many concepts

35. National Renewable Energy Laboratory Innovation for Our Energy Future The Design Studio Benefits It establishes Credibility of design team Team ownership of design Client buy-in because they’ve been through process Rapid development of design direction

36. National Renewable Energy Laboratory Innovation for Our Energy Future Prototyping next steps Validate against user stories Walk your user through the prototype Can they achieve their goals? Is there anything you’ve missed?

37. National Renewable Energy Laboratory Innovation for Our Energy Future Close the cycle with usability testing Useful because –Enables us to gather the user viewpoint early on –Enables client to see things from a user perspective –Helps us to determine if the approach is working –Helps us determine what we are missing Incorporate the feedback, and, if appropriate, move on to a higher visual or functional prototype. Lather, rinse and repeat, as needed.

38. National Renewable Energy Laboratory Innovation for Our Energy Future Agile = Success 1. You save time and money –Clients, stakeholders, and designers are all on the same page –Fewer changes when programming means it gets done faster and better 2. You have a satisfied client –They are engaged in product –The product matches their vision

39. National Renewable Energy Laboratory Innovation for Our Energy Future References “User Interface Prototypes,” Agile Modeling http://www.agilemodeling.com/artifacts/uiPrototype.htm http://www.agilemodeling.com/artifacts/uiPrototype.htm “The Design Behind the Design,” Boxes and Arrows http://boxesandarrows.com/view/integrating http://boxesandarrows.com/view/integrating “Just Build It: HTML Prototyping and Agile Development,” Digital Web Magazine http://www.digital-web.com/articles/just_build_it_html_prototyping_and_agile_development/ http://www.digital-web.com/articles/just_build_it_html_prototyping_and_agile_development/ Designing the Obvious. 2006. Robert Hoekman, Jr. IBM Agile Resources https://www-01.ibm.com/software/ucd/agileuxd.html https://www-01.ibm.com/software/ucd/agileuxd.html A Project Guide to UX Design. 2009. Russ Unger, Carolyn Chandler “Sketchboarding,” Adaptive Path http://www.adaptivepath.com/ideas/essays/archives/000863.phphttp://www.adaptivepath.com/ideas/essays/archives/000863.php