Designs in Motion: Prototyping Salesforce's Information Architecture

Presented by Amy Lee, Senior Manager, User Experience
at AIGA SF + Salesforce UX: Clarity event

Forward-Looking Statements: http://investor.salesforce.com/about-us/investor/forward-looking-statements/

Transcript

1. Designs In Motion Prototyping Salesforce’s Information Architecture Amy Lee, Senior Manager, User Experience @amster, amy.lee@salesforce.com I’d like to talk to you about how interactive prototypes are a great tool for us to make better design decisions than previously with static mockups.
2. Forward-Looking Statements Statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site. Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.
3. HEADER OF THIS PAGE LAYOUT DATA CONTROLS COLOR CHOREOGRAPHY HTTPS://COMMONS.WIKIMEDIA.ORG/WIKI/FILE:GREUBEL_FORSEY-GMT_RED_GOLD.JPG Organization Lenses of Information Change State / Context Separate Groups Storytelling A watch is an example of a complicated machine. The Layout, Data, Controls, Color, and Choreography are things which are exposed to the user to tell the story about the current state of the machine.
4. HEADER OF THIS PAGE LAYOUT DATA CONTROLS COLOR CHOREOGRAPHY HTTPS://COMMONS.WIKIMEDIA.ORG/WIKI/FILE:GREUBEL_FORSEY-GMT_RED_GOLD.JPG DIMENSIONS As UX designers and IAs, these are the tools/levers we use to craft a user experience.
5. THE MULTIDIMENSIONAL PROBLEM • ABOUT • METADATA-DRIVEN UI • DESIGN CONSIDERATIONS Salesforce is a very complex machine and has this same multidimensional problem to solve.
6. WORLD IA DAY 2016 AMY LEE @AMSTER
7. I am one of the engineers on the Salesforce Lightning Design System (SLDS) and the internal prototyping framework.
8. COMMONS.WIKIMEDIA.ORG/WIKI/FILE:VERDI_CONDUCTING_AIDA_IN_PARIS_1880_-_GALLICA_-_RESTORATION.JPG These days, however, I am a people manager.
9. COMMONS.WIKIMEDIA.ORG/WIKI/FILE:PAPER_PROTOTYPE_OF_WEBSITE_USER_INTERFACE,_2015-04-16.JPG My main focus is interactive prototypes.
10. Salesforce is the most complicated project I have worked on.
11. Force.com Heroku Enterprise AppExchange Shield Trailhead Wave Thunder Lightning Apps Analytics Community Marketing Service IoT Sales Multitenant Cloud USER EXPERIENCE CLOUD DATA Salesforce stores massive amounts of categorized data in the multi-tenant cloud, and uses the cloud platform to create meaningful data sets, and that’s revealed to the user via an application layer across a wide variety of devices. As UX professionals we craft the user experience in the top half of this architecture.
12. Sean Forbes Andy Young Jane Grey GenePoint SLA Pyramid Emergency Generators United Oil Installations GenePoint Pyramid Construction Inc. United Oil & Gas Company Contact Account Opportunity Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Salesforce data is grouped by object type, in this case Accounts, Contacts, and Opportunities. Here is a simplistic view of 3 account records, 3 contacts, and 3 opportunities.
13. Sean Forbes Andy Young Jane Grey GenePoint SLA Pyramid Emergency Generators United Oil Installations GenePoint Pyramid Construction Inc. United Oil & Gas Company Contact Account Opportunity Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Let’s say you want to get Info 2 (e.g. a phone number) from the GenePoint account. You would 1) log into Salesforce, 2) navigate to Accounts, 3) click on GenePoint to view its record, 4) navigate to the piece of info you’re looking for. If Salesforce were a simple tree organization, you might be able to optimize the UI for a tree hierarchy.
14. Sean Forbes Andy Young Jane Grey GenePoint SLA Pyramid Emergency Generators United Oil Installations GenePoint Pyramid Construction Inc. United Oil & Gas Company Contact Account Opportunity Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 However, a lot of Salesforce’s power comes from each record having relationships to other records. You can endless browse “sideways” going from a record to its related records.
15. Sean Forbes Andy Young Jane Grey GenePoint SLA Pyramid Emergency Generators United Oil Installations GenePoint Pyramid Construction Inc. United Oil & Gas Company Contact Account Opportunity Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Imagine trying to render a meaningful breadcrumb trail after performing navigation such as this. These are the things that are hard to capture in static mockups and are better suited for interactive prototypes.
16. Sean Forbes Andy Young Jane Grey GenePoint SLA Pyramid Emergency Generators United Oil Installations GenePoint Pyramid Construction Inc. United Oil & Gas Company Contact Account Opportunity Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 WHERE AM I? WHAT STATE AM I IN? WHERE CAN I GO? As UX/IA people we need to create a logical framework to explain to our users the state of the machine.
17. This is an example of an interface that was heavily prototyped. It is the Opportunity Workspace in the new Lightning Experience.
18. WHERE AM I? The red dots highlight the current state of the user’s navigation. Here we are looking at an Opportunity object we got to from the Closing Next Month list of opportunities. Its name is “Pyramid Emergency Generators”. It is associated with an account, Pyramid Construction Inc., and it is in the Needs Analysis state.
19. WHERE AM I? WHAT STATE AM I IN? But you can also see that Needs Analysis is in between two other states in a workflow.
20. WHERE AM I? WHAT STATE AM I IN? WHAT CAN I DO? This last bit is around telling the user what they can do next. In statics this becomes more complicated: if you click Mark Stage as Complete then a modal pops down and if the user says yes then animations happen. Or if you click Closed then the Mark Stage as Complete changes its text to Select Closed Stage, and if they click then the previous workflow happens.
21. LAYOUT DATA CONTROLS COLOR CHOREOGRAPHY If you were to merely use statics you might think that you’ve accounted for the entire scope of the problem. You could find a way to explain some of the complex interactions in a spec. And maybe you think you can get away without using interactive prototyping.
22. But …
23. OPINIONATED UI In our case our interface can be customized by the end-user. When you first go to this Opportunity Workspace the IA is what you might consider an “opinionated UI”: it is our (Salesforce’s) recommendation for the best user experience.
24. METADATA-DRIVEN However, the end-user can customize how it works for their organization. (That end-user is an administrator, btw.) And so interactive prototyping lets us play with the IA and see how it behaves in different layouts or configurations.
25. METADATA-DRIVEN This is the Lightning App Builder, the way you configure the UI.
26. METADATA-DRIVEN The metadata-driven configuration also affects even lists. For example, imagine that you make a static mockup of this UI and you assume the clickable link is always the Name. But you have to consider that the user can rearrange the columns as they please so how might you tell the user they can click on the row when there is -NO- link visible?
27. METADATA-DRIVEN Just to drive the point home, here’s the edit page for the list layout…
28. METADATA-DRIVEN … and here’s the column selection/ordering interface.
30. We have to test our designs across a wide variety of devices. Not just desktop, but mobile and wearables as well.
31. BLOG.IPHONE-GEEKS.COM/NEWS/IPHONE-HISTORY/ WWW.EVERYTHINGICAFE.COM/PRINT-IPAD/ ANDROIDCOMMUNITY.COM/NTT-DOCOMO-ROLLS-OUT-NEW-SMARTPHONES-THREE-MODELS-NOW-AVAILABLE-20150513/ CDN.KIDSROOMIDEA.INFO/IMAGES/BESTTABLET2015/COMPARE-TABLET/?ND We ship Salesforce1 on both iOS and Android. Each of these OSes have a wide variety of screen resolutions and dimensions. This includes phones -AND- tablets.
33. We built the new Lightning Experience with accessibility in mind.
34. ACC ES SIBI LI T Y We must ensure that users that need keyboard-based input methods or use screen readers can use our products.
35. This is just an example from the Design System where we put accessible text in the markup.
36. We must also consider how to keep hundreds of engineering teams inside and outside Salesforce synchronized. They must all understand how to build the new Lightning Experience …
37. TITLE TEXT … and we update our style guide recommendations frequently. That’s just the Design System—Salesforce releases 3 times a year!
38. BUILDABLE BY TEAMS 3X/YEAR MAINTAINABLE LONG-TERM LAYOUT DATA CONTROLS COLOR CHOREOGRAPHY INTERNATIONALIZATION / LOCALIZATION / RTL DEVICES ACCESSIBILITY And such is the multidimensional problem that is so hard to capture in statics or linear workflow mockups like in InVision or Flinto.
39. THE BETTER TOOLBOX • INTERACTIVE PROTOTYPING AS A TOOL • UX AT SALESFORCE • LIGHTNING DESIGN SYSTEM • PROTOTYPING SETUP We use interactive prototyping as one of our better tools to explain complex interactions.
40. STATICS INTERACTIVE PROTOTYPES WIREFRAMES PAPER
 PROTOTYPES ANIMATION SPECIFICATIONS SAMPLE DATA TOOLBOX As I said, interactive prototypes are just one tool the UX designs and engineers have. There are many times that one of the other methods will suffice. But for us, interactive prototypes are a way we can actually see designs all together in 1 context.
41. STATICS INTERACTIVE PROTOTYPES WIREFRAMES PAPER
 PROTOTYPES ANIMATION SPECIFICATIONS SAMPLE DATA TOOLBOX And so we find this really powerful.
42. Engineers Let’s talk a little bit about the place of the UX group inside Salesforce. You might think that in order for Salesforce to create its product we might just be able to have engineers building features that can be sold.
43. Engineers UX But because the software is so complex we need better user experience professionals to create a sensible interface.
44. Engineers UX Designers UX Researchers But design isn’t the only factor contributing to great UX. We use research to tell us where the pain points are and also to assess new design solutions.
45. Engineers UX Designers UX Prototypers UX Researchers And because many designs are too complex to explain in a static mockup or in a text document, we started doing more interactive prototyping. (That’s where I come in.)
46. Engineers A11Y UX Prototypers UX Researchers UX Designers But also we can’t forget that we have a commitment to accessibility, and as such have accessibility specialists early on in the workflow.
47. Engineers A11Y UX Prototypers UX Researchers UX Designers Sales + Marketing In practice, it is not so much a pipeline as it is a network of conversations that help us create the Salesforce products.
48. Engineers A11Y UX Prototypers UX Researchers UX Designers Sales + Marketing … let’s focus in on just the left side of this diagram.
49. A11Y UX Prototypers UX Researchers UX Designers Our UX team has 4 of us working very closely together.
50. A11Y UX Prototypers UX Researchers UX Designers SALESFORCE LIGHTNING DESIGN SYSTEM (SLDS) And what we did was put our brains into 1 design system we call SLDS. It is our best recommendations on how to build accessible components that look great and work well in concert with other components. It is what drives the Lightning Experience.
51. LIGHTNING DESIGN SYSTEM The new, fast, beautiful user experience from Salesforce. With a sales-centric mindset, we focused on reinventing the desktop environment to better support your sales process. The result is an intuitive, intelligent interface that helps sales reps work more naturally and close more deals faster. www.salesforce.com/lightning A whole new way to build pixel perfect apps. Get free access to our UI library, CSS framework and design guidelines so that you can build application UIs that are seamlessly unified with the Salesforce user experience in record time. www.lightningdesignsystem.com LIGHTNING EXPERIENCE Side note: to showcase the difference in these two things, the Lightning Experience is the actual product that end-users use. It is fast, beautiful, and productivity-centric. The Design System is the style guide and assets that creates the look and feel of the Lightning Experience.
52. SLDS WWW.LIGHTNINGDESIGNSYSTEM.COM UX Team’s best practices Open source code Frequently updated We use it too Let’s talk about the Design System for a moment.
53. Clarity Efficiency Consistency Beauty DESIGN PRINCIPLES OUR GUIDING LIGHT We started with 4 core principles. They are indeed “stack ranked” such that if there is ever a question between two design options, we will go with the one that has either more Clarity, more Efficiency, or more Consistency, in that order.
54. Main palette Usage guidelines Accessibility considerations COLOR PALETTE PRINCIPLES Let’s dive in to one part of the Design System. A typical design system might just have a color palette…
55. Sass variable name Swatches and values Separated into categories COLOR TOKENS PROGRAMMATIC DESIGN TOKENS … we go a step further by giving that color palette also in code form. We have Sass variables (we call them Design Tokens) that are semantically named so you no longer have to hardcode the color values. Recall that Salesforce releases 3 times a year: color and metrics values change. By using variables you can keep your style in sync with us.
56. Placement Many stencils SPINNER GUIDELINES SPINNERS VS STENCILS Also consider things like spinner components. We give you a recommendation …
57. Animation built in Copy-paste code SPINNER COMPONENT SPINNERS VS STENCILS … and we give you cut-and-paste code to achieve that spinner.
58. Label placement Complex interactions like: - Date Pickers - Lookups - Picklists FORM GUIDELINES Or with forms: we give you guidelines on our best accessible practices.
59. Live examples HTML code Sass styles Accessibility considerations FORMS COMPONENTS CODE AND GUIDELINES And we also give you cut-and-paste code that generates those very same interfaces.
60. Github link NPM / Bower / ZIP downloads Icons, font, token in Less, Stylus, Android, iOS Adobe and Mac color swatches MORE SLDS www.lightningdesignsystem.com The Design System is framework-agnostic: you can use with standalone or with your favorite CSS or JavaScript framework! It works well with Salesforce technologies including the Lightning Components framework.
61. SLDS CSS + MARKUP JS LIBRARIES SAMPLE DATA + REST API SPIKE SPIKE SPIKE SPIKE SPIKE SPIKE Let’s talk about how we do interactive prototyping. We have a core codebase that melds SLDS with modern JavaScript libraries and decorates that with sample data or data from the Salesforce REST API. The prototype isn’t 1 large prototype but several small prototypes we mix and match: we call them Spikes.
62. DESIGNS IN MOTION: PROTOTYPING SALESFORCE'S IA GLOBAL NAV GLOBAL SEARCH HEADER STAGES PAGE BODY Here is an example of how you might take a complex UI like the Opportunity Workspace and divide it into smaller spikes. This means we can test the designs, move spikes around the page, and get a realistic sense of how the UI looks and feels.
63. Move fast, multiple developers Mix and match components, layouts Quickly test hypothesis Explore complex multi-state interactions See designs in context More realistic than statics GLOBAL NAV GLOBAL SEARCH
64. Force.com Heroku Enterprise AppExchange Shield Trailhead Wave Thunder Lightning Apps Analytics Community Marketing Service IoT Sales Multitenant Cloud One of the new things we’ve been doing is blending sample data with actual Salesforce data. We are using the public REST API.
65. How this works is if we were prototyping an interface like this, the feed at the bottom left might be fake data, or the green/blue/ gray stages bar might be fake, but we might sprinkle REST API data in for the record name, account name, and some related list records.
66. Another example might be all the data and graphs might be faked out except for the list name, Opportunity Name, and Account Name columns.
67. MUCH more realistic user testing Designers can see truncation issues Really test-drive multi-page workflows Can still combine fake data What we find is that when we do research, the users being tested focus more on the new workflow they’re being presented. Previously when we had all sample data on the screen, the users would have to slow down to figure out what sample data was in front of them because it wasn’t familiar.
68. THE BETTER TOOLBOX: PART 2 • MOTION AND ANIMATION Finally, one of the cool things we do with interactive prototypes is test motion and animation. Those lessons are now baked into the Design System as a style guide.
69. When you think about user interfaces most of the time we are only considering the flat screen in front of us, an X/Y grid orientation.
70. COMMONS.WIKIMEDIA.ORG/WIKI/FILE:SPACETIME_CURVATURE.PNG But, with animation we have to consider that we are actually dealing with a third dimension of time. We must find a way to explain to the user what’s happening to their UI with animation. Also, we must find a way to specify this experience for our production engineers.
71. COMMONS.WIKIMEDIA.ORG/WIKI/FILE:STORYBOARD_FOR_THE_RADIO_ADVENTURES_OF_DR._FLOYD.JPG One way we could attempt to communicate our UX animations to our production engineers is via a storyboard. And in the design stage we find ourselves doing these kinds of things. But to actually get a sense of how to describe an animation to an engineer this isn’t a great way.
72. DESIGNS IN MOTION: PROTOTYPING SALESFORCE'S IA So we developed a whole set of Motion guidelines, logical spatial system, and vocabulary. If you go to https:// lightningdesignsystem.com and navigate to Design > Motion, you can see this page.
73. Logical framework Dimensions of time and elevation Common vocabulary Common animation design language
74. DESIGNS IN MOTION: PROTOTYPING SALESFORCE'S IA We decomposed the topic into 3 key principles: timing grid, elevation spatial system, and effects vocabulary.
75. DESIGNS IN MOTION: PROTOTYPING SALESFORCE'S IA There are also 4 types of animation, so we can tell engineers if we’re affecting an object entering/leaving, or if it’s already on- screen, or if it’s an object that’s morphing over time like a form that grows/shrinks.
76. DESIGNS IN MOTION: PROTOTYPING SALESFORCE'S IA We also specified that objects on the screen should have a sense of mass and permanence. Just like the 12 principles of animation in the classic Illusion of Life, we want our screen objects to feel physical. They must speed up/slow down gracefully. They must feel solid.
77. DESIGNS IN MOTION: PROTOTYPING SALESFORCE'S IA The Elevation system creates a logical framework to think about light and shadow. Higher Z numbers mean an object should look like it’s flowing over another object; lower Z numbers should make it feel sunken. We put those values into the Design Tokens to help create shadows that look like a single global light source was directly above the user’s monitor.
78. DESIGNS IN MOTION: PROTOTYPING SALESFORCE'S IA Timing tokens create a grid of time. We specified 0.1 seconds as the basic grid unit which translates to 6 frames at 60 frames- per-second and 3 frames at 30-frames-per-second. It’s thus possible to synchronize motion in the browser to video that might have been rendered.
79. DESIGNS IN MOTION: PROTOTYPING SALESFORCE'S IA Finally, we have a whole library of effects that have specific names. This helps specify the exact animations we want our engineers to do in a consistent design language. The production engineers can then look at the visual effect of the animation and then examine the source code that made the animation.
80. BUILDABLE BY TEAMS 3X/YEAR MAINTAINABLE LONG-TERM LAYOUT DATA CONTROLS COLOR CHOREOGRAPHY INTERNATIONALIZATION / LOCALIZATION / RTL DEVICES ACCESSIBILITY And so, that’s a tour of how we use interactive prototyping to help us get to better design decisions in a realistic, high-fidelity way.
81. THANK Y U. amy.lee@salesforce.com @amster