Defining the Design Problem

You’ve heard it before: design is about solving problems.

Whether it’s building a new playground or developing a mobile app for pet groomers, there are multiple ways to satisfy a project brief. However, in order to design a product that successfully delivers business value, it is critical to first clearly define the design problem.

Ask your clients these three key questions at the start of every project:

  • What is the business objective?
  • What is the context of product use?
  • What are user goals?

What is the business goal?

This is the most critical question that some design teams still don’t ask stakeholders.

Understanding business objectives helps your design because it allows you to drill for more specific information. Follow-up questions can unlock a wealth of insights that influence the design approach:

  • How do you know this is an issue?
  • Who is affected by the issue?
  • When and how often does this occur?
  • What benchmarks do you have and what change do you expect?

Imagine that your client aims to reduce tech support calls for an e-commerce site.

If customers struggle to complete purchases, drilling into root causes might reveal that logging into an account is a major hindrance, or that the website refuses to validate shipping addresses. Interviews with tech support teams can also reveal pain points that customers are experiencing.

Understanding business goals also helps the design team focus and refine work through iterative user testing before full product launch.

For instance, if time on task is expected to decrease by 15% following an interface-lift, that’s a clear target to test against with prototypes.

What is the context of use for this product?

Answers to questions using where, why, when, how often, and so on, describe the context of product use and elucidate multiple design decisions.

At a macro level, context informs what technology should convey the design. At a micro level, context places restraints on interactions and the visual treatment of the interface.

Imagine a food manufacturer who wants his quality control technicians to enter production data (such as oil temperature) on a kiosk-based laptop on the factory floor. On the surface, this is a simple problem. But would this be a wise technology choice if the technicians have to enter multiple production values every five to ten minutes? A tablet that the user can carry would be a better choice given the context of use, but if the client doesn’t volunteer such information, how could the design team know to make this recommendation?

Technology platforms have their own sets of best practices and capabilities. However, designers still have to consider interactions and visual treatment of the interfaces.

For instance, an athlete might count out loud a number of burpees to her smartwatch, yet ambient noise could obscure her voice commands. Similarly, luxurious colors and fancy button animations are suitable for a gaming app but not for a paramedics’ emergency response devices when used at night.

Drill deep to understand the intended context of use by interviewing and observing users in their environment. Do not assume that your client has done the necessary research to uncover the needs of her users, or that she understands the implications of context requirements on the design.

What do users expect?

Business and user goals can be very different. Successful design finds common ground to satisfy them both.

Business stakeholders are often biased or completely naive about their users, making it all the more important to conduct research directly with the intended audience. Understand not only what users need to do, but also what motivates them and what attitudes they have toward their tasks.

When business and user objectives are mapped out, designers should create user flows that support desirable user behavior while satisfying user needs and aligning with their attitudes.

For instance, Amazon prompts shoppers with additional products while at the same time offering hassle-free one-click ordering. Similarly, TurboTax has helped its success by using a clean and playful design that supports users during a task they likely find tedious, unpleasant, or even anxiety-inducing.

That said, a fine line exists between supporting users and driving the client’s business. Calls to action that appear too frequently or lack of information to drive user decisions will fail to satisfy either the users or the business.


Design briefs present a problem that can be solved in different ways.

By investigating business objectives, context of product use, and user goals, you’ll gather necessary data that helps narrow down and refine a single design approach.

Data—rather than assumption-informed design—is the secret sauce of successful business products. You just need to ask the right questions.

This post was originally published here.

Bringing UX to a Startup

Over the last few years the meaning of user experience shifted from ‘making pretty websites and mobile apps’ to ‘key business strategy.’ Yet, while many organizations recognize the value of investing in user experience, many struggle to deliver it effectively within set timelines and budgets. The secret to success lies in understanding key user experience activities, their outcomes and value in the product development cycle. This talk will cover:

– What are the key user experience activities?
– What are the outcomes of key user experience activities?
– When should each user experience activity be performed?
– Who should perform different user experience activities?

This talk was presented at University of Illinois Research Park/EnterpriseWorks in April 2017

Building Blocks of Good Graphs

Selecting an appropriate chart type to present data visually is one of three critical steps to creating an effective visual vessel of information. The second step requires that supporting details about the data are provided. Axis labels, legends, units and other elements deliver the context within which to interpret results. Lack of such details requires the audience to make assumptions about the data, or utterly confuses them; in either case, it is a failure of clear communication. Here we discuss the building blocks of graphs, how to implement them effectively, and illustrate suggestions with a couple of examples. In the figure above, inspired by Stephen Few, we illustrate the many different elements that compose various charts and which we reference in our current discussion.

Core elements

Axis, category and unit labels

Axes reflect what kind of information is presented and ought to be labeled. Numerical axis labels should include the units a data are measured in. For example, if company revenue across different continents is reported, do the numbers represent profit in dollars, yen, rubles, or some other currency? When a measure from a standard tool, such as a Net Promoter Score or System Usability Scale (SUS), is reported, the metric should be referenced in the axis label in lieu of units.

Axis that represents data category does not necessarily need an axis label, but must include category labels if more than one data point is shown. For instance, if monthly revenue is presented, months would serve as category labels for each numerical value shown in the chart while axis label (“Months”) can be omitted. When a single data point is shown, either an axis or a category label is sufficient. See elements B through G on the figure above.

Scale, numerical axis and tick marks

A scale divides an axis into equal segments, and tick marks denote those even segments of the scale. Tick marks on quantitative scales establish where on the axis specific number values are placed. Intervals that are nice round numbers, such as 10s or 100s, make it easy to read the chart. Tick marks should be designed to minimize visual clutter while still allowing the reader to quickly reference a data point to its value. A good test for too few tick marks is whether the audience can quickly and easily extract (an approximate) value of a particular data element in the chart. If not, then the number of tick marks should be increased.

With very few exceptions, numerical axis should always include 0 for appropriate representation of values. Manipulating the size of scale increments and its minimum and maximum points will distort the data. If the goal is to demonstrate a difference between data points, appropriate statistical procedures instead of manipulation of numerical axes should be used for supporting evidence.

Tick marks are also used on categorical axes. However, because category labels already denote distinct data points, tick marks serve no additional purpose and should be eliminated to reduce visual clutter. See elements G and J on the figure above.


When more than one category of data is presented in a chart, a legend informs what different colors or patterns represent. Occasionally, variables are labeled directly on the chart, omitting the need for a legend. Line graphs can often be shown without a legend by labeling categories next to the lines that are used to represent them. However, the choice to label categories directly on the graph should be made after considering data and graph design complexity; because a legend reduces visual clutter, it often is a better choice than labeling categories on a chart. A legend can be omitted when a single category is shown and category labels are used to describe the data.

Legends should be placed closely enough to the data components for easy reference, but in a way that does not interfere with the data shown. Moreover, because they serve a supporting role to the graph, legends should be designed to look less prominent than data elements. For example, they should have no borders around them and should be fairly small while still legible. See element H on the figure above.

Chart title

The title communicates what information is presented in the chart. An effectively worded title removes the need for a subtitle that can visually clutter the chart. Whenever possible, the title should serve as the main takeaway of the data rather than a general description of what is shown in the graph. For example, while “Mobile device breakdown in Houston” informs the reader what the data are, the title “Majority of Houston residents have iPhones” expands that description into a summary of results. Titles are typically placed at the top of the graph and should be positioned closely to the information they describe without interfering with it. See element A on the figure above.


Graphs occasionally include additional elements, such as confidence intervals or data labels, that may not be necessary in every instance. When designing the chart, consider whether these components serve any real purpose, or whether they only add visual clutter.

Grid lines

Tick marks are usually sufficient to reference a data point to its value when graphs are fairly simple and show a small set of data. However, when charts are wide and contain large sets of data, grid lines help guide the eye between data categories and their numerical values. In large graphs, grid lines also help increase precision. Moreover, grid lines can be used when the goal is to highlight small differences between data values. In the cases where grid lines are used, they should be designed to appear less prominent than the data, and used sparingly to avoid visual clutter in the graph. See element L on the figure.

Reference lines and zones

A reference line or zone can provide context for the data by visually comparing it to some predetermined value. Reference lines or zones are especially useful when the goal is to show data deviations from the norm or to highlight that a benchmark was met or surpassed. For instance, when presenting a software usability score (as measured by SUS) to a stakeholder who is unfamiliar with the metric, highlighting the desirable range for such scores will help her meaningfully evaluate the reported results.

Reference lines can also be used to highlight significant events during the period of data recording that may have impacted the results. For example, e-commerce website traffic may significantly increase at the start of a marketing campaign and drop off soon after the campaign wraps up; marking such an event on a website traffic report can help stakeholders make informed business decisions about their marketing strategy and website. See element M on the figure above.

Trend lines

A trend line on a graph shows an overall change in the pattern of data across time or some other variable represented by the horizontal axis. Trend lines can be useful for highlighting a pattern in the data that may otherwise be obscured by individual data points. For example, if a particular stock price varies drastically over a period of time, it might be hard to gauge whether overall its performance is improving. A trend line, in this case, could show a decline, improvement, or no change in price over time. However, if data points themselves already show a clear pattern, then trend lines only add visual clutter and should be omitted from the graph. If trend lines are used, and if the overall pattern of data is the main takeaway of the chart, the trend line should be visually highlighted as more important than individual data. Alternately, if the trend line is secondary to the graph, it should be visually subtle. See element K on the figure above.

Ranges and error bars

In some cases, variations in data values, as reflected by such measures as standard deviation or confidence interval, may be required in the graph. Visually, a range or an error bar is shown as a horizontal or vertical line extending past the data point. Whether such detail ought to be included in the chart is dictated by research methods, statistical analyses, type of data reported, and by the message the graph is expected to communicate. If the range of values is more important than individual data points, then error bars should be visually prominent. Otherwise, error bars ought to be subtle.

Data labels

Data labels show specific value information for each data point on the chart. The purpose of graphs is to visually showcase patterns in the data and not to communicate numerical precision; tables are much better suited for this goal. Therefore, as tick marks on a numerical scale and grid lines already allow to quickly reference data points to their values, data labels are redundant and add visual clutter to the chart. In the rare case when numerical data are presented on a chart without a quantitative axis, data labels can be used. In such instances, ensure that numbers are rounded up to reduce precision when it is not necessary, and position data labels relative to the data points in a way that makes it easy to read and reference the information quickly without cluttering the chart. See element N on the figure above.

Do’s and don’ts in practice

Many options in terms of chart type, layout, style, and supporting elements are available. Here we illustrate a couple use cases for poor and improved graph design.

Bar charts

Case 1: Bar graph

Axis and chart titles on the right side graph provide focused information about what the data show. Specifically, the good graph specifies that preference ratings were measured on a scale from 0 to 10. Additionally, the title on the right summarizes data in a single takeaway message. As shown on the left side graph, slanted category labels can create a rough visual edge, especially when label length varies, and can be harder to read than horizontally placed labels; whenever possible, opt for the latter. Because only three data points are represented, it is easy to extract their values by referencing the numerical axis. In the example on the left, the grid lines add unnecessary visual clutter and can be completely removed from the graph. Additionally, the scale on the numerical axis can be simplified and include tick marks for every 2 rather than every 1 point. Finally, error bars on the right side graph are less visually salient than on the left, but still provide information about variability in preference ratings in the sample.



Case 2: Line graph

As in the previous example, the graph on the right has more descriptive axis and chart titles that provide focused information about presented data. A reference line on the right indicates occurrence of a business event that provides additional context within which the audience can interpret data. Data labels clutter the chart on the left side and are not really necessary. As shown on the right side, each data point can be quickly aligned with its value by using the grid lines. The scale on the numerical axis can also be adjusted to show larger scale increments. Tick marks on the categorical axis, as shown on the left, serve no purpose and can be removed to reduce visual clutter. Circles on the right graph highlight exactly where on the line the data points are placed, and allow an easy reference between a point and a month it is associated with on the categorical axis. Finally, labeling data directly on the chart removes the need for a legend and reduces visual clutter.

To conclude

Once the appropriate chart type to present data visually is selected and supporting details about the data are provided, the last step in effective visual communication with graphs is to carefully design these charts. Design ensures not only that the graphs look aesthetically appealing, but also, and more importantly, that the intended message is communicated. For example, color or texture can be used to highlight a particular data value from a larger set. Similarly, a color gradient can emphasize change in data, such as increase or decrease in cost of operations at a business, over time. A poorly designed chart may not only fail to communicate the intended message, but may also mislead the audience. In the business realm, visualized data are used to inform decisions; hence, graphs that are unclear or misleading can negatively impact operations and the bottom line. Successful data visualization stems from the synthesis of appropriate research methods, analysis, and keen application of design principles.

This blog post was originally published here

4 Tips for Better Data Visualization on Mobile Devices

Demand for data visualization on mobile devices is on the rise, both in the consumer and business spaces. Whether it is stock price performance or sensor fluctuations in a production plant, data in enterprise helps in monitoring operations, optimizing processes and quickly making informed decisions. One of the challenges in providing uninterrupted access to visualized information is the drastic reduction in screen size when moving from a desktop or laptop to a tablet or a smartphone. Best practices for print or large screen graph presentations are unsuitable: chart titles, axis labels, and other graph elements on a small screen are clutter rather than useful information. Nonetheless, effective data visualization on mobile devices can be accomplished by following these recommendations.

1. Determine what your users need

Before starting graph design for a mobile screen, gather particulars about what kind of data and what kind of format should be presented so that the charts best meet your users’ needs. For example, while temperature data are typically presented on line graphs, a user who really needs to know only how today’s temperature compares to tomorrow’s forecast might be completely satisfied by a numerical representation of a few data points rather than an actual chart. Understanding how users utilize information rather than in what form they expect to see the data will give designers more freedom to explore functional solutions to the problem.

2. Reduce standard graphs to bare bones

Visualized data, when accessed on a mobile device, are typically part of an app that was built for a specific function. For example, various banking apps show user account balances, pending payments and even breakdowns of various spending categories. When a user engages with an app, she has a specific purpose which provides context to the data that will be accessed. For that reason, graph titles, axis labels and other supporting elements can usually be omitted.

3. Take advantage of mobile device capabilities

Mobile device as a data display platform is great for interactive graphs. First, screen orientation (portrait vs. landscape) affords different pros and cons for chart displays. While portrait mode may work very well for a bar chart with a few data points, landscape mode is superior for line graphs. Second, interactions with the graph offer numerous opportunities to provide the user with detailed information that he may need while avoiding clutter on the screen. For example, pinching and zooming on a line graph could show the user changes in data over different periods of time, affording a historical glimpse of the trend as well as a very close look at data over the last hour. Similarly, tapping on individual bar graphs could bring up a modal containing a precise data label for the value.

Moreover, isolating a data point from a graph could give user access to detailed information about the data, allow her to take specific actions such as forward data to a colleague, attach a note, print graph and so on. Alternatively, a drawer that contains detailed information and slides onto the screen from the side of the graph is a good way to avoid visual clutter while increasing data density and preserving more specific information. Here, the user would only need to tap on a point in the graph to access details.

4. Follow design best practices

When designing the chart for a mobile app, especially when it is meant to support business processes or tasks, it is critical that information is legible for users given their work conditions. For example, if app users work on day and night shifts, the graph design should accommodate different lighting conditions for this group. Graphs with higher contrast work best in varying light conditions. Charts that contain multiple data sets (more than one line, for instance) require even greater contrast as two lines of similar hue may be indistinguishable from one another on the device screen.

Additionally, typography should follow the information hierarchy using appropriate size and weight for the level of importance. Avoid compressed type used in print materials as it will be more difficult to read. Similarly, avoid creating interactive graph elements that are smaller than suggested by guidelines for tappable areas. Moreover, assess how modals and pop-ups that are used to supplement graphs affect the users’ ability to extract meaningful information. Conducting a usability test with the graph and measuring the Standard Usability Score (SUS) will help ensure that visualized data meets users needs effectively.

In conclusion

User research should inform design requirements for data visualization. By stripping down graphs that are typically made for print and large screen presentations to their bare bones, you will be able to reduce chart clutter and help your users to better comprehend the presented information. Taking full advantage of the interactions available on mobile devices and weighing the pros and cons of various graphing libraries available to the developers will help ensure that the graph will be interesting, engaging, and, most importantly, informative to your users.

This blog post was written with Stuart Conway and originally published here.

ROI of UX: Mozilla Support Site Redesign

Nielsen Norman Group recently shared a great case study showing return on investment of utilizing user-centered design and usability testing for a website redesign. Take-aways are:

  • Mozilla support website redesign took 560 hours (or 14 weeks)
  • Multiple UX research methods uncovered pain points and areas for improvement
  • Designs were tested as prototypes and improved based on user feedback; 7 versions were assessed during project lifecycle
  • As a result, there was a 70% decrease in support questions submitted, and
  • 80-90% of submitted questions were answered within 24 hrs, an increase from 40-60% rate before re-design


ROI of UX: Discussion Forum Redesign

I do not need to convince my colleagues of the value of user research, usability testing and overall focus on meeting user needs during product development cycle. They get it: satisfied users are good for business! Yet, stakeholders regularly demand case studies and hard numbers before opening purse strings to fund a project. As a result, I am collecting (and sharing) UX success stories to help evangelize on value of UX and to make future “battles” for funding shorter, less intense, and (fingers crossed!) extinct!

Redesign of website based on user testing lead to the following return on investment:

  • 117% increase in unique website visitors
  • 41% increase in new user registrations
  • 53% reduction in duration of registration process
  • 206% increase in number of daily posts
  • 80% decrease in number of Help Desk support cases
  • 69% decrease in Help Desk cost

These are pretty nice numbers! You can read the full report here.


Color, Culture and User Experience

Artists and designers often talk about different emotions that colors elicit, and suggest specific use for them in mobile app and web designs. Interestingly, across cultures different colors can be associated with very distinct emotions. For example, while anger is represented by red in the Western world, it is depicted as black in Hindu culture. Love is yellow to Native Americans and blue to Africans! So, while crafting away at the next project, keep these cultural flavors in mind. David McCandless has created a handy color-culture reference!