00:01This is a session that we originally gave internally within E-s-r-i, Esri, to talk about how we put one of our applications together…

00:10…and that application was Business Analyst Online.

00:14It's an application that we developed for the commercial real estate industry, mainly…

00:19…to help people figure out where to locate their stores and optimal locations.

00:26So it's a web-based application.

00:28People really liked it, so we thought we'd give a kind of internal presentation of how we put it together…

00:37…and it was very successful, so we thought we'd repeat this session for all of you here at the UC, so thank you for coming.

00:45My name is James Killick. I'm joined by some of my colleagues here…

00:49…who are going to be doing a lot of the presentation today…

00:53…Sooria Jeyaraman, David Dodge, and Garry Burgess…

00:58…and we may have one more presenter who's running a little bit late, so if that person doesn't show up, we'll fill in.

01:07So let's start by talking about what we're going to cover today.

01:14The first thing we're going to cover, just to kind of give you some background as…

01:17…just a quick background into Business Analyst Online, the web application itself.

01:22It's called BAO for short.

01:25That will give you some context for what we're going to talk about today.

01:31The second thing that we're going to talk about is the whole concept or methodology of user-centered design.

01:40This is a process that's been around for…it's…

01:43…actually, the term was coined back in the 1960s, I think.

01:47And we adopted this methodology for creating the product.

01:51And then the last thing we're going to talk about today is how…

01:55…we used the methodology of user-centered design to create BAO…

02:00…and you're going to hear a lot about the processes that led up to the development as well as the development itself.

02:07And we have representatives here from the product management team, the design team, and the development team…

02:16…and we also have another gentleman who couldn't make it today who's going to cover…

02:21...we're going to cover for him to talk about how we did usability testing.

02:26So that's what we're going to talk about today.

02:28My name is James Killick. We're going to kind of do a little bit of an intro to each one of us so you understand our background.

02:37I'm the lead product manager for Business Analyst.

02:40You know, I have a technical background. I've been doing this for a little bit, and my role is product management.

02:50The other folks on the team, we'll introduce as we get to them, but what we thought we'd start with, we do…

02:56…start by doing is giving you a quick introduction to Business Analyst Online.

03:00And let me just kind of give you some…

03:09I think we're going to do the demo in a second. Yes. We're going to do the demo in a second.

03:12So let me give you a little bit of background about what led up to this design and this product.

03:18We actually had a Business Analyst Online product back in 2008.

03:23We were getting a lot of criticism about the product being hard to use.

03:26We got lots of call reports.

03:29It was built on an older technology platform.

03:32We hadn't refreshed the product for quite some time.

03:35So basically, it was pretty much a Web 1.0 product, and we wanted to build a new one.

03:46And in doing so, this is what we put together. This is Business Analyst Online 2.0, if you like.

03:54It's a solution built on the ArcGIS platform, and when we set out to build it, we wanted to…because the users for…

04:02...this application were going to be general users who were used to using consumer web mapping applications…

04:09…they weren't going to be GIS experts.

04:12We wanted to make this as easy to use as the best consumer mapping applications out there.

04:20So we really set that bar very high to make it as easy to use as the best consumer applications or consumer devices.

04:28The vast majority of the users are business users. They're not GIS specialists.

04:33They're people like commercial real estate brokers, so we had to make it really, really easy.

04:40And when we launched it, we got some great reviews. Here's one of them.

04:44"The new BAO looks fantastic." We did a wonderful job. Yay.

04:47We were very excited about that. You know, and then they said, you know…

04:51"Thank you for the stunning overhaul. It has all the functionality that we needed and more."

04:59So that was pretty cool.

05:02So before we go further, let me introduce another member of our team, who's at the back of the audience.

05:07She's going to come up and give you a quick demo of BAO. I'd like to introduce Brenda Wolfe.

05:14If you were here on Monday, you would have seen Brenda onstage.

05:17She gave the demo of Community Analyst, which is a sister product. So welcome, Brenda.

05:24Brenda's background is, she spent a lot of years at SAS, the folks that do the statistical software.

05:34She was a product manager there. She came to Esri about four years ago, five years ago, four years ago.

05:42And her role in the organization is to do requirements definition and user definition.

05:48So I'm going to hand it over to Brenda, and we'll cover it from there.

06:03Good morning. Does anybody here use SAS software?

06:11OK, I don't, I'm responsible for the good user interfaces there, like not…

06:16When you say that, it's like SAS is notoriously bad for its interfaces.

06:19But we did do high-performance forecasting in Forecast Studio, which was my product, so…

06:30No browser? No web connection? Are we connected?

06:37We're having a little browser problem.

06:52OK, we're good now. Looks like it's connected. It was just that line. Bear with us. Let's try that one more time.

07:23There we go. Alright. So I have to toggle?

07:36Go ahead.

07:37No, but where's the…oh, what'd you do?

07:42Alright.

07:51Alright. Now I can't see, but that's OK.

07:55Are you OK?

07:56I'll drive it from up there. Alright.

08:28Alright, so you can see the home screen loading.

08:30So when we were interviewing people for Business Analyst Online…

08:35…pretty much what you found was they were very busy, very harried.

08:38They just wanted to drop a location on the map, run a report, you know, put their area around it…

08:43…get a report and get out.

08:44So that's pretty much how we streamlined the user interface, and we started with Select Your Location.

08:50Find a location. This was the primary workflow, so we'll do the good, old Esri address.

09:06So we made it very workflow driven, so it's like next, next, next.

09:11We also placed menus right where the eye would go, so as soon as you dropped that pin, your eye goes to the pin.

09:18So we made optional workflows there.

09:21And add your rings, drive times, or donuts.

09:23Most do a three…is it one-, three-, five-mile ring? Sorry. Usually the defaults are one, three, and five.

09:33James has, or I've changed my defaults. Apply. Next. And step one, step two, step three.

09:45And then what do you want to do, get reports, and then pick your favorite report, and you're on your way.

09:52So we'll sort by favorites, add a report, run, and you're out.

09:59We also found that users had their favorite reports they would run again and again.

10:02So we let people tag their favorite reports, run favorites, and they're out.

10:05So like, in a few minutes, they, they have the information they need…

10:09…like less than a minute, you can get the information you need.

10:11So that was the quick, easy workflow.

10:13I think it took longer to get the browser up than it actually takes to get a report…

10:17…but that's the quick and easy demo. Back to you.

10:23Alright, so let's close that out. So it's back to the slides, so we did the demo.

10:33Alright, so how did we put all this together?

10:37The way we put it together was using a process of user-centered design, and as I mentioned…

10:42…this is a methodology that's been around since the 1960s.

10:47It was actually originally coined in 1966…

10:52…and user-centered design tries to optimize the product around how users can, want, or need to use the product…

10:59…rather than forcing the users to change their behavior to accommodate the product.

11:05So it's built around the user rather than built around the product.

11:10Many organizations have adopted user-centered design, companies like Microsoft, Oracle, Google…

11:17…SAP, QUALCOMM. Many, many companies have done that.

11:20And it's been the topic of many papers at design conferences, et cetera, so…

11:26…if you do a Wikipedia search on user-centered design, you'll find a lot of information about it.

11:31You'll find a number of not only papers but diagrams that describe the whole process of user-centered design.

11:38This is one of them. It happens to be one that came from SAP. We adapted it just a little bit.

11:45But you can see from this diagram that there are three key elements to user-centered design in blue below.

11:52There's a user research area, there's a user interface design area, and then there's a usability area, or the usability testing area.

12:03And you can see from this diagram, it's circular, right? There's a lot of iterations that you can see in this process.

12:11So it's not, it's very much not a water flow process. It's very much an iterative process.

12:20So it's about research, understanding your users; that's where the user research comes in.

12:28Once you've done a design, it's about evaluating those designs to make sure it works.

12:34As I mentioned, it's cyclical, it's iterative, it's collaborative. It works very well in a Scrum environment.

12:40We develop Business Analyst Online using a Scrum process.

12:44And it embraces innovation. It doesn't take innovation out of the picture.

12:50So you can see, that's part of the diagram.

12:53And as we talk more a bit later on in the presentation, we'll talk about how development is involved.

12:57Development is actually involved right up front at the very beginning and throughout the process.

13:04It's not, you know, create a specification, create a UI design, test that UI design…

13:08…and then throw it over the fence to development.

13:11It's actually involving development from the get-go.

13:15At this stage, I'd like to introduce another member of our team, Sooria.

13:20Sooria is our lead interaction designer for Business Analyst, and his background is in human factors engineering.

13:29And he's going to talk to you a little bit more about user-centered design…

13:32…and then we'll get into the process about how we used user-centered design to put BAO together.

13:40Thank you, James. Alright, so, before we get into the theory behind user-centered design…

13:51…let's see what actually usability is.

13:53Usability, it sounds like a very simple term, but it's a combination of multiple factors.

14:00How easy is the system to learn; like, once learned, how easy the user can accomplish the task…

14:06…and once learned, how easy the user can do the tasks the next time they come into the system.

14:11Oops. Sorry.

14:14Not a usable mic.

14:16Looks like…

14:22And, how often the user get into error and how does the system give options for the user to…

14:29…come out of the error quickly and in the end, how satisfied are they with the system?

14:36Usability is generally the ease of use, and user-centered design is the methodology to achieve usability.

14:44So let's move on to what user-centered design is.

14:47User-centered design is not just one technique that you can point at; it's both a philosophy and a process.

14:55It basically set up methods and techniques where you put the user in the center of your design…

15:0025

15:02…in the center of your methodology.

15:05You involve the users right through the development process to achieve high-quality user experience.

15:10It's a philosophy, as I mentioned, and also a process where it focuses on all the cognitive factors of the users.

15:21So you may have already seen this dialog and this screen, and you'll be seeing it again and again over this presentation.

15:35And I'm going to explain each one of them a little bit in detail. Thanks.

15:42So the first step is the user research. Understanding your user is the first very key step in the process.

15:50Knowing your target audience and knowing how they work with your system is a very important process…

15:56…that helps you understand the key user needs…

15:59…and also helps you understand how the user's accomplishing these tasks in the current system…

16:04…so you can make improvements to the current system.

16:07There are a lot of ways to do this. Some of the popular ones are the interviews, where you talk to the user…

16:14…and try to get the feedback from them…

16:16…and also try to observe the user in their own environment so that you'll know…

16:20…how they are doing their tasks currently and what are the distractions that they might have during their daily routine.

16:29The second part is the UI design. This is my area, where you go…

16:35…once we learn about the user, you understand the user research , and you understand the needs of the user.

16:40But how do we translate those needs into a user interface, where the user will be completely satisfied with?

16:47Again, there are a bunch of techniques to do this, and these are some of them.

16:51These are some of the things which we do in great detail even before development starts, you know…

16:58…to get a high-quality user experience.

17:00And the last and the key step, again, a key step is the usability testing, where you validate your designs…

17:06…and validate your concepts against real users to understand whether you are going down on the right path.

17:13Heuristic evaluation could be done internally, like you can…you might show the design against…

17:18…a set of heuristics to see whether it matches your standards.

17:23And a more formal usability testing is where you write down written scenarios…

17:27…and let the user walk through those scenarios.

17:30We'll cover these in detail, each one of them in detail later.

17:35So these are the building blocks, and as James mentioned, these are an iterative process.

17:40You again and again iterate it until you get what you want.

17:47So user-centered process is not something which could be applied just for software.

17:51It could be applied for anything, basically anything you interact with.

17:55I'm going to show you some examples where this has been applied, or not applied in the real world.

18:01So let me get into some quick examples.

18:04Let me start with something which is used in a day-to-day activity, like pumping gas in a gas station.

18:12Previously, this used to be a common interface in a gas pump, where you got to mentally think which…

18:20…this was a two-step process. You've got to think which one you want, like which grade you want…

18:24…then you had to press that red button to get started.

18:28People are not finding that red button, so they added…

18:31…they thought they were helping the user by adding more information by adding that Push to Start text there.

18:38Again, the better way to do would be something like this, which they eventually…

18:44…these designs came out where the user doesn't have to think much, just press on, make the grade itself as a button…

18:50…and the user can just start the process.

18:52So this is one simple example of where the user could…

18:55…where the user-centered design process has helped in achieving an easy process.

19:02The next is another day-to-day activity, like…

19:06…the confusion here is which burner is mapped to which knob.

19:11You know, like, this leads to user frustration.

19:13Again, a better way to do this, to map it correctly so that the user doesn't have to think much before turning it on.

19:21These are some simple examples, some day-to-day examples.

19:25Now, looking more into the web, this was something which I found somewhere, I don't remember now, but…

19:31…you can win the ultimate road trip.

19:34You just don't, the text boxes just don't tell you what you've got to enter there, your name or e-mail…

19:40…but you can still win the ultimate road trip when you…

19:46This is, again, a very popular and expensive watch store. This is their home page of their watch store.

19:52The only problem is, where do I start? Like, these things look like images.

19:58I don't know whether I can click here, I don't whether I can click here.

20:00These little elements are the ones where the user can click and that'll give them options to navigate through the page.

20:08Again, this, as James mentioned, these are things which are being used by many big companies.

20:15Even companies like Google, they do this process again and again to simplify even a simple workflow.

20:21So this is an example of their advanced search, the previous advanced search…

20:24…and how they have simplified it from that to this is based on how they are observing the users…

20:32…and how the users are using their system.

20:35Anybody who talks about user-centered design want to show this page…

20:40…to make them understand that you can achieve high-quality user experience by a simple text box.

20:45User-centered design could also be about words, you know…

20:48…like you've got to make sure the user understands what you are trying to say.

20:52This error says…the title and the content contradict each other, you know. A network error has occurred…

21:01…but the computer Internet connection appears to be online, so what is the user supposed to do here?

21:08So these are just general, basic how user-centered design is achieved, is applied in the general world…

21:14…but how would we apply this in building BAO?

21:18We're going to get into detail on that.

21:22For that, the first step is the user research. Let me hand over back to Brenda.

21:38Alright. Good morning. So, as a product manager, I'm working with the team.

21:45My one basic rule or my first rule is to know the user or really know the customer or the market.

21:52So it's a little dark in here, but, for example, how many of you have an Internet fridge or a Net fridge?

21:56OK, I'm not seeing any hands go up. No one has a Net fridge? Really? Net fridge?

22:00So my job in the world is to prevent Net fridges from happening.

22:08This is an Internet fridge. It was developed by LG. LG is a company that makes everything…

22:13…laptops, I mean, any kind of home appliance, including refrigerators.

22:17And they thought, "Well, we've got laptops, we've got refrigerators; what could be better than putting the two together?"

22:23So the problem is that there's not really a great use case here…

22:26…and if you look at the height of where that laptop screen is, you would have to like squat…

22:32…or crouch or bend to use it.

22:35So it was just pretty hilarious.

22:39So that kind of failed, and it was very expensive.

22:41It was like 8,000 bucks or something.

22:42So later, after that flopped, another company, I think it was Whirlpool, thought it would be brilliant to bring it back.

22:48So this is like Son of Net Fridge, and they've raised…they got a little smarter…

22:55…they raised the screen up, right? But it still didn't really go over well with users.

23:02So this is actually a quote that I love, a very snarky but apropos quote for Net fridge…

23:09…and actually, I need to add a slide here, because James pointed out to me that I think there is a Son of Son of Net Fridge.

23:16There's a third iteration of Net fridge coming out, so eventually they'll get this right.

23:23Here's another example, antennagate, with the iPhone, where they kind of forgot, they use…

23:28…it's like a little minicomputer but they sort of forgot the part where you want to use it as a phone.

23:34Of course, Apple recovered. It just caused them lots of embarrassment, right?

23:39And I think somebody was probably fired over that little thing.

23:43And then we all had to get bumpers and craziness, right?

23:47So, to avoid Net fridge and these kind of things, the first thing we do anytime we develop a product…

23:52…and what we did for Business Analyst Online is we interview our prospective customers first…

23:57…our prospective audience, and we do…I try to start, as a rule of thumb, do at least 20 interviews…

24:02…of who you anticipate will use this product just to get a sense.

24:06And when you do this, you find some pretty interesting things.

24:12So when we interview, what we're probing for is their entire life experience, right?

24:16We want to put ourselves in their shoes. What's their day like? What's their workflow? How busy are they?

24:20What environment are they in? And basically, what are their pains and frustrations?

24:25Because if we can solve that, then we're ahead of the game.

24:29Another thing that jumps out from these interviews is that you'll start to see that there's a kind of person using your product or…

24:34…a kind of person, and that's what we call the persona, and here's one example of a persona.

24:41And I never got what a persona was really deeply until I started working at Esri.

24:47SAS has personas, too, but they all pretty much look like me, an analyst.

24:50But when I started working at Esri, James put me on Map Studio…

24:54…which was a product designed for graphic designers to create maps, and they worked in the newspaper industry.

25:02So I got to go to this conference and really observe these users, and they were very hip, very technical, very savvy.

25:08They all used cameras, they were young, they all had the cool glasses, just…

25:15…you know, they used really small font, high resolution.

25:18You could hide the buttons on the screen and they would find it.

25:20You know, that Movado watch ad, they would probably have that understood in 10 seconds.

25:25Contrast that with the persona that we found for Business Analyst Online when we started looking at…

25:31…the real estate crowd that was using that; very different audience, slightly older, huge…

25:39…you know, like the resolution, it was just like…was it large resolution?

25:43What am I looking for? You know…

25:44Buttons on their screen were blown up real big.

25:47They thought of themselves as individual, even though if you went out to all their websites…

25:51…they pretty much look very similar as far as their photos, so that was a much different, much different persona…

25:58…and they were, I just want to get in and out.

26:00They don't care to read a manual, they don't care, you know, they just had a much different view.

26:07So when we get all these interviews and you kind of see the type of person that's coming together…

26:14…we create a persona that is fictional but yet typical of who is using the product…

26:22…and they should embody the characteristics of the user, kind of have a little background education.

26:27What do they do for hobbies? How would they use this?

26:29So Larry Landhawk was our real estate persona, and it's great if you can give them a cute little name because…

26:35…then, you know, it's fun to use, you know, developers…Larry Landhawk.

26:40In this case, we had a copersona, we had two primary personas, and the other one was Peggy Printsalot…

26:45…Larry's assistant, who was left to run all these reports about real estate sites and do site selection, but…

26:51…she too was not a software-savvy user.

26:56Rule number one, when you call a user, just write up the call reports immediately.

27:01Get that down on paper.

27:03And then when we have all these call reports, what we do is we mine those for problem statements…

27:07…and we sort them based on frequency.

27:10So even if you are calling in, we still do this today, even after we've developed the software.

27:13If you call in with a problem or if you write us an e-mail, we're looking for those problem statements in use scenarios…

27:18…and we are actually categorizing those and ranking those…

27:21…and that's how we determine how the features get ranked and prioritized within there.

27:26So here are some examples for the problem statements we saw when putting together Business Analyst Online.

27:32So show me some areas near public train stations, where educated people are employed and have housing…

27:39…over $300,000.

27:41I like this location; find me something demographically like it.

27:44I want to enter demographics that are key and then for the application to find high concentrations of those areas.

27:52So those are things that went into the Smart Map Search feature, for example.

27:57And requirements, always, if you're writing requirements…

27:58…it's always the system shall or the user shall be able to do x, right?

28:04So…and it does it, usually…well, when I write the requirements, it's not at all about how.

28:09That we leave to the development team. I'm all about what.

28:11What can we, what should the system do, what shall the user be able to do.

28:14So for example, Larry shall be able to select multiple criteria by which he can filter the map.

28:20So you can kind of see how like Net fridge didn't really follow this, you know?

28:24The user shall be able to do what? I don't know.

28:29And then when we, we put it all together in what's called a product requirements document.

28:33In this document, of course, we have the nitty-gritty requirements…

28:36…the user shall, the system shall…

28:37…but we always put it in context of the use scenario, so what is the user trying to achieve or do?

28:43So we have the requirement, how often users are hitting that, what the overall objective or goal is…

28:50…the problems, use scenarios, and then again, the requirements.

28:53So that's how we put it in context.

28:55And then when we plan, we have a quick, easy summary table that we can sort and filter and…

29:00…negotiate on with developers.

29:03So the deliverables from the user analysis part of the process are call reports, problem statements…

29:08…requirements, use scenarios, and personas.

29:11And if you skip any one of those, that's when you can end up with something such as Net fridge.

29:21…you can do all this work and you can throw something together into a user interface…

29:24…but if it's not usable, forget about it. It's like it doesn't even exist. You're pretty much wasted your time.

29:26So, and rule number two, which leads us kind of into the next part, is…

29:29So, with that, I will turn it back to Sooria.

29:34Just use this mic.

29:35OK.

29:43OK, so there are, I'll get into the details of what the UI design.

29:48There are two components to the UI design. One is the interaction design, which you see at the top.

29:53That defines the actual layout…

29:56…the screens that the user needs to navigate to achieve a particular workflow and stuff like that.

30:01Like, it's actually like a blueprint of a building.

30:05And the second part is the visual and motion design. David will cover that.

30:09That's about the emotional connection the user makes with the application, when they see the actual application.

30:16So, from the call reports and everything, we got the persona. We got what the user needs.

30:21So how do we translate this into the UI requirements?

30:25One thing which was very clear, which was one of my favorite tagline is…

30:30…which we understood after these call reports is, I'm not the user or…

30:34…anybody I interact with in my company are not the users.

30:38The actual users, Peggy Printsalot and Larry Landhawk, have complete different sets of goals…

30:43…and complete different sets of interactions that they have with the application.

30:48So I use this tagline whenever I have a negotiation with the developer.

30:52Like, you are not the user, the user is completely different…

30:55…and show them a picture of Larry Landhawk and Peggy Printsalot.

31:01So this is again one of the key graphs which we refer again and again.

31:06This gives you in detail the level of help the user needs within an application.

31:14So if the users…if the user knows what they…what they are doing…

31:19…and if it's a frequent task, it's better the user take control…

31:23…and if it's an infrequent task where you think the user might get into error and easily get into error…

31:29…then it's better that the application lead the user rather than them leading it.

31:33On the contrary, the other two quadrants are bad.

31:36Like, when they know what they want, you don't want…

31:40…they don't want the system to take care of what they want to do…

31:43…and the same with the other, with the infrequent task also.

31:46They might easily get into error and they might not be happy with the system.

31:52Another philosophy which we use is the knowledge in the head, the knowledge in the world.

31:57Knowledge in the head is the knowledge you have within your memory, the users.

32:01So based on the persona, you know these users have this kind of skill set, and they know…

32:06…they have interacted with certain types of system and stuff like that, so that's the knowledge in the head.

32:11Knowledge in the world is the tips and conventions that you try to use in your system…

32:18…to make sure the user understands the system easily.

32:20One is not better than the other, but you've got to be careful in choosing between these two.

32:26An affordance is making something, you know, making something really obvious, like making a link…

32:32…hyperlink blue or showing an underline when you hover over a hyperlink…

32:36…or making a button make, look clickable, you know, have a slight emboss or a shadow or something like that.

32:42And progress of disclosure is again a very important thing, like you don't…

32:46…you don't want to just give everything to the user right at the first go.

32:50You want to just slowly lead them to a process so that they, they just…

32:54…they just want to see what they want to see in that particular task.

32:58So these are the steps which we followed.

33:01We start with the floor diagrams. You know, try to sketch out each task flow in the application.

33:08It's helpful to do this even before you start your, start designing your screens…

33:12…so that you will know what you are going to deal with.

33:15And the next step is the actual paper prototypes.

33:17This is importance of where you try to flesh out all the requirements.

33:21You try to, you know, see which, which…

33:24It's very easy and simple because it just involves paper…

33:28…and you just have to flesh out all the requirements in all the screens and try to see which one matches your users' need.

33:35These were some of our actual original paper prototypes we made for BAO.

33:41The final application didn't turn out this way, but this is how we started it.

33:45And the next step is the wireframes, where you went into little bit more details on each screen and, you know…

33:52At this stage, every button, every text, and everything in a page is fleshed out and try to [inaudible] with…

33:58…and we try to solve all the use cases.

34:01And at this point, the blueprint of the interface is complete.

34:04And the next step of the process is the visual emotion design.

34:07For that, let me introduce our visual designer, David Dodge.

34:21OK, good morning. My name is David Dodge.

34:23I'm going to tell you a little bit about this sort of final icing on the cake from the perspective of the UCD.

34:29This is the visual and motion design, what the user finally interacts with.

34:34My experience is graphic and motion design, and prior to joining Esri…

34:40…I worked with many ad agencies and various companies, including Saatchi and Saatchi…

34:45…where I did online design for Toyota, especially.

34:48With, of course, with the development of this product, this online experience…

34:53…it wasn't just about the seduction of the images, which advertising is primarily about.

34:58It really is about creating an experience that's both effective, easy to use, and engaging for the user.

35:05And so this, this is the…our home pages you've seen before in the previous presentations.

35:12And what, what I really am concerned about and interested in…

35:16…in designing this, this final visual design is creating an emotional connection with the user…

35:22…which we've described as Larry Landhawk and Peggy Printsalot.

35:25And I want the user to be engaged so it's not just about getting their software but getting their reports and results…

35:33…but really enjoying the experience and feeling that they're empowered by using the software.

35:38So it's more, it's something that you want to come back to, it's something that you really enjoy using.

35:43So how do we engage the user?

35:46We have to know who the user is, and that's been the whole process through this experience of UCD.

35:52We've interviewed them, we've talked to them, we have to know what they also experience visually.

35:57So our user's a business user, and the process that I went through is…

36:01…to look at a lot of experiences and websites and applications that the business user might use...

36:08…from large corporate websites, of course, to news sources, and again and again, I found that gray…

36:15…the colors gray and blue are solid business colors and are used kind of fairly consistently…

36:21…to emphasize the strength of information and the business experience.

36:28So we wanted this design, visual design of BAO to really answer the expectations of our persona.

36:35And here's another example. This is the Bloomberg terminal, which delivers real-time financial information.

36:44Again, the blue, and the blue here in the Forbes web page. So visual…

36:51It's more than just of course the colors. The design itself is about creating a space for the user to work…

37:00…and work on the map and also to work in the reports and data, and really experience a business experience…

37:07…and what I mean by that is…

37:11This isn't forwarding here? Could you…there we go.

37:24…is an experience that is very accurate, very comprehensive, very easy to use.

37:31As we said, these real estate brokers and professionals don't have a lot of time…

37:36…but they really want to find good value and reliable information in their experience of the software.

37:42So we want this, our user, to really feel like they're an expert, that they're getting decisive information…

37:51…they're empowered by the experience of the software…

37:54…and they're gaining knowledge so that their business decisions are improved and the software is bringing it.

38:04So how do we do this specifically in BAO?

38:08Well, my training has taught me that visual design is not just about what you put on the screen or on the page…

38:18…but it's about the spaces you leave in between those things.

38:22So I really was very, very concerned with preserving what is called negative space in design parlance.

38:28This is an example of an interface that doesn't understand that…

38:33…because there's no clear way for the user to discover where they should go next, what's important.

38:40This is some sort of, I'm not sure what kind of interface this is, but it's not employing visual design…

38:46…it's not employing negative space very well.

38:48This is our software again.

38:51There's a lot of openness to it. There's, buttons are clearly demarcated, decisions are clean…

38:59…and there's an elegance in general, so that the map and the results on the map, the data…

39:06…which is what the experience is all about, are primary, and those stand out…

39:10…and the user can get to them as quickly and as efficiently as possible.

39:14So that is the goal and that's what the experience of the negative space does.

39:22Now, the other task, design sort of modality we used here was to continually use blue as a leading color…

39:35…so it defines the workflow menu. I'll show you that in a second.

39:39It's the highlight for each next step, or the kind of, the next step in the process, and it's also the color of results.

39:46When you do put in, for example, the Smart Map Search, when you have data criteria that you're looking for…

39:53…the results in the map are blue.

39:55So blue is the color that the user is looking for.

39:58You see up here in the, what we call the submenu or the workflow menu…

40:03…all the major workflows happen here, the Find Location, and also the major…

40:09…the buttons that move you forward through the workflow.

40:13These are the Smart Map results, again, blue.

40:17And the other, the sort of final factor in the motion visual design is…

40:22…is kind of bringing the interface to life, and obviously it's not about a high-end car commercial.

40:30It's not something that you want to make the user dizzy with.

40:31You want to just keep them moving through the interface, but make it feel like it's alive.

40:36So, not just about flashiness but subtlety and really communicating what, what has happened…

40:45…by their choices and what's going to happen next; it orients the user in the interface.

40:53I'm going to show a few, quick videos of…we saw a little bit before, when Brenda demoed the software.

41:01If we…[inaudible] Sorry?

41:06This is the matrix for getting report, and if we can't show this, I'll just describe how when you add…

41:12…we just have a simple motion effect here when you add a report to your selected reports.

41:19We see the report just jump down here. It's a simple motion.

41:23Very subtle, but it communicates the fact that you…

41:26[Inaudible comment]

41:34So these details are things that we really kind of spent time doing.

41:37We want to make sure that they're subtle but that they…this is the other example I want to show.

41:43It's the workflow moving step by step through the application.

41:46You see that little, the subtle kind of flick there to show that the one that you…one step is moved forward…

41:54…and this is just the adding of a report…get that little quick motion.

41:59Almost too quick to see, but it lets you know that you've added the report to your Selected Reports file…

42:06…before you select it.

42:08When you want to select a report.

42:10Right. And when you run a report, that quick motion of the file that you've selected moves down here…

42:20…tell you that it's processing it in the next few minutes.

42:23So in addition to, so my final deliverable in the process is a…if we can go back to the PowerPoint…

42:33…is a complete design spec, so it includes the user interactions from Sooria, and then kind of a final…

42:43…visual design spec that we deliver to development.

42:47But before we do that, before we go that far, we do have usability testing on the software…

42:54…and Sooria's going to talk about that, so...

42:56Thank you.

43:11Sure.

43:18So as David mentioned, our…the final deliverable from both of us would be a design specification for the user…

43:24…for the development team to use, will define each individual element on a page…

43:29…and you can also see the interactions that are written out and which gives easy access to developers…

43:34…and also the QA team to test it against the actual spec.

43:40So the next step is usability testing.

43:43I'm going to morph into Neal Dinoff now. He is our testing coordinator. He couldn't be here. He's our…

43:50He conducts all the usability testing within Esri. He has experience in cartography.

43:58Let me move on to the next step, the usability testing.

44:01So what is usability testing? Like, most of you have known about the functional testing and holistic testing.

44:09Functional testing tests how, whether the software works…

44:13…and holistic testing tells you whether it works the way users need it to work.

44:17And the usability testing gives you the answers that whether they can figure out how it works.

44:26General usability testing, as I mentioned earlier, is like, watch the typical user perform their task.

44:31It will be, each session would be five to eight participants on average.

44:35And each session would take like an hour to hour and a half, and the key stakeholders of the team…

44:43…would sit and observe so that you will know where the users are stumbling.

44:46You thought you knew better than the user, but that's a very humbling experience.

44:51For BAO, we conducted over nine rounds of participant testing since 2008, so every release…

44:57…we make some incremental improvements and we make some testing and try to see whether the users can figure it out.

45:03We have tested over 50-plus participants.

45:06Whenever we don't get participants, we try to get proxy within the company and try to test that out.

45:15And rule number three is failing fast.

45:17Like, you want to fail fast so that you will know that, you know, your designs will work in the field or not.

45:23It's better to find it out earlier than, you know…

45:27…some other customer pointing it out that your software is not working as it intended to.

45:33So we always want to fail fast so that we know that we have some trouble waiting for us.

45:40Design validation could happen in any phase.

45:43It could be just wireframes, just a design comps, it could be a partially prototype…

45:47…and it could be fully functional, completed apps, as well.

45:52We have done everything for BAO, like, we have almost worked with all these elements here.

45:58Neal typically writes down a user scenario, a proxy scenario…

46:02…again, like try to see what the user is trying to achieve using the product.

46:06He is, we try to use unbiased language and make sure the tasks are independent.

46:11This is an example scenario, like a simple scenario, and see how the users will, you know, try to achieve the scenario.

46:20A little bit more complex scenarios are something like this, like where you give a little complicated task…

46:24…which could be achieved using your interface, but how would the user go about doing it?

46:32So we did, as I mentioned, like we observed 50-plus participants…

46:36…and Smart Map Search is one of our key features, and we tried testing it initially.

46:45We thought we knew what the users need. We tried, we just, you know…

46:50…we just went with our gut feeling and we went with the design, but what we found out after initial testing…

46:57…is like the users are really baffled by our design, and we made some changes.

47:02We added some more steps in between, and we tested it again, and it tested well.

47:12So I'm going to show you a quick video of how it was done, just a simple video, before and after…

47:18…to see how it was done. Back to James.

47:21We're going to watch the video, and you'll see the usability lab.

47:25The people watching in the usability lab are in a separate room…

47:28…and the guy doing the test is in the room on his own with a moderator.

47:32So you'll see the video of the user's face together with what they're seeing on-screen.

47:37So the initial test is…it's going to play here in a second.

47:45There we go, and then you'll see the change after we made some changes.

47:51So this is the initial…

47:52Yeah. So we preselected the variables for the user. We thought we'll…let's just watch the video.

48:01So you can see the user…

48:03Does Smart Map search…

48:19[Audio playing] So tell me about what you're seeing here.

48:22So it's looking at census tracts, matching criteria that I haven't actually entered.

48:30So it must be sent from something previously?

48:35Or it's showing all criteria that, that it could start with, 'cause we got criteria lists, and I'm getting a gray box.

48:46So I want to change variables again. [End audio]

48:55So after watching that, we thought, like, this is not going to work.

48:59So we made some changes, and this is what happened.

49:04[Audio playing] OK, I'm going to X that out.

49:08I clearly, I'm not going for a thematic map, so I might do this map, the Smart Map Search…

49:14And what is that?

49:15It's new. I have specific market needs. In fact, I do. It's going to show me geography areas to match my criteria.

49:23I'm feeling more and more like I'm on the right track.

49:25I'm going to select my criteria, geography type, and then refine.

49:30I've got a two-minute video I can watch in case I have questions, but I'm going to get started and see what happens.

49:37So I'll look at per capita income, median age, and five-year projected growth.

49:46So I need per capita income…

49:52…it looks like annual projected growth and median age.

50:05Oh, wow.

50:07OK, so…

50:10So, what is "Oh, wow"?

50:12I've just got lots of options here and it looks very nice. I like that there's little slider things here and…

50:18…yeah, I feel like I've got, OK, I've got the freedom to look at exactly what I'm looking for.

50:23Like before, I was saying, what if I wanted 26 by 30?

50:26I feel like I've got the ability to do that right here. [End video]

50:34Yup. As you could see, like, we just directly dump the user in the first testing into the third step of the workflow.

50:41We thought the user would figure it out, because they know, they're into a site selection application.

50:46We are just selecting a few categories for them, but it didn't work out that way.

50:50So we just added couple of simple steps, and that made the user really happy, and this is one of our most popular features.

50:57In the end, Neal comes back with a usability report on what slight modifications could be done…

51:01…and stuff like that.

51:02So we try to add this to our product. We try to make the specifications based on the observations from testing.

51:09So we got all the specifications and everything right, but someone has to transfer that into a workable application.

51:16That's where Garry and his team come into play.

51:31Good morning, everyone. I didn't have a picture.

51:34My name's Garry. I'm the dev lead for the Business Analyst team, and I work with these guys. Great.

51:46Are there any actual developers in the room? Yeah, so a few of you?

51:53So this was, what I tried to do is capture what development felt like before we used user-centered design.

52:01So the idea being that, you know, you really can't win as a developer.

52:05You get a spec, which is usually not clear.

52:09You develop to the best of your ability, and then it usually lands with a dull thud…

52:14…so we basically get beat up and bruised, so…

52:18After we employed the user-centered design, things worked a little bit better.

52:23Anyways. James made this point early and I think it's very important.

52:30My team, several members of our team, when we talked about using this approach to develop applications…

52:37…were a little bit resistant at first.

52:39They felt, like most developers, that they're the smartest people in the room, that if you can't write C++…

52:46…and don't know how to manage memory fragmentation, then you shouldn't be in the room with me, and I can figure this out.

52:52But over the course of the last two years, they've really embraced this approach…

53:01…to the fact, now, I've been in several meetings where it will often be the developer or sometimes be the developer…

53:07…that will bring up, "Well, this is not right for our Larry Landhawk. He would never understand this."

53:12So they're driving Sooria and Brenda and David to come up with even better designs at times.

53:20So the other thing that I wanted to talk about is, in terms of collaboration…

53:24…this is Sooria working on a whiteboard, is that this really is how design starts with us. It's, you know…

53:32…often, it's Brenda, Sooria, and I and maybe one other developer that's going to take on a specific task…

53:39…around a whiteboard and, you know, just doing some brainstorming and talking about how this will work.

53:47And we're actually, this is something Brenda showed onstage, as well, on Monday with the Community Analyst.

53:54We were brainstorming how we would bring in the ArcGIS Online layers into Community Analyst.

54:00So you know, that's, you know, kind of the genesis of that feature.

54:04It starts off on a whiteboard; you know, Sooria then goes off and creates a paper prototype.

54:11It usually has a, you know, some form of initial reaction, you know.

54:15Sometimes it's positive, and sometimes that Sooria feels like the beat-up Rocky and he has to go back…

54:21…and make several iterations.

54:23And you know, at times, it can be a little bit adversarial, and at other times, it feels very chummy and good.

54:31But it does, it's a very effective way to work, and our previous experiences with development at Esri…

54:41…generally how design would work was, we didn't have access to a design team, so it was a single developer…

54:47…coming up with an approach and usually ended up with something that's a little bit too technical.

54:54This is something Brenda mentioned a lot as well, too, in her presentation, and…

55:00…explains a little bit of the resistance that some of our development team had with the user-centered design as well, too…

55:08…is that, again, it comes back to "I'm smarter than you, I can figure this out."

55:13And really, what, and I want to be very clear on that, what the user-centered design does…

55:19…it doesn't tell you how to solve a problem.

55:21What helps us as a development team is it really highlights pain points.

55:26So you know, we had some challenges, you know.

55:32One of them was when we were creating thematic maps in Community Analyst.

55:36The maps were coming back too slow.

55:37So we got requirements that the map needed to come back in less than a second…

55:42…and it was then off to the development team to go out and figure out how to do that as well, too.

55:47So that's very important. You know, and the…really, the end result of the user design…

55:55…user-centered design for me or I think the biggest advantages of the development team…

56:00…is we end up with clearer specifications, and clearer specifications lead to better development estimates.

56:08We release product on time.

56:10Our developers are focused on users, and this has reduced stress on the team, as well, too.

56:17The other point I would make as well, too, here is that…and this is something James mentioned as well, too…

56:22…is that this is not about, you know, a bunch of product managers dreaming up stuff and handing a bunch of paper…

56:31…off to a developer and "Go do this exactly as you want."

56:36Quite often we'll develop or we…on my team, I like to encourage what I call tech days.

56:45So in between, you know, developments, we use a Scrum methodology, which basically means that…

56:51…for the nondevelopers in the room, it's like we have two- to three-week, very intense development periods…

56:57…where we lock our developers in cages and feed them raw meat, and they work really hard…

57:03…and then, after that sprint, they, you know, we have a stabilization period where we fix bugs and such.

57:09And in time, in that period, I like to, you know, once in a while give people, you know, a play day…

57:15…where they can just, you know, take a new technology and play with it.

57:19So the color-coded maps inside Business Analyst Online started from a developer prototype…

57:30…where, you know, we took a new technology, at the time, to Esri.

57:34This was the new Flex API, and we thought, wow, it's great.

57:38We've got 6,000 demographic variables.

57:40I mean, no one's ever really thought about making maps before.

57:43You know, before the Flex API, you would have to create 6,000 map services, and that just really…

57:48…really not realistic, so you know…

57:50…we created a little developer prototype that showed you how you could create a map out of any variable.

57:54We showed that to Sooria, Brenda, and David, and you know, their eyes got buggy…

57:59…and thought, wow, this is great.

58:00And then they, you know, furiously went through the design process, and it created a, you know, compelling application as well, too.

58:09You know, the other point I'd like to talk a little bit about, too, is that…

58:12…the usability testing I think is really key for us as a development team.

58:19All of our developers, we try to sit through at least one session in the round, and it can be, you know…

58:25…it can be fulfilling, or when you see the gentleman at the end saying, yeah, wow, this exactly what I need.

58:30But it can also feel like being waterboarded if things are not going well.

58:35Give you one example. In our initial user interface, we basically, again, for the color-coded maps…

58:42…we had 6,000 variables, and Neal created a user scenario where it was, you know…

58:51…you had to map median household income.

58:54So we, you know, we're excited. This was our first-round usability testing this feature, and…

59:01…we sat through the testing, and the first user went in there…

59:04…looked at the scenario, opened the tree of demographic variables…

59:08…looked down, found median household income, clicked it, created a map, and she had the "oh, wow" experience…

59:14…and you know, we were high-fiving each other behind the one-way glass, and things were working great.

59:19The next user came in, and she expanded the tree of variables and proceeded to whip past the variable…

59:27…and then spent five minutes looking through 6,000 variables trying to find this one thing.

59:34And then that happened over and over and over again, and it was really a very painful four hours…

59:42…to the point where they actually had to constrain me from running into the room and finding the variable for them.

59:48So, you know, needless to say, we had a problem there.

59:52And then Sooria designed a search button in our variable search…

59:57…and now people can look for that observation as well, too.

1:00:04OK. I'm not quite done? OK. So…

1:00:09You're not going to show any code.

1:00:10Yeah, that's right. I forgot there. Sorry, it's been a while since I've done this presentation.

1:00:14So what I did in this room, I said that I wasn't going to show any code because there are developers in the room, so…

1:00:21…for those of you in the room here, there's my one or two lines of code.

1:00:24And you know, I guess the final point I would make is that, you know, this has…

1:00:31…is really an effective way to work.

1:00:34You know, one of the, one…we've given this presentation a couple of times within Esri…

1:00:40… and often, what we get is that, you know, this is a, sounds wonderful, but you have a, you know…

1:00:45…a product manager and a designer and someone that used to work at an ad agency…

1:00:49…and knows about negative space and what colors make you feel warm and happy…

1:00:53…but I don't have access to that, so how do I work that?

1:00:57Well, it's really about, you know, just…we'll use the term persona again…

1:01:02…about not having one individual developing and designing applications.

1:01:06I'd encourage you to, you know, collaborate with other colleagues.

1:01:11Many of you are not going to have access to a, you know, formal usability lab, but it's just all about…

1:01:17…hey, knocking on your next-door neighbor and asking them to try your new application and getting their reaction.

1:01:23I think it's an effective way to get feedback when you don't have, you know, the resources that we have at our disposal.

1:01:30We did have a couple of challenges when we adopted user-centered design, and I'd maybe highlight those.

1:01:40It can feel like you have a lot of cooks in the kitchen.

1:01:45What I mean by that is that, you know, when you've got four type-A personalities in the room…

1:01:51…all feel very strongly, sometimes voices can be elevated, and we yell and scream at each other.

1:01:58But then we, you know, drink beer afterwards and have hugs and it's all good.

1:02:03It can also…one of the things I would like to point out is certainly initially, this will slow down…

1:02:09…your development process, because you're doing much more work up front, but I think as we've highlighted here…

1:02:18…that's going to pay dividends in the end because you're not going to have to, you know…

1:02:23…continue to develop fixes and such as well, too. OK? James?

1:02:32Thank you.

1:02:37So in summary, the user-centered design process is a collaborative effort.

1:02:43It's not a waterfall process.

1:02:46It doesn't stifle innovation; development is involved right from the get-go, and it does result in high user satisfaction.

1:02:54This is actually a quote from one of our support people on the support team that…

1:03:03…she sent us an e-mail after we released the new BAO, and she said how, you know, when a person calls in…

1:03:08…"We point them to BAO and get them started. We instruct them to call back if they get stuck at all. They never do.

1:03:15On the previous version, 9 times out of 10, they got stuck and had to call us for assistance."

1:03:20So it's helping us not only in the development cycle but it's also helping us in the support cycle at the end of the day, too.

1:03:27So that's been another positive outcome of adopting this process.

1:03:33Just reminding you of the rules, you know, the key rules that we have is…

1:03:37…number one, know your user. They're not necessarily, they don't necessarily look like you at all.

1:03:43Rule number two, if it isn't usable, it may as well not exist, because a user will, you know…

1:03:52…stop trying to use it and never come back.

1:03:54And rule number three, probably the most important rule, is fail fast.

1:03:58As early as you possibly can, find out what does work and what does not work in your designs.

1:04:05We do testing at various stages. You saw the testing with the live software there.

1:04:09That was after development has been done.

1:04:12We also do testing on paper prototypes, so we actually make copies of the wireframes on paper…

1:04:19…and we do a usability test where one of the people in the room is pretending to be the computer…

1:04:25…and the person executing the test, the target for the test, they're using their fingers as the mouse.

1:04:31So they're pressing on the buttons on the paper, and then the other person in the room is pretending to be the computer…

1:04:36…and showing the appropriate piece of paper that would, you know…

1:04:41…which would be what the program would be doing if it were a live program.

1:04:46So we've done paper usability testing. We're also starting to use other techniques, too.

1:04:53This particular application is a Flex application, and in Flex, there's a new tool called…

1:05:00…that you can use in the Adobe suite called Catalyst, and Catalyst allows you to do up-front design work…

1:05:07…and it's very good for creating live prototypes without actually getting to the coding stage.

1:05:13So using Catalyst, the designers can create working prototypes without any development involved…

1:05:19…and we're planning on using the Catalyst prototypes in usability testing, too.

1:05:26So as I said, rule number three, fail as quickly as you can.

1:05:30It's much cheaper to fix a problem and much faster to fix a problem if you find it early.