{"id":36185,"date":"2019-04-03T11:59:11","date_gmt":"2019-04-03T18:59:11","guid":{"rendered":"http:\/\/devblogs.microsoft.com\/premier-developer\/?p=36185"},"modified":"2019-04-08T05:28:00","modified_gmt":"2019-04-08T12:28:00","slug":"the-cost-of-bad-ux-part-1-putting-a-price-on-look-and-feel","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/premier-developer\/the-cost-of-bad-ux-part-1-putting-a-price-on-look-and-feel\/","title":{"rendered":"The Cost of Bad UX Part 1: Putting a price on look and feel"},"content":{"rendered":"

Premier Dev Consultant Madeline Schenck<\/a> takes a look at the cost implications of poor interface design and how it adds up in ways that are not always immediately clear.<\/p>\n

\n

One thing that I\u2019ve heard more than a few times while working in UX is that you can\u2019t put a price on look and feel. Personally, I want to clear the air right now and say you absolutely can. It\u2019s not hard, but it does require narrowing your focus to a particular workflow.<\/p>\n

A great example of this is a project I worked on where our job was to update an internal document sharing site to a new UI. When the project was handed-off to another developer and myself, there hadn\u2019t been any user research conducted and the initial plan was to develop the site based on a couple of visual mockups that an internal designer had made. By following this particular approach, the UI might be modernized, but because the designers haven\u2019t gotten feedback from their end users, oftentimes many underlying problems with the application wouldn\u2019t get resolved and might actually be built into the new version.<\/p>\n

The site worked like this: Anyone could upload a document and add anyone in the company to view it. That person could be a reader, an editor, or an owner and each level had different permissions of what they could do with the document. When a user logged in, they would see all of their latest documents populated on the home page. For the sake of a quick visual, let\u2019s say it looks something like this.<\/p>\n

\"Image<\/p>\n

Obviously this is a very simplified view of what the actual website looked like, but it should suffice for what I\u2019m trying to illustrate.<\/p>\n

Now let\u2019s say that a project manager needed to share a requirements list with their stakeholders and development team. What they would have to do at this point is upload their document and start adding each person to the document.<\/p>\n

In theory, this is as simple as clicking the \u201c+ New Person\u201d button and typing in a name. As we soon discovered, however, it wasn\u2019t quite that<\/em> easy in practice.<\/p>\n

<\/p>\n

The first issue was that the modal or popup to add a user opened up directly over the list of users that already had access to the document. This was problematic because if the user got distracted at any point, they couldn\u2019t see who was already part of the list.<\/p>\n

The modal also forced the users to type in the name of the person they wanted to give access to in the format of \u201cLast Name, First Name.\u201d Not only was this format the reverse of how people naturally think of names (at least here in the United States), but the user didn\u2019t have any sort of visual indication if they were spelling a name correctly. They had to submit the name and hope that it got added to the document.<\/p>\n

After that, each person had to be added or removed individually. Users would have to: click a button, type a name to be added, hit submit, and then check to make sure that person was actually added to the list. And if you wanted to delete someone, you\u2019d have to click on each name individually to open a modal and click another button to delete. All of that clicking doesn\u2019t seem too bad if you\u2019re only adding one or two people, but it became a lot more time consuming with more people. When my teammate and I started reaching out to end users, we found the people using this application tended to be project managers or team managers. On average these users were adding around 30 team members, devs, analysts, etc. per document. With all these little time-wasting issues and an additional step of setting up permissions on who could edit or only read a document, the whole document creation process ended up taking 10 minutes.<\/p>\n

10 minutes doesn\u2019t seem like a whole lot of time for a task you only do every once and a while, but after talking to both people managers and project managers, we learned that people need to share documents on average two times a week. Multiply that by the hundreds of people using the application, and we can start to see the true cost of that 10 minute process.<\/p>\n

\"\"<\/p>\n

If it takes 10 minutes to follow a process that a user completes twice a week, every week, that\u2019s about 1,040 minutes or 17.3 hours over the course of a year.<\/p>\n

We couldn\u2019t get an exact count of users and their estimated hourly wage, so we estimated fairly low. For the purposes of this example, we could safely assume at least 100 people are using the tool and that these people all make at least $15 an hour.<\/p>\n

If each of these people are spending 17.3 hours on this specific feature of the tool, it costs the company about $26,000 each year to support the feature the way it was designed when we started this process.<\/p>\n

That\u2019s quite a bit of money for a 10 minute process.<\/p>\n

Now if you remember, the original goal of this project was to develop the designer\u2019s mockups with no changes. If we would have just followed their new design without making any tweaks, we\u2019d be building all of those problems back into a redesigned UI. While the app might look nicer in the end, it would still be just as costly of a process. Now that we\u2019d identified key issues with the application, it was time to figure out if we could improve it and shrink some of that cost.<\/p>\n

Check out how we improved the UX and saved the business money in Part 2: Improving the UI to Shrink Cost<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

One thing that I\u2019ve heard more than a few times while working in UX is that you can\u2019t put a price on look and feel. Personally, I want to clear the air right now and say you absolutely can. It\u2019s not hard, but it does require narrowing your focus to a particular workflow.<\/p>\n","protected":false},"author":582,"featured_media":36326,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4354],"tags":[1135,3,368,373],"class_list":["post-36185","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux","tag-madeline-schenck","tag-team","tag-ui","tag-ux"],"acf":[],"blog_post_summary":"

One thing that I\u2019ve heard more than a few times while working in UX is that you can\u2019t put a price on look and feel. Personally, I want to clear the air right now and say you absolutely can. It\u2019s not hard, but it does require narrowing your focus to a particular workflow.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/36185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/users\/582"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/comments?post=36185"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/36185\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media\/36326"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media?parent=36185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/categories?post=36185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/tags?post=36185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}