Understanding the design process behind our Customer Satisfaction Ratings feature

A design process is important because it creates a common vocabulary and structure for the exploration and refinement of ideas, resulting in a better outcome and thus a better product or service. This post is a breakdown of how we went about the process of designing the Customer Ratings feature.

Perceiving a need

The first step with every project is the idea. Usually the idea is either born from general research analysis, or a customer- or market-defined need. Once the need for a feature is confirmed, we research further, in the form of additional customer competitive analyses, interviews, studies, or another of the many types of UX tools available.

In the case of the Customer Ratings feature, there was already a strong need, as voiced by our own customers. Hence, we moved ahead with competitive analysis. A competitive analysis helps to understand the possible range of features we might like to include within a given feature set. We also researched the effectiveness of the options available for each of the components of the feature set. For example, the most important component of the Ratings feature is the ratings scale. The research helped us to choose from among all the options available - types of scales (numeric, word based, graphic based) and the number of choices to offer within the scale.

Our research showed that a 3 point scale is the least accurate; a 5 point scale much more accurate, a 7 point scale slightly more accurate and a 9 point scale even more accurate. We decided to settle on a 5 point scale, as it was simple, yet accurate. Only odd numbers were considered to ensure that a true neutral point is always available (neither happy nor displeased).

Between words, numbers, and graphics, there's no best choice. The worst choice would be graphics alone, as one cannot depend only on imagery to convey meaning, for reasons of accessibility for the disabled. So we went with imagery and a number scale for our first launch. Continual testing and collection of feedback on the feature over time will determine if the 5 point number scale + smileys will be the best way to meet our customer’s needs.

Understanding the goals

The next step in the design process is understanding and stating the goals of each of the types of people that will come in contact with a feature. For example, there are four different types of stakeholders for this feature:

  • SupportBee (as a service provider)
  • SupportBee’s users (both customer service administrators and agents)
  • SupportBee’s customers
  • SupportBee’s user’s customers

As a next step, we stated the goals for each of these user types explicitly to make sure that needs were met for all of them.

Stating the goals - User stories

A user story is a way of stating what tasks a person needs to complete. For example, it can be as simple as: “As a support representative, I should be able to receive a notification that a customer has rated the ticket that I just resolved.”

Here’s a screenshot of one of the lists of user stories for this feature.

The next step was to ensure that this feature met as many of our customers’ needs as possible, while also keeping in mind that the best feature is not one with all the bells and whistles, rather one that meets key needs while still remaining easy to use. This was done by matching a list of feature ideas against the list of user stories. Unnecessary, uncertain, and low priority feature ideas are set aside for consideration at a future date, pending the gathering of customer feedback and usage analytics after the initial ‘minimum viable product’ is released.

Wireframing

Wireframing was the next step, where we came up with a rough outline of how the different components of the feature will be laid out, and how they will work, at every step of the interaction. The idea is to give other team members a feel for where and how functionality will take place in the flow, how images and content will be distributed, how certain aspects of the feature are presented to the end user, and so on.

Designing

After the wireframing was completed and approved by team members, the actual graphics part of the design process started. Once the design was finalized, design specs were created for handoff to the development team.

The screenshot below is a high resolution design with specs for development.

Having a structured design process helps in involving all the stakeholders at various stages of the process for feedback and quick iterations. Once the design was completed, it was followed by development, thorough testing (QA), and then launch.

We’re now busy gathering analytics and hope that you, as our customers, will continue to provide us feedback on the new Customer Satisfaction Ratings feature. We'd like to ensure it works best for your needs, and for those of your customers.