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.

Final wireframes from screen concept to user interaction v0.4

  • Login to see the comments

  • Be the first to like this

Final wireframes from screen concept to user interaction v0.4

  1. 1. Wireframes – from screen concept to user interaction Mia Horrigan IT Strategic Advisor and Architect
  2. 2. The Pacifier <ul><li>“ We do this my way . There is no highway option” </li></ul>
  3. 3. It all began with a team under pressure <ul><li>Command and Control </li></ul><ul><li>A template to fill out </li></ul><ul><li>Attitude of PM - just get it done, don’t question, we’ll worry about fixing it up later </li></ul><ul><li>this just won’t work </li></ul>
  4. 4. Information Architecture journey
  5. 5. Analysing users’ problems <ul><li>Talked to end users to find out what they are wanting to do </li></ul><ul><li>Found out about the current process </li></ul><ul><li>Looked at needs to improve efficiency and effectiveness </li></ul><ul><li>Needed to balance need for transparency and accountability with data reporting requirements </li></ul><ul><li>Identified where functions could be automated </li></ul><ul><li>Looked at options for system (enhance current, new system, do nothing) </li></ul>
  6. 6. Analysis documented as BPMs <ul><li>Focused on what data needed to be captured & when </li></ul><ul><li>And then developed wireframes </li></ul>Requirements Mgmt System
  7. 7. Wireframes as screen concepts <ul><li>Designers and programmers need to understand how the screen will work and what it will look like </li></ul><ul><li>Wireframes give the analysts view of how the system might work from the user perspective </li></ul><ul><li>…… but sometimes there are problems </li></ul>
  8. 8. Wireframes as concepts reflecting understanding of the Requirements <ul><li>It’s not just about building stuff, its about building stuff better </li></ul><ul><li>Requirements and analysis often done up-front (waterfall approach) </li></ul><ul><li>Wireframes as screen concepts are often driven by the “as is” process </li></ul><ul><li>Heavily dependent on data needs and processes </li></ul><ul><li>May follow an atomic, database driven representation of the web site </li></ul><ul><li>What I found was this process driven approach didn’t translate into a useable interface, it wasn’t intuitive! </li></ul>
  9. 9. Business Requirement Specification <ul><li>“ These concept screens for the [client] website are presented as a guide to the content of the screen (i.e. the attributes and options on a screen) rather than the layout of a screen. The layout (including field sizes, colours, graphics etc.) shall be determined by the technical staff with reference to design standards. The following screens should not be used to indicate the final layout and look of a screen.” </li></ul><ul><li>BAs are often told not to pre-empt the solution in their requirements however this does not mean that Requirements elicitation and Wireframes should be developed in isolation to the User needs and the context of their situation and behaviour </li></ul>User
  10. 10. Our problem …process & data driven wireframes and scenarios More reflective of the Physical Data Model vs. User Need 150 wireframes
  11. 11. Example Wireframes Tabs used to reflect change in state However when click on tab identical info repeated (not new info) Secondary navigation originally proposed to be hardcoded into each screen Screen reflected an electronic copy of the manual application form – little value add Sequencing was not in line with how the users would work through an application Screens developed as separate screen concepts without view of bigger picture usage scenario
  12. 12. What went wrong <ul><li>Focused on replicating the process online </li></ul><ul><li>Our scenarios were driven by the processes and data requirements and not the user needs </li></ul><ul><li>User scenarios derived from algorithms (eg pricing info not derived) </li></ul><ul><li>Wireframe concentrated on data capture (end to end 206 clicks to complete a basic new application process) </li></ul>
  13. 13. What we should have considered Not just about the process … .or the technology Its about Users and how they work ..and the context of their work
  14. 14. Technical Debt <ul><li>“ Technical debt and design debt refer to the eventual consequences of slapdash software architecture and hasty software development” Ward Cunningham </li></ul><ul><li>Cost pressure - Functionality scaled back without addressing user experience implications of the decisions </li></ul><ul><li>Analysis paralysis – over focus on data and process meant little time to think about useability and user interaction needs </li></ul><ul><li>Time pressure – Only interested in if it was “not broken” …...“besides, we are going to train them” </li></ul><ul><li>Racking up technical debt to be paid in subsequent releases!!!!!!!! </li></ul>
  15. 15. Balancing Priorities of Users to reduce technical debt <ul><li>Project success hinges on Users therefore we needed to: </li></ul><ul><li>Understand what they want </li></ul><ul><li>Uncover what they need </li></ul><ul><li>Look at the context and issues </li></ul><ul><li>Understand the user behaviour (their online interaction) </li></ul><ul><li>Show how the process will help users in their work </li></ul><ul><li>Design the process and system for users </li></ul>
  16. 16. Agile Alliance Manifesto <ul><li>While there is value in the items on the right, we value the items on the left more </li></ul><ul><li>Users vs Process </li></ul>Individuals and interactions Processes and tools Working software Comprehensive documentation Customer collaboration Contract negotiation Responding to change Following a plan
  17. 17. Agile, Lean & Continuous Improvement <ul><li>Agile -software development methodologies originated as a response to so called “fat” and slow software development processes that increased lead time, work in progress and value/non value added activities ratio </li></ul><ul><li>Has concepts from Lean Thinking and organises work in a cross-functional, multidisciplinary work cell </li></ul><ul><li>Focus on continuous improvements, that is the base of Lean </li></ul><ul><li>Why did we find this a better approach…… </li></ul>
  18. 18. Adapting to our changing environment <ul><li>We needed to incorporate new info as it came to light and learn from each iteration </li></ul><ul><li>We proposed an Agile approach as a way to : </li></ul><ul><li>Maximise value to end user </li></ul><ul><li>Reduce waste/cost </li></ul><ul><li>Improve r esponsiveness and service levels for users </li></ul><ul><li>Minimise risk </li></ul>
  19. 19. So we re-organised… <ul><li>Adopted an agile approach </li></ul><ul><li>Partnered BAs with IA (streams of activities) </li></ul><ul><li>Consulted with Tech Solution lead during analysis and design to convey features </li></ul><ul><li>Used “skinny” documentation to quickly convey understanding to stakeholders of the key features of the system and its processes and the flow of information </li></ul>
  20. 20. Agile Approach – User Centered Prioritised feature sets Multidisciplinary team and Product owner working together Standards based ISO13407 Consult Tech Team regarding options and desired functionality
  21. 21. And we used new tools <ul><li>We utilised Information Architecture tools and techniques to develop: </li></ul><ul><li>User profiles (Personas) </li></ul><ul><li>Want maps </li></ul><ul><li>User Scenarios </li></ul><ul><li>Prototype (pulling the Wireframes and User scenarios together) </li></ul><ul><li>Focused on continuous improvement - Iterated our prototype and validated the solution with users </li></ul>
  22. 22. Understanding Users - Personas <ul><li>Started off with ‘skinny’ view of users gained thru workshops </li></ul><ul><li>Built up personas as we went through our iterations, rather than all-at-once </li></ul><ul><li>Added to personas as info uncovered </li></ul>
  23. 23. From skinny to Zen personas <ul><li>As our project knowledge evolved, we added to our understanding of users: </li></ul><ul><li>Their information preferences </li></ul><ul><li>Their expectations </li></ul><ul><li>Their capabilities </li></ul><ul><li>Their information needs </li></ul><ul><li>Their social network profiles (Forrester’s Technographics) </li></ul><ul><li>Documented as ‘ZenAgile’ personas </li></ul>
  24. 24. The result – ZenAgile Personas Wants Communication preferences Context Behaviour Motivations
  25. 25. User Segmentation – What they want Central office Key Stakeholders Want Map Really effective tool and point at which we started to see buy in from our end users
  26. 26. Want Maps to User Needs
  27. 27. User scenarios – Story Cards <ul><li>Describe usage at a high-level summarising overall usage functionality that actors will have with the system </li></ul><ul><li>The usage scenarios highlight the user requirements as they as expressed as a feature set or story card </li></ul><ul><ul><li>As a [ USER/PERSONA ] </li></ul></ul><ul><ul><li>I want to [ ACTIVITY ] </li></ul></ul><ul><ul><li>in order to [ OUTCOME ] </li></ul></ul><ul><li>These feature sets will then be prioritised by the users during the iterations of development </li></ul>
  28. 28. Wireframes to Prototypes <ul><li>Utilising the story cards and usage scenarios we were able to convert the wireframe screen concepts into a prototype reflecting the way users would interact with the system </li></ul>Branding Branding Branding This is where the user really got excited and understood what the system would look and feel like
  29. 29. Wireframes from screen concepts to user interaction <ul><li>We knew that wireframes combined with scenarios would be a good way to test concepts and see how the system will work for Users </li></ul><ul><li>Our Wireframes need to reflect the user needs and how they wanted to interact with the system </li></ul><ul><li>Wireframes should not be developed in isolation to design principals and part of our success was having BAs and IAs working together </li></ul>
  30. 30. We adopted IA Design Principals <ul><li>Organise information by type of information </li></ul><ul><li>Category : Similarity or relatedness. Used when clusters of similarity exist , or when users will naturally look for information by category </li></ul><ul><li>Time: Chronological sequence </li></ul><ul><li>Location : Geographic or spatial reference. Used when orientation and information is meaningfully related to the geography of a place </li></ul><ul><li>Alphabet: Alphabetical sequence </li></ul><ul><li>Continuum: Magnitude (most to least relevant, largest to smallest, best to worst, etc) </li></ul>
  31. 31. IA Design Principals cont… <ul><li>Hierarchy </li></ul><ul><li>Simplest way to visualise and understand complexity </li></ul><ul><li>To maximise clarity and effectiveness of hierarchical structures, selectively reveal and conceal </li></ul><ul><li>Progressive disclosure </li></ul><ul><li>Only necessary or requested information is displayed at any given time. </li></ul><ul><li>Prevents information overload and reduces information complexity (Especially useful for novice or infrequent users) </li></ul>
  32. 32. IA Design Principals cont… <ul><li>80/20 rule </li></ul><ul><li>A high percentage of a system's use comes from a low percentage of its features and content: </li></ul><ul><ul><li>Focus on the most important features and information </li></ul></ul><ul><ul><li>Bring the most important information to a high level, and provide multiple ways of accessing it </li></ul></ul>
  33. 33. Many ways to get to the same info - Consistency, Redundancy & Entry Points <ul><li>Consistency </li></ul><ul><li>Comprehensibility is improved when similar parts of the system are expressed in a similar way – ability to learn </li></ul><ul><li>Redundancy </li></ul><ul><li>Provide multiple ways to reach same information or features </li></ul><ul><li>Entry Point </li></ul><ul><li>Points of prospect should facilitate rapid orientation. Progressive lures to attract and pull users beyond top level (eg news about program and link to full info </li></ul>Reporting system
  34. 34. What we learnt <ul><li>Engage Users to uncover needs and develop feature sets and user scenarios </li></ul><ul><li>Work as a team - BA/IA Design team and consult Tech team </li></ul><ul><li>Use IA tools and techniques to effectively communicate user needs, feature sets and user benefits </li></ul><ul><li>Agile approach helped us to adapt and build the team based on JIT assessment of what’s needed </li></ul><ul><li>Concentrate on what users need to quickly and efficiently interact with the system to get their work done </li></ul><ul><li>Involve users in validation to increase adoption of and buy-in </li></ul>
  35. 35. Our Mapping of the User experience Understood user needs and wants Mapped business process Workshop processes and user requirements Developed usage scenarios – feature set (story cards) Iterated improvements to user interface in prototypes Validated prototype with users Translated user needs into features and benefits
  36. 36. We found success depends on <ul><li>Understanding Business objectives and processes is important but: </li></ul><ul><li>Also need to anticipation of future trends and have an ability to sense upcoming developments in order to design and build great applications and websites </li></ul><ul><li>Work as a team and think about the whole picture and not just our piece of the puzzle </li></ul><ul><li>Importantly ….. </li></ul><ul><li>Understanding Users, their needs and their behaviour is critical </li></ul><ul><li>It’s not about You! It’s about Users </li></ul>
  37. 37. Understand Users <ul><li>Hinges on communicating with Users: </li></ul><ul><li>To understand what they want </li></ul><ul><li>To set expectations about what the project will actually deliver (and what it won’t) </li></ul><ul><li>To show them how the project will help them in their work </li></ul><ul><li>To uncover what they need . . . </li></ul>
  38. 38. Thank You <ul><li>Mia Horrigan </li></ul><ul><li>PricewaterhouseCoopers </li></ul><ul><li>Twitter @miahorri </li></ul><ul><li>#IA #UCD #agile </li></ul><ul><li>Blog </li></ul><ul><li>Email </li></ul>