Advisor designvs dev

Advisor.com

Lotus Notes 8:The Designer vs. the Developer

Mary Beth Raven (the designer)Jeffrey N Eisen (the developer)

Keynote

Advisor.com

Who are we?

Mary Beth RavenLead designer for Notes

Jeff EisenChief Architect for Notes

Advisor.com

Overview of this Talk

Why “Dev Vs Design” A bit of the inside story/details Some design and development rationales

Demos and examples peppered throughout

Advisor.com

What We’ll Cover …

Review of the Notes 8 mission The beginning: working together, but apart The challenges: differences in approach The watershed events Better collaboration The happy ending Now working on “Notes 8: the sequel”

Advisor.com

Review of the Notes 8 Mission

Become a complete rich-client collaboration platform by

Creating a world-class user experience for Mail. Calendar, Contacts

Adding new capabilities such as activity management and composite applications

Integrating IBM productivity tools (now called Lotus Symphony)

This was a public declaration at Deutsche Notes user group

Expectations are high

Advisor.com

Notes Provides Collaboration Software in a Rich Client

Rich Clients

Web Clients, PortalsMobile Clients

Collaboration

Lotus Notes

And now…a quick tour of Notes 8 before I tell you the story behind it…

Advisor.com

What We’ll Cover …

Review of the Notes 8 mission The beginning: working together, but apart The challenges: differences in approach The watershed events Better collaboration The happy ending Now working on “Notes 8: the sequel”

Advisor.com

Working Together, but Working Apart

Design focuses on Design ethnography: Visit customers on site Interview them to find out what they do and know Create user profiles and personae Involve users more during the design, starting

with several studies for a new visual style Dev says…

Great, As long as you organize most of this And you never make us spell “design ethnography”

Advisor.com

Designing the New Visual Style Create a visual system Consistently apply it across the product Design Process

Research: What brand attributes do we want the new visual style to convey

Studies with users Refine the style

Advisor.com

Visual Style Research: Brand Attributes to Convey

Simple

Modern

Fresh

People-oriented

Business-oriented

InnovativeFamiliarReliable

Agile

Advisor.com

Visual Style: Study One Purpose: Determine palette, textures, shapes Method: Surveys of the target users Created five “Image Boards” cutting out magazine

images that reflected the attributes we wanted to convey

Advisor.com

Visual Style: Study One (p. 2) Surveyed all five user groups for their responses Answered questions for each attribute on each

board:How well does this board represent [IBM attribute] They were asked to point to specific images and to describe what conveyed that concept.

Advisor.com

Visual Style: Analysis of Study One Analyzed the boards for

Color Palette Textures Shapes

Advisor.com

Visual Style: Study Two Purpose: Apply the palette and design tone

choices to wireframes of the UI to determine a favorite

Method: Web survey asked respondents to look at 10 user interface wireframes and answer questions about them, indicating their preferences and reasons

Advisor.com

Design said… Here’s our new visual look

Nice dark gradient from menu bar to

tabs

Cool way to show selection

Cleaner look without toolbars

Advisor.com

Dev said…

We love it! Except the part about no toolbars… ARE YOU

CRAZY?? And…. it has too many custom controls

It will take too long to build It will undermine our approach of leveraging

Eclipse to look native on each platform– Windows XP, Vista, Linux, and Mac

Advisor.com

Visual Style Compromises Plain menu bar

Put back the toolbar

Uncool selection in navigator

Advisor.com

Learnings from Working Together but Apart

Yes, design spent time and effort coming up with a design that could not be entirely built in the time allowed

BUT IBM and the design team had to prove to the

world that IBM values design and can do it

Advisor.com

What We’ll Cover …

Review of the Notes 8 mission The beginning: working together, but apart The challenges: differences in approach The watershed events Better collaboration The happy ending Now working on “Notes 8: the sequel”

Advisor.com

Differences in Approach…

Hey! When Notes crashes, let’s change it to

say:“Congratulations

You Found a Bug!”

Hey! When Notes crashes, let’s change it to

say:“Congratulations

You Found a Bug!”

Great Idea! Great Idea!

Notes Developer

Notes Developer

Advisor.com

These people are not the target user for this release

(but they are very hard working and smart)

Advisor.com

Design Applies the Persona Approach Created 3 design personae

You are NOT ALLOWED to say “the user,” you must mention the persona by name

All of our prototypes and usability tests are from their perspectives

All specs must refer to them by name

Samantha

Ted Betty

Advisor.com

Dev Thinks…

These designers are COMPLETELY NUTS Anonymous developers proceed to deface

Samantha

Advisor.com

Examples of Early Divergent Approaches

Attention to detail in the visual style Navigator/Outline view Business cards

Advisor.com

(Lack of) Attention to Detail

Spec called for rounded edges

Advisor.com

Better Attention to Detail

Advisor.com

The Navigator/Outline View

To save space, incorporate the + and – sign into the folder

Advisor.com

Business Cards

Early builds did not match designs

Advisor.com

Why the Divergent Approaches?

Dev got used to thinking from the point of view of the code

Not sure how much to trust Design

Advisor.com

What We’ll Cover …

Review of the Notes 8 mission The beginning: working together, but apart The challenges: differences in approach The watershed events Better collaboration The happy ending Now working on “Notes 8: the sequel”

Advisor.com

The Watershed Events

A Bad customer briefing Design manager resigns Third party design consultant brought in

Advisor.com

Jeff’s Very Bad, Terrible, Rotten, No-good Day

A Very Large Customer (VLC) attends briefing and sees demos of actual build.

Unimpressed Wants to know why the actual build does not look

more like the pictures they’ve seen Upper management promises that they’ll get

better We send weekly screenshots to customer so they

can verify that they are getting better

Advisor.com

Example

No attention to detail in Sidebar --each panel has different size icons

Advisor.com

Mary Beth’s Very Bad, Terrible, Rotten, No-good Day

My manager resigned He cannot see how Notes 8 can be successful Submitted a list of “issues that broke the Camel’s

back”

Advisor.com

Some of the Issues

“Memo” to “Message” Repeating meeting “just this instance” default Feed reader Float/dock the Open list Workspace re-design The first four were re-added!

Advisor.com

Third Party Design Consultant

Development brought in a 3rd party design consultant to review the designs and the actual builds

Basic finding is that both are in the “right direction” but actual builds have a UI that is “sloppy”

Advisor.com

What We’ll Cover …

Review of the Notes 8 mission The beginning: working together, but apart The challenges: differences in approach The watershed events Better collaboration The happy ending Now working on “Notes 8: the sequel”

Advisor.com

Better Collaboration

Dev sees that they should put more trust in the designs

Design agrees to try to work harder within the technical limitations

“Swat” team formed for Mail Dev addresses Platform issues (due to Lotus

Expeditor) with attention to detail Added a designer to Composite Applications

Advisor.com

Inbox

Goals: Use real estate more wisely, help users manage mail more quickly using “whole thread” operations

Early designs wasted too much space on the left

Advisor.com

Inbox

Other designs had too much space between the sender and subject

Advisor.com

Inbox Notes 8 Design

Chose to “re-use” one column for Follow-up flags Replied to Forwarded

Put a light gray gradient behind message type for a consistent left margin

Advisor.com

Platform issues due to Lotus Expeditor

Expeditor provides: Title bar Menu bar “Open List” Tab management Toolbar, including

Search Sidebar

Thin Open Closed

Status bar Visual theme

Advisor.com

Platform: Because Notes 8 is a big plug-in to Expeditor…

Several things that were in Notes 7 had to be re-implemented in Expeditor

Several things did not get re-implemented in time

The option to open a view in a new window Large icons in the “Open list”

Some things on the status bar were left off on purpose

Advisor.com

Platform: Simplify the Status Bar

Remove Editing choices Remove “quick picks” on lower right (we are

putting “send and receive mail in the new tools menu)

Advisor.com

Platform: Dev Says…

We are worried…some users will see that as a “regression”

But since you tell us that all the functionality is available elsewhere in the UI, OK

…when it’s too late for 8.0… DOH! “Receive only” is Not elsewhere in the UI. We have a regression.

Design is mortified and will try to rectify ASAP

Advisor.com

Platform: Make the menu bar “more standard” Add a “Tools” menu, move items from “File” to

“Tools” Change “Database” to “Application” Make the Window menu visible all the time Give Administrators complete control over the

customization of ALL menus and menu items, via user policy

Advisor.com

Dev says…

Complete control of all menus is a great idea… but too much to fit into Notes 8

How about “Advanced Menus” instead?

Advisor.com

Design Says… The new “open List” replaces the

bookmark bar. Leverage same mental model

as “Start button” Contents are the same order

as your Notes 7 bookmark bar. Rename Databases to

Applications Put New things at the bottom Allow Users to close the Home

page, but also get it back Let users tear off and float and

“Folder” and then dock it in the toolbar if they wan

Advisor.com

Dev Says…

Tearing off parts of the open list means changes to the TOOLBAR control (because that is what we used to build the open list)

How about an option to “dock” the open list instead?

Advisor.com

Added a Designer to Composite Applications

Composite Apps aggregate components at the glass — think Rich-Client mash up

Advisor.com

How Do You Build a Composite Application?

Decide which applications will make people more productive if they are all on one screen, then:

Build components Assemble components (you can use our new

“composite application editor”) Deploy the composite application

Advisor.com

What We’ll Cover …

Review of the Notes 8 mission The beginning: working together, but apart The challenges: differences in approach The watershed events Better collaboration The happy ending Now working on “Notes 8: the sequel”

Advisor.com

The Happy Ending: Notes 8 Ships!

Positive reviews Dev and Design want to refine their process Domino Server team says “Hey, we want to do

some of this user-centered stuff too!” Two Domino Admin personas are born

Advisor.com

What We’ll Cover …

Review of the Notes 8 mission The beginning: working together, but apart The challenges: differences in approach The watershed events Better collaboration The happy ending Now working on “Notes 8: the sequel”

Advisor.com

Themes and Features in Notes 8.0.1

Customer driven deployment blockers Stability/Bug Fixes Performance Small set of features from 7.x missing from 8.0

Citrix support Dual timezones …

Small set of new features Quickr integration into sidebar (delivered as add-

on to 8.0.1) Mail file quota gauge Blog template improvements Typeahead in docked open list Domino Web Access over low bandwidth – “DWA

Lite” (Sparkle) Facelift for To-dos

Advisor.com

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.

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 Quickr’s Add Places wizard.

Opens Lotus Quickr Connectors Information Center.

Opens Lotus Quickr Connectors Information Center.

Advisor.com

Advisor.com

Advisor.com

Advisor.com

Advisor.com

Advisor.com

Blog Views

Advisor.com

Typeahead in Docked Open List

Advisor.com

Sparkle (DWA Lite)

Optimized for low-speed connections Temporary use: traveling business users Daily user: employees consistently connecting

over low speed Simplified mail: low usage profile

Advisor.com

Themes and Feature Areas for Notes 8.5

Themes Betty has more robust meeting workflow Samantha has more integration at the screen Ted has unencumbered mobility

Feature Areas Mac Support More Symphony integration Rich text editor Mail – especially archiving Calendar – Ical support Contacts Task Management (ToDos, Follow-ups, Activities) Additional Quickr integration

Advisor.com

CAVEAT

NONE of the Notes 8.5 plans is final, NOTHING in these next few slides is a guarantee

Advisor.com

Not just ON a Mac, LIKE a Mac…

Advisor.com

Rich Text Editor

Improvements to table editing (drag and drop to resize columns)

“Auto recognizer” support

Advisor.com

Ted Can Have Color-Coded iCal Subscriptions

Advisor.com

Notes 8.5 Feature Areas

We have more ideas – NOTHING IS FINAL YET! Come talk to me during this conference Watch--and respond to --the design blog-

MaryBethRaven.com

Advisor.com

Wrap-up Resources Notes Design Blog

www-03.ibm.com/developerworks/blogs/page/marybeth Sametime Design Blog

www-03.ibm.com/developerworks/blogs/page/josefscherpa

Domino Blog www.dominoblog.com/dominoblog/dblog.nsf

Lotus Expeditor Information www-142.ibm.com/software/sw-lotus/products/

product1.nsf/ wdocs/expeditor Activity-Centric Computing

www-306.ibm.com/software/swnews/swnews.nsf/n/nhan6nsn8n?OpenDocument&Site=lotus

Advisor.com

Summary of Highlights

IBM has completely updated Mail, Calendar and Contacts

IBM has provided a complete integration client with Notes and the inclusion of

Sametime Activities Symphony Word Processor Symphony Presentations Symphony Spreadsheet Composite Applications

New level of collaboration between design, dev and customers will result in a better experience for YOU.

Advisor.com

ADVISOR SUMMIT Web Update Page

advisor.com/cte0710p.nsf/w/cte0710ud

This session WILL / WILL NOThave updates.

Advisor.com

Thank you!

Please remember to fill out your evaluation.