Advisor designvs dev


Published on

Rather humorous old presentation that JEff Eisen and I did about the desing of Notes 8.
I especially like the slides that say "Dev likes the designs but says "Are you crazy? We can't implement that!"

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • "Lotus Notes 8: the Developer and vs. the Designer " (keep the strikethrough:) The success of an end-user client relies heavily on how well designers can communicate a vision and how well developers can realize that vision. Lotus Notes is proof of that - infamous for its (sometimes quirky) user experience. In this session, Jeff and Mary Beth reveal the processes they used to "negotiate" trade-offs between (sometimes whacky) user interface ideas and (sometimes architecturally obtuse) technical limitations, the resulting user experience, and what the resulting user experience means for you as administrators and application developers.
  • Visual Style is all about the visual design , and creating a visual system that is applied consistently across an entire product
  • The design team worked with marketing to obtain a list of the brand attributes (qualities) that the new visual style should convey.
  • Purpose: Determine preferred palette, textures, shapes Method: Surveys of the target users (Executive, AA, Knowledge worker, Domino developer, Domino admin) About which magazines they read for pleasure, work or when waiting Created five “Image Boards” by purchasing the most popular magazines from each group and cutting out images that reflected the attributes we wanted to convey
  • Give more examples of what the Workspace pull-rights might look like? Tell about how we wanted to use color in the folders. We assume that for most users , the old folders will not really be useful 9e.g. the ones under “Browse for an application…), but we could not safely remove them – it MIGHt destroy data for those folks who use the workspace independently of the bookmark bar. SYNCHRONIZATION – tied to the Advanced menus, will nto show up for most people.
  • Advisor designvs dev

    1. 1. Lotus Notes 8: The Designer vs. the Developer Mary Beth Raven (the designer) Jeffrey N Eisen (the developer) Keynote
    2. 2. Who are we? <ul><li>Mary Beth Raven </li></ul><ul><ul><li>Lead designer for Notes </li></ul></ul><ul><li>Jeff Eisen </li></ul><ul><ul><li>Chief Architect for Notes </li></ul></ul>
    3. 3. Overview of this Talk <ul><li>Why “Dev Vs Design” </li></ul><ul><ul><li>A bit of the inside story/details </li></ul></ul><ul><ul><li>Some design and development rationales </li></ul></ul><ul><li>Demos and examples peppered throughout </li></ul>
    4. 4. What We’ll Cover … <ul><li>Review of the Notes 8 mission </li></ul><ul><li>The beginning: working together, but apart </li></ul><ul><li>The challenges: differences in approach </li></ul><ul><li>The watershed events </li></ul><ul><li>Better collaboration </li></ul><ul><li>The happy ending </li></ul><ul><li>Now working on “Notes 8: the sequel” </li></ul>
    5. 5. Review of the Notes 8 Mission <ul><li>Become a complete rich-client collaboration platform by </li></ul><ul><ul><li>Creating a world-class user experience for Mail. Calendar, Contacts </li></ul></ul><ul><ul><li>Adding new capabilities such as activity management and composite applications </li></ul></ul><ul><ul><li>Integrating IBM productivity tools (now called Lotus Symphony) </li></ul></ul><ul><li>This was a public declaration at Deutsche Notes user group </li></ul><ul><li>Expectations are high </li></ul>
    6. 6. Notes Provides Collaboration Software in a Rich Client Collaboration Lotus Notes <ul><li>And now…a quick tour of Notes 8 before I tell you the story behind it… </li></ul>Rich Clients Web Clients, Portals Mobile Clients
    7. 7. What We’ll Cover … <ul><li>Review of the Notes 8 mission </li></ul><ul><li>The beginning: working together, but apart </li></ul><ul><li>The challenges: differences in approach </li></ul><ul><li>The watershed events </li></ul><ul><li>Better collaboration </li></ul><ul><li>The happy ending </li></ul><ul><li>Now working on “Notes 8: the sequel” </li></ul>
    8. 8. Working Together, but Working Apart <ul><li>Design focuses on Design ethnography: </li></ul><ul><ul><li>Visit customers on site </li></ul></ul><ul><ul><li>Interview them to find out what they do and know </li></ul></ul><ul><ul><li>Create user profiles and personae </li></ul></ul><ul><ul><li>Involve users more during the design, starting with several studies for a new visual style </li></ul></ul><ul><li>Dev says… </li></ul><ul><ul><li>Great, </li></ul></ul><ul><ul><ul><li>As long as you organize most of this </li></ul></ul></ul><ul><ul><ul><li>And you never make us spell “design ethnography” </li></ul></ul></ul>
    9. 9. Designing the New Visual Style <ul><li>Create a visual system </li></ul><ul><li>Consistently apply it across the product </li></ul><ul><li>Design Process </li></ul><ul><ul><li>Research: What brand attributes do we want the new visual style to convey </li></ul></ul><ul><ul><li>Studies with users </li></ul></ul><ul><ul><li>Refine the style </li></ul></ul>
    10. 10. Visual Style Research: Brand Attributes to Convey Simple Modern Fresh People-oriented Business-oriented Innovative Familiar Reliable Agile
    11. 11. Visual Style: Study One <ul><li>Purpose: Determine palette, textures, shapes </li></ul><ul><li>Method: Surveys of the target users </li></ul><ul><li>Created five “Image Boards” cutting out magazine images that reflected the attributes we wanted to convey </li></ul>
    12. 12. Visual Style: Study One (p. 2) <ul><li>Surveyed all five user groups for their responses </li></ul><ul><li>Answered questions for each attribute on each board: </li></ul><ul><ul><li>How well does this board represent [IBM attribute] </li></ul></ul><ul><ul><li>They were asked to point to specific images and to describe what conveyed that concept. </li></ul></ul>
    13. 13. Visual Style: Analysis of Study One <ul><li>Analyzed the boards for </li></ul><ul><ul><li>Color Palette </li></ul></ul><ul><ul><li>Textures </li></ul></ul><ul><ul><li>Shapes </li></ul></ul>
    14. 14. Visual Style: Study Two <ul><li>Purpose: Apply the palette and design tone choices to wireframes of the UI to determine a favorite </li></ul><ul><li>Method: Web survey asked respondents to look at 10 user interface wireframes and answer questions about them, indicating their preferences and reasons </li></ul>
    15. 15. Design said… <ul><li>Here’s our new visual look </li></ul>Nice dark gradient from menu bar to tabs Cool way to show selection Cleaner look without toolbars
    16. 16. Dev said… <ul><li>We love it! </li></ul><ul><li>Except the part about no toolbars… ARE YOU CRAZY?? </li></ul><ul><li>And…. it has too many custom controls </li></ul><ul><ul><li>It will take too long to build </li></ul></ul><ul><ul><li>It will undermine our approach of leveraging Eclipse to look native on each platform– Windows XP, Vista, Linux, and Mac </li></ul></ul>
    17. 17. Visual Style Compromises Plain menu bar Put back the toolbar Uncool selection in navigator
    18. 18. Learnings from Working Together but Apart <ul><li>Yes, design spent time and effort coming up with a design that could not be entirely built in the time allowed </li></ul><ul><li>BUT </li></ul><ul><li>IBM and the design team had to prove to the world that IBM values design and can do it </li></ul>
    19. 19. What We’ll Cover … <ul><li>Review of the Notes 8 mission </li></ul><ul><li>The beginning: working together, but apart </li></ul><ul><li>The challenges: differences in approach </li></ul><ul><li>The watershed events </li></ul><ul><li>Better collaboration </li></ul><ul><li>The happy ending </li></ul><ul><li>Now working on “Notes 8: the sequel” </li></ul>
    20. 20. Differences in Approach… Hey! When Notes crashes, let’s change it to say: “ Congratulations You Found a Bug!” Great Idea! Notes Developer Notes Developer
    21. 21. These people are not the target user for this release <ul><li>(but they are very hard working and smart) </li></ul>
    22. 22. Design Applies the Persona Approach <ul><li>Created 3 design personae </li></ul><ul><ul><li>You are NOT ALLOWED to say “the user,” you must mention the persona by name </li></ul></ul><ul><ul><li>All of our prototypes and usability tests are from their perspectives </li></ul></ul><ul><ul><li>All specs must refer to them by name </li></ul></ul>Samantha Ted Betty
    23. 23. Dev Thinks… <ul><li>These designers are COMPLETELY NUTS </li></ul><ul><li>Anonymous developers proceed to deface Samantha </li></ul>
    24. 24. Examples of Early Divergent Approaches <ul><li>Attention to detail in the visual style </li></ul><ul><li>Navigator/Outline view </li></ul><ul><li>Business cards </li></ul>
    25. 25. (Lack of) Attention to Detail Spec called for rounded edges
    26. 26. Better Attention to Detail
    27. 27. The Navigator/Outline View <ul><li>To save space, incorporate the + and – sign into the folder </li></ul>
    28. 28. Business Cards <ul><li>Early builds did not match designs </li></ul>
    29. 29. Why the Divergent Approaches? <ul><li>Dev got used to thinking from the point of view of the code </li></ul><ul><li>Not sure how much to trust Design </li></ul>
    30. 30. What We’ll Cover … <ul><li>Review of the Notes 8 mission </li></ul><ul><li>The beginning: working together, but apart </li></ul><ul><li>The challenges: differences in approach </li></ul><ul><li>The watershed events </li></ul><ul><li>Better collaboration </li></ul><ul><li>The happy ending </li></ul><ul><li>Now working on “Notes 8: the sequel” </li></ul>
    31. 31. The Watershed Events <ul><li>A Bad customer briefing </li></ul><ul><li>Design manager resigns </li></ul><ul><li>Third party design consultant brought in </li></ul>
    32. 32. Jeff’s Very Bad, Terrible, Rotten, No-good Day <ul><li>A Very Large Customer (VLC) attends briefing and sees demos of actual build. </li></ul><ul><ul><li>Unimpressed </li></ul></ul><ul><ul><li>Wants to know why the actual build does not look more like the pictures they’ve seen </li></ul></ul><ul><ul><li>Upper management promises that they’ll get better </li></ul></ul><ul><ul><li>We send weekly screenshots to customer so they can verify that they are getting better </li></ul></ul>
    33. 33. Example <ul><li>No attention to detail in Sidebar --each panel has different size icons </li></ul>
    34. 34. Mary Beth’s Very Bad, Terrible, Rotten, No-good Day <ul><li>My manager resigned </li></ul><ul><li>He cannot see how Notes 8 can be successful </li></ul><ul><li>Submitted a list of “issues that broke the Camel’s back” </li></ul>
    35. 35. Some of the Issues <ul><li>“Memo” to “Message” </li></ul><ul><li>Repeating meeting “just this instance” default </li></ul><ul><li>Feed reader </li></ul><ul><li>Float/dock the Open list </li></ul><ul><li>Workspace re-design </li></ul><ul><li>The first four were re-added! </li></ul>
    36. 36. Third Party Design Consultant <ul><li>Development brought in a 3 rd party design consultant to review the designs and the actual builds </li></ul><ul><li>Basic finding is that both are in the “right direction” but actual builds have a UI that is “sloppy” </li></ul>
    37. 37. What We’ll Cover … <ul><li>Review of the Notes 8 mission </li></ul><ul><li>The beginning: working together, but apart </li></ul><ul><li>The challenges: differences in approach </li></ul><ul><li>The watershed events </li></ul><ul><li>Better collaboration </li></ul><ul><li>The happy ending </li></ul><ul><li>Now working on “Notes 8: the sequel” </li></ul>
    38. 38. Better Collaboration <ul><li>Dev sees that they should put more trust in the designs </li></ul><ul><li>Design agrees to try to work harder within the technical limitations </li></ul><ul><li>“Swat” team formed for Mail </li></ul><ul><li>Dev addresses Platform issues (due to Lotus Expeditor) with attention to detail </li></ul><ul><li>Added a designer to Composite Applications </li></ul>
    39. 39. Inbox <ul><li>Goals: Use real estate more wisely, help users manage mail more quickly using “whole thread” operations </li></ul><ul><li>Early designs wasted too much space on the left </li></ul>
    40. 40. Inbox <ul><li>Other designs had too much space between the sender and subject </li></ul>
    41. 41. Inbox Notes 8 Design <ul><li>Chose to “re-use” one column for </li></ul><ul><ul><li>Follow-up flags </li></ul></ul><ul><ul><li>Replied to </li></ul></ul><ul><ul><li>Forwarded </li></ul></ul><ul><li>Put a light gray gradient behind message type for a consistent left margin </li></ul>
    42. 42. Platform issues due to Lotus Expeditor <ul><li>Expeditor provides: </li></ul><ul><ul><li>Title bar </li></ul></ul><ul><ul><li>Menu bar </li></ul></ul><ul><ul><li>“ Open List” </li></ul></ul><ul><ul><li>Tab management </li></ul></ul><ul><ul><li>Toolbar, including Search </li></ul></ul><ul><ul><li>Sidebar </li></ul></ul><ul><ul><ul><li>Thin </li></ul></ul></ul><ul><ul><ul><li>Open </li></ul></ul></ul><ul><ul><ul><li>Closed </li></ul></ul></ul><ul><ul><li>Status bar </li></ul></ul><ul><ul><li>Visual theme </li></ul></ul>
    43. 43. Platform: Because Notes 8 is a big plug-in to Expeditor… <ul><li>Several things that were in Notes 7 had to be re-implemented in Expeditor </li></ul><ul><li>Several things did not get re-implemented in time </li></ul><ul><ul><li>The option to open a view in a new window </li></ul></ul><ul><ul><li>Large icons in the “Open list” </li></ul></ul><ul><li>Some things on the status bar were left off on purpose </li></ul>
    44. 44. Platform: Simplify the Status Bar <ul><li>Remove Editing choices </li></ul><ul><li>Remove “quick picks” on lower right (we are putting “send and receive mail in the new tools menu) </li></ul>
    45. 45. Platform: Dev Says… <ul><li>We are worried…some users will see that as a “regression” </li></ul><ul><li>But since you tell us that all the functionality is available elsewhere in the UI, OK </li></ul><ul><li>…when it’s too late for 8.0… DOH! “Receive only” is Not elsewhere in the UI. We have a regression. </li></ul><ul><li>Design is mortified and will try to rectify ASAP </li></ul>
    46. 46. Platform: Make the menu bar “more standard” <ul><li>Add a “Tools” menu, move items from “File” to “Tools” </li></ul><ul><li>Change “Database” to “Application” </li></ul><ul><li>Make the Window menu visible all the time </li></ul><ul><li>Give Administrators complete control over the customization of ALL menus and menu items, via user policy </li></ul>
    47. 47. Dev says… <ul><li>Complete control of all menus is a great idea… but too much to fit into Notes 8 </li></ul><ul><ul><li>How about “Advanced Menus” instead? </li></ul></ul>
    48. 48. Design Says… <ul><li>The new “open List” replaces the bookmark bar. </li></ul><ul><ul><li>Leverage same mental model as “Start button” </li></ul></ul><ul><ul><li>Contents are the same order as your Notes 7 bookmark bar. </li></ul></ul><ul><ul><li>Rename Databases to Applications </li></ul></ul><ul><ul><li>Put New things at the bottom </li></ul></ul><ul><ul><li>Allow Users to close the Home page, but also get it back </li></ul></ul><ul><ul><li>Let users tear off and float and “Folder” and then dock it in the toolbar if they wan </li></ul></ul>
    49. 49. Dev Says… <ul><li>Tearing off parts of the open list means changes to the TOOLBAR control (because that is what we used to build the open list) </li></ul><ul><li>How about an option to “dock” the open list instead? </li></ul>
    50. 50. Added a Designer to Composite Applications <ul><li>Composite Apps aggregate components at the glass — think Rich-Client mash up </li></ul>
    51. 51. How Do You Build a Composite Application? <ul><li>Decide which applications will make people more productive if they are all on one screen, then: </li></ul><ul><ul><li>Build components </li></ul></ul><ul><ul><li>Assemble components (you can use our new “composite application editor”) </li></ul></ul><ul><ul><li>Deploy the composite application </li></ul></ul>
    52. 52. What We’ll Cover … <ul><li>Review of the Notes 8 mission </li></ul><ul><li>The beginning: working together, but apart </li></ul><ul><li>The challenges: differences in approach </li></ul><ul><li>The watershed events </li></ul><ul><li>Better collaboration </li></ul><ul><li>The happy ending </li></ul><ul><li>Now working on “Notes 8: the sequel” </li></ul>
    53. 53. The Happy Ending: Notes 8 Ships! <ul><li>Positive reviews </li></ul><ul><li>Dev and Design want to refine their process </li></ul><ul><li>Domino Server team says “Hey, we want to do some of this user-centered stuff too!” </li></ul><ul><ul><li>Two Domino Admin personas are born </li></ul></ul>
    54. 54. What We’ll Cover … <ul><li>Review of the Notes 8 mission </li></ul><ul><li>The beginning: working together, but apart </li></ul><ul><li>The challenges: differences in approach </li></ul><ul><li>The watershed events </li></ul><ul><li>Better collaboration </li></ul><ul><li>The happy ending </li></ul><ul><li>Now working on “Notes 8: the sequel” </li></ul>
    55. 55. Themes and Features in Notes 8.0.1 <ul><li>Customer driven deployment blockers </li></ul><ul><li>Stability/Bug Fixes </li></ul><ul><li>Performance </li></ul><ul><li>Small set of features from 7.x missing from 8.0 </li></ul><ul><ul><li>Citrix support </li></ul></ul><ul><ul><li>Dual timezones </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><li>Small set of new features </li></ul><ul><ul><li>Quickr integration into sidebar (delivered as add-on to 8.0.1) </li></ul></ul><ul><ul><li>Mail file quota gauge </li></ul></ul><ul><ul><li>Blog template improvements </li></ul></ul><ul><ul><li>Typeahead in docked open list </li></ul></ul><ul><ul><li>Domino Web Access over low bandwidth – “DWA Lite” (Sparkle) </li></ul></ul><ul><ul><li>Facelift for To-dos </li></ul></ul>
    56. 56. Quickr Sidebar: Starting Sidebar Panel When there are no places added to Quickr connectors, a message displays with some information about Quickr and links to add places and learn more. Opens Quickr’s Add Places wizard. Opens Lotus Quickr Connectors Information Center.
    57. 62. Blog Views
    58. 63. Typeahead in Docked Open List
    59. 64. Sparkle (DWA Lite) <ul><li>Optimized for low-speed connections </li></ul><ul><ul><li>Temporary use: traveling business users </li></ul></ul><ul><ul><li>Daily user: employees consistently connecting over low speed </li></ul></ul><ul><ul><li>Simplified mail: low usage profile </li></ul></ul>
    60. 65. Themes and Feature Areas for Notes 8.5 <ul><li>Themes </li></ul><ul><ul><li>Betty has more robust meeting workflow </li></ul></ul><ul><ul><li>Samantha has more integration at the screen </li></ul></ul><ul><ul><li>Ted has unencumbered mobility </li></ul></ul><ul><li>Feature Areas </li></ul><ul><ul><li>Mac Support </li></ul></ul><ul><ul><li>More Symphony integration </li></ul></ul><ul><ul><li>Rich text editor </li></ul></ul><ul><ul><li>Mail – especially archiving </li></ul></ul><ul><ul><li>Calendar – Ical support </li></ul></ul><ul><ul><li>Contacts </li></ul></ul><ul><ul><li>Task Management (ToDos, Follow-ups, Activities) </li></ul></ul><ul><ul><li>Additional Quickr integration </li></ul></ul>
    61. 66. CAVEAT <ul><li>NONE of the Notes 8.5 plans is final, NOTHING in these next few slides is a guarantee </li></ul>
    62. 67. Not just ON a Mac, LIKE a Mac…
    63. 68. Rich Text Editor <ul><li>Improvements to table editing (drag and drop to resize columns) </li></ul><ul><li>“ Auto recognizer” support </li></ul>
    64. 69. Ted Can Have Color-Coded iCal Subscriptions
    65. 70. Notes 8.5 Feature Areas <ul><li>We have more ideas – NOTHING IS FINAL YET! </li></ul><ul><li>Come talk to me during this conference </li></ul><ul><li>Watch--and respond to --the design blog- </li></ul>
    66. 71. Wrap-up Resources <ul><li>Notes Design Blog </li></ul><ul><ul><li> </li></ul></ul><ul><li>Sametime Design Blog </li></ul><ul><ul><li> </li></ul></ul><ul><li>Domino Blog </li></ul><ul><ul><li> </li></ul></ul><ul><li>Lotus Expeditor Information </li></ul><ul><ul><li> wdocs/expeditor </li></ul></ul><ul><li>Activity-Centric Computing </li></ul><ul><ul><li> nhan6nsn8n?OpenDocument&Site=lotus </li></ul></ul>
    67. 72. Summary of Highlights <ul><li>IBM has completely updated Mail, Calendar and Contacts </li></ul><ul><li>IBM has provided a complete integration client with Notes and the inclusion of </li></ul><ul><ul><li>Sametime </li></ul></ul><ul><ul><li>Activities </li></ul></ul><ul><ul><li>Symphony Word Processor </li></ul></ul><ul><ul><li>Symphony Presentations </li></ul></ul><ul><ul><li>Symphony Spreadsheet </li></ul></ul><ul><ul><li>Composite Applications </li></ul></ul><ul><li>New level of collaboration between design, dev and customers will result in a better experience for YOU. </li></ul>
    68. 73. ADVISOR SUMMIT Web Update Page <ul><li> </li></ul><ul><li>This session WILL / WILL NOT </li></ul><ul><li>have updates. </li></ul>
    69. 74. <ul><li>Thank you! </li></ul><ul><li>Please remember to fill out your evaluation. </li></ul>