The salesforce.com User Experience (UE) team is made up of many complementary roles, including: User Researchers, User Interface (UI) Designers, Usability Analysts, Visual Designers, and Accessibility Experts. Each of these roles has a distinct function within the product development process. Here’s a little about each role:

User Researchers: The User Researchers on our team provide up-front, early research about customer needs. They may conduct site visits at your workplace to learn more about how you use Salesforce in your day-to-day environment, conduct in-person focus groups, or other activities to learn more about you. The information they collect is used to inform the product design process.

UI Designers: Salesforce.com’s UI Designers work closely with their product teams to design the screens that you interact with on a daily basis. Depending on the phase of the project, you’ll find UI Designers sketching, mocking up screens and process flows, or prototyping an interactive design for you to play with in usability testing.

Usability Analysts: The UE team’s Usability Analysts work to provide product teams with unbiased customer feedback. If you’ve ever participated in a usability study, you’ve probably spoken to them over the phone during one of our many usability tests. In these 1:1 sessions, Usability Analysts rely on your feedback to ensure that the product designs are easy to understand and use.

Visual Designers: We also have talented Visual Designers on our team. Responsible for the aesthetics and overall look-and-feel of Salesforce, these designers specialize in color selection, iconography and layouts.

Accessibility Experts: The UE team also has Accessibility Experts who provide the product teams with best practices and recommendations to ensure that our products are accessible to everyone, including those with disabilities (often referred to as 508 compliance).

So, that’s our team! It’s a pretty great group of people all focused on making our users successful. If you’ve participated in any of our usability tests or other activities, we’d like to thank you. Your participation is key to our success. If you’d like to learn more about participating fill out this quick survey or email us at usability@salesforce.com.

The UE team is still growing, so if you’re a User Experience professional interested in joining us, please check out the jobs listed below:

Sr. Visual Designer
http://www.salesforce.com/company/careers/locations/a0800000000Ab4bAAC/a017000000GuK4M.jsp

Sr. UI Designer
http://www.salesforce.com/company/careers/locations/a0800000000Ab4bAAC/a017000000GvgLo.jsp

Usability Analyst
http://www.salesforce.com/company/careers/locations/a0800000000Ab4bAAC/a017000000Gvfu0.jsp

Usability testing helped us create an easier to understand, more user-friendly solution.  We used an iterative process and conducted 2 rounds of usability testing (with both admins and sales users) to help improve this experience. User feedback was crucial in helping us improve the UI, starting with an initial design (see #1) and resulting in the final design (see #3).

One of the most challenging design issues was how to clearly communicate to users what Contact information was coming from Outlook and syncing to Salesforce. We made many changes to the dialog to help convey this information. Refer to the letters in the image above to help identify changes.

Banner and Icon Changes:

-    (A) The salesforce-like visual styling of the banner (see #1) was misleading since the contact was coming from Outlook, not Salesforce. Version #2 restyled this banner, and the final Version #3 incorporated the Name/Company/Manager information as part of the Outlook contact information. These changes helped users better understand the flow of information between the two systems.

• “What am I associating here again? I thought the contact hadn’t been added to Salesforce yet, but the big purple banner makes me think the opposite… I’m confused.” – Anonymous

-    (B) Salesforce.com icons were also included in the Status section to visually show that Contacts were being associated to Salesforce.

Other Key Changes:
-    (C) Change from dropdown for Association Type to Tabs
-    (D) Help text added
-    (E) Associate button label changed to ‘OK’
-    (F) Quick Create button placed next to Search

After multiple iterations, our final design (#3) tested extremely well with users in lab. This was just the start – more exciting changes coming soon to Outlook integration!

Stay tuned for more stories about how you’ve impacted the user experience of Salesforce!

Would you like to get involved in our user experience program to help improve salesforce.com? Fill out this quick survey or email us at tester@salesforce.com.

For those of you who weren’t able to attend, you can watch the “Ready to Rock Your Productivity?” session online to get a sneak peak of where we are headed.  Key highlights include:

Simple Email Logging
No more several step processes in Outlook to log a single email.  With 1 click, your email will be sent and logged in Salesforce. It’s that simple!

Set-it-and-forget-it Synchronization
We will seamlessly sync your data behind the scenes every 10 minutes without interrupting your work. Sync status and other options will be available from the new system tray icon.

Administration in the Cloud
Our new integration will be easy to roll out to your organization.  Administrators simply create one configuration for each specific user type or group of users.  They can set which objects can be synced, which direction(s) they’d like data to flow, set conflict resolution, write data set filters, and more.

Your feedback is important. To share your ideas and get a sneak preview of future functionality, please sign up for usability testing.  We look forward to speaking with you soon!

New Printable View and Find features released in Winter ’09

For Winter ’10 our priority was to release Printable View and complete R1 (the read-only phase of the project). In addition to Printable View, we decided to tackle additional problems based on user feedback from IdeaExchange such as being able to search for terms inside the process, and being able to easily navigate large processes with navigator and zoom controls. In terms of the design process, it was easier and more efficient for us to create mockups based on the Flex build instead of creating another HTML prototype, which simply wouldn’t be scalable going forward with all of the additional features we had planned.

Once the new features were in a working state we scheduled another round of usability tests. One of the things that we experimented with was the location of the Find bar. In some of the earlier designs we placed it at the bottom of the screen, similar to how Firefox’s Ctrl+F works. In the user tests we found that users had trouble discovering the feature so we decided to put it in the top right-hand corner instead, which is another conventional and more discoverable location for Find controls. Overall the test results indicated that users loved the ability to use the process visualizer to facilitate documentation and communication, and we felt confident that we had successfully completed the read-only phase of the project.

“So if I can use this as documentation, right off that bat that would be an improvement for me… It writes better than I could write a flow chart. It totally makes sense… I really, really like this stuff.” – salesforce.com Administrator

Drag and drop workflow actions into the diagram.

Edit or remove diagrams directly in the visualizer

Beginning in the Spring ’10 Release we will start working on introducing edit capabilities into the visualizer. Our long-term vision is to eventually replace the current Approval Process UI in setup with Flex technology, which includes the act of browsing, creating, and editing processes. Obviously this is a significant undertaking, and we have found that setting a realistic scope of features that can be tackled within a release has been key for both team motivation and end-user adoption.

The first set of functionality that we plan on building is adding and removing workflow actions from the process. To do this we plan on adding an “Action Sidebar” which has a sortable, searchable list of workflow actions that the user can drag and drop into the diagram. We also plan on being able to remove and edit diagram elements through a toolbar that appears when you hover over an item. Similar to the previous release, we are using the most recent Flex build as a base for mocking up new functionality.

To make sure that we were heading in the right direction in regards to both utility and usability, we ran several concept validation sessions with salesforce administrators. In these sessions we presented the mockups and asked if they made sense, and we also asked participants to prioritize features in our backlog to get some insight on what we should work on first. The top 3 feature requests were finding and replacing items in the process, reordering steps via drag and drop, and timeout / reminder settings (e.g. reject the request after 3 days pass or remind approvers of pending requests every day).

“[Referring to Timeout Settings] I’ve actually had to try and come up with a workflow rule to do exactly this and I haven’t been able to do it, so from a feature function set that is definitely up there, and that’s a great thing – there’s a workaround for the PDF, but there isn’t one for the timeout” – salesforce.com Administrator

Going forward we definitely plan on conducting additional user tests as we continue to work on the Graphical Approval Process Editor feature. If you are interested in participating in usability tests fill out this quick survey or email us at tester@salesforce.com. If you are currently using the Approval Process Visualizer feature and have ideas on how to improve it, make sure to let us know by submitting them to IdeaExchange!

Looking at this year just from January 1st to November 1st, we’ve spent over 800 hours testing our features with customers; that’s over 33 days! In total, 433 of our customers from 357 different companies have participated in 108 of these sessions.

If you have participated in any of these sessions, we’d like to thank you.  We hope that these numbers are able to convey how important your feedback is to us. If you haven’t yet participated, but are interested in joining the hundreds of customers that have helped us make our product better, please sign up using the link below.

Participate as often as you like, frequently or infrequently, it’s up to you. Most studies last an hour or less and you don’t even have to leave your home or workplace – just be near a phone and on a computer connected to the Internet. Because we know your time is valuable, in return for your help we’re happy to provide a gift certificate to Amazon.com (usually $50 or $100 depending on the study).

HTML/JavaScript Prototype

Due to the visual complexity of the project, it was important to build and test an interactive prototype before starting any development work.  We wanted to make sure that we were successfully translating the traditional detail page into a diagram that was navigable, scalable, and logical to users. The functionality of the prototype also helped the team decide which technology to use to build the feature, which ended up being Flex due to its wide adoption and ability to easily generate dynamic graphics.

The original prototype was created using HTML and JavaScript and included basic interactions such as hovering over an item to see its details, clicking to expand and see individual actions, Printable View, and an intermediate solution for editing components in the diagram. The initial idea was that double-clicking an item would open it in the traditional salesforce edit mode in another window, however when we tested it with salesforce administrators we found that this was confusing and decided to wait on editing capabilities until it could be done completely within the visualizer.

“I would love for it to look like your inline editor, instead of putting me on this other page… that seemed a little clunky to jump in and out of the graphical version.” – salesforce.com Administrator

Summer ’09 Beta Release in Flex

The other finding that came out of the first round of testing was that Printable View was a huge success. Unfortunately due to time constraints we were unable to include it in the Summer ‘09 Release. We knew that Printable View was necessary in order for the feature to be complete, however we also felt that the work we had done to visualize processes provided enough value to justify a Beta release for all users. In order to receive additional user feedback we placed a link to salesforce’s IdeaExchange in the header. This has proven to be a successful method of communicating with our customers, and will be included in more features down the road!

In Part 3 we will discuss the final release of the visualizer and the edit functionality we are currently working on.

For a long time we’ve understood that creating approval processes was often a tedious and complicated endeavor. For example, it took 5 steps to define a process, 3 steps to define an approver, and numerous clicks to add workflow actions. Furthermore, the detail page layout (shown left in the graphic above) made it difficult to troubleshoot, find process elements, or understand the flow of the process. The first thing we did after we decided to redesign this feature was talk to our users to better understand how they would ideally like to create approval processes.

In one of our earliest activities, we asked a group of salesforce administrators to construct a hypothetical approval process using either a text-based or graphic-based tool. Not surprisingly, we learned that diagrams played a huge role in conceptualizing, planning, and communicating approval processes. We also discovered that it was quite common for a salesforce.com administrator to be given a diagram of the process they were asked to implement, which they had to then translate into our largely text and form-based interface. On the flip side we found that some administrators were asked to create a diagram of the process they just implemented in order to make it accessible to others. Clearly, we had a great opportunity to make these tasks easier by allowing administrators to graphically construct, visualize, and export their process for communication purposes.

Taking the Middle Road
One thing we noticed in our early activities was that our users varied on whether they felt more comfortable creating approval processes in a linear fashion (e.g. fleshing out the details for each approval step before moving on) or in a top-down manner (e.g. first specifying the number of steps, then setting the approvers, then adding actions, etc). For this reason, we decided that an early requirement for the design would be to let users quickly and successfully construct their processes in either style. Another early investigation was how strongly we should adhere to Business Process Modeling Notation (BPMN). BPMN is a specification for modeling business processes that provides standards for how to represent process elements graphically. In our early usability testing, we found that although some of our users are familiar with this notation, the majority of our users were confused by some of the more specific graphical conventions. For this reason, we chose to adhere to the more common graphical representations like Events (circles), Activities (expandable/collapsable boxes), and Gateways (diamonds), but not to introduce more complex elements like Swimlanes.

From Concept to Implementation
Although we had done enough early investigations to achieve a more complete view of the existing editor’s shortcomings and how our users preferred to work, we still had a long road to travel. We needed to test and validate our design direction, figure out what technology can be used to support the functionality our users wanted, and plan how to appropriately split this feature across multiple-releases. In Parts 2 and 3, David and I will talk about some of the designs we considered, obstacles we faced, and insights we gained while creating the Summer ’09 read-only Graphical Approval Process Visualizer and the upcoming fully-featured Graphical Approval Process Editor.

At Salesforce we’re obviously big fans of cloud computing so it should come as no surprise that we’re also big fans of Google Docs, the online office productivity suite from Google. Introduced into our work environment late last year, Google Docs has rapidly supplanted Microsoft Office as the solution of choice for office documents. Since its arrival it has been unclogging inboxes and facilitating collaboration across the organization.

To demonstrate the power of Google Docs, let’s imagine a fairly typical office document scenario: You’re working on a big presentation for the executives. There are multiple contributors and each person is assigned a portion of slides in a large slide deck. One “lucky” person is elected to merge all of the slides together. As the project progresses, managing the edits and the merge process soon consume a huge percentage of the team’s time as they email multi-megabyte files back and forth.

Recently, the Salesforce User Experience team was faced with the prospect of just such a scenario. We began a large collaborative design effort to create an extensive set of “paper” prototypes. When all was said and done over 200 slides were produced by 6 primary contributors (and at times we had up to 10 contributors). Using traditional software this multi-contributor document would have been a recipe for disaster but, thanks to Google Presentations, we had the power of cloud computing on our side. With a Google Presentation all contributors were able to edit a single document online at the same time. No merging of slides. No emailing multi-megabyte files back and forth. One central location to collaborate, contribute, share and capture feedback in real time. We were even able to allow multiple key stakeholders to view the document while it was being edited by multiple contributors, providing an unprecedented level of transparency and collaboration.

Through the course of the project we put some extreme demands on Google Presentations and it performed well beyond our expectations. Thanks to Google Docs and cloud computing we were able to spend more time innovating and less time wrestling with technology and logistics. Hooray for the cloud!

Do you have a success story you’d like to share? We’d love to hear it! How is your company leveraging the power of Salesforce in combination with other cloud services?