Build Better Dashboards – Process

Intro

Want to create dashboards but don't know where to start?

Focus your attention on our "Build Better Dashboards" recommendation, which is based on the proven "design- led-development" process, often used in software product design. This approach has been successfully used in collaborative environments where end users, designers, product experts, and development teams work hand in hand to achieve an optimal user experience and successfully meet user needs.

Design-led development - process

We mainly focus on the following 3 main steps of the process

Discover Phase

Understand the needs of your end users and turn this information into insights by working
step by step through the user research process.

Design Phase

Translate insights and results from the user research phase into a design proposal.

Develop Phase

Implement the final results from the design phase into predefined SAC templates
and learn how to customize and extend the predefined SAP Analytics Cloud template.

1. Discover Phase

The discover phase (also known as User Research) focuses on understanding customer and end-user needs through on-site visits, interviews, and observations. The goal is to comprehend business roles, tasks, pain points, and the sequence of activities. Documented insights inform the design phase, ensuring a high-quality user experience and benefiting both the product and end users.

Focusing On the User

What Are the Benefits?

There are some clear advantages of putting the end user at the center of an analytic product development from the start and therefore tailoring the product to their needs.

• First, and most important, focusing on the user helps the project team to gain an understanding of the necessary insights (context of use, user needs, requirements) related to the targeted product.
  It can also lead to insights that in turn lead to further innovative products.
• If different opinions regarding functions or content slow progress during the project, the insights gained from the users can help to find a common solution.
• The user feels like they are taken seriously when they participate in the development of a product.
• The user is more likely to use the product if their needs are met.
• If the product fits the user, they don't have to choose another product, which builds brand trust.
• The development team builds its reputation by developing customer-centric products that
  end-users want to use.
• If end users are available during the development process, it's easy to validate open questions or changes with them. Ultimately, this saves the company money and time

User Research Process

Preparing Research

Before starting your research, plan your course of action. In the beginning, ask yourself:

• What insights am I looking for?
• What are the objectives?
• What questions do I want to answer?

There are several UX methods to gather user requirements and needs, such as user interviews, focus groups, surveys, A/B testing, and desk research.
In this blog we´re focus on user interviews.

Basic Tips for conducting user interviews with End Users:

• Prepare an interview guide before the interview.

• Avoid questions that force the user to answer yes or no. Instead, use open-ended questions that start with "when", "how", "where", "why" or "what".

• To prevent the interviewees from getting confused, explain the purpose of the interview and the related goals at the beginning of the interview.

• Introduce yourself and others from your side during the beginning of the interview.

• Ask thoughtful questions that help the interviewees to formulate and clarify their model.

• Be aware that an interviewee will not always say everything directly, because:

  • The interviewee takes something for granted (even if it is not).
  • The interviewee can't think about everything at the moment.
  • Do not discuss technical feasibility too early but try to understand the requirement correctly first.
  • Try to find note takers and observers for your interview, instead of conducting it alone. Other people might gather additional information and impressions.

Evaluate Research

After conducting your research, evaluate your insights to decide with ones are relevant for your project and will help you during the design phase and later. Synthesis is the process of combining findings and research results into useful information.

Step 1: Extract and Summarize Data

From the interviews conducted, find the relevant information that supports the definition of your product. Write these on sticky notes. The minimal size of the sticky note forces you to reduce the information to the most important parts. Try to use only one sticky note per piece of information.

Step 2: Group the Information

After collecting the information on sticky notes, group similar information/thoughts into a category. Give each category a heading. The headings can be general at the beginning, but the more you iterate across the different clusters, you will gradually discover more specific terminology.

Step 3: Turn "Information" into “Insights”

This is the most interesting, but also the most difficult, step. For this part of the process, the team transforms the collected information into actual insights. It's important to note that the definition of insights can be interpreted very individually. Therefore, try to challenge assumptions or opinions within the team. The team should establish appropriate definitions at this stage.

What might count as insights? Some examples:

• Commonly known information, or the so-called “must-haves”
• A new perspective from the user's point of view
• Needs and problems about which the users themselves were previously unaware
• How the end user really thinks or behaves
• Insights that can influence design decisions
• Findings that can be implemented currently versus ideas for future releases

2. Design Phase

Equipped with findings from the discovery phase, the design phase can start, resulting in an initial prototype validated by end users. By the end of the design phase, a ready-to-implement design is achieved.

After gathering insights and results from the user research phase, the team should work together to translate the results into an initial design proposal. This can be implemented at various levels of detail. We recommend at least a "low fidelity" Mock-Up.

Low-Fidelity Mock-Up

A low-fi (low fidelity) mock-up is a visualization that focuses mainly on the content, the structure, and the individual required steps of an application/dashboard. The result should be simple and without high-level details. This type of prototype offers advantages in internal team communication and allows for easy validation of design ideas with end users. You can either draw a mock-up by hand on paper, draw it digitally, or use the Figma Library for schematic dashboard visualization.

Gather Iterative Feedback, Decide, and Adjust

Creating low-fi mock-ups is subject to an iterative process. This means constant validation of feedback and decisions with the end users involved. With the help of a mock-up, it is easy to implement corresponding adjustments at any time. This ensures that the end result is a construct that meets the needs and requirements of the user. Ultimately, after the last round of validation with the user and the team, the final mock-up can then be implemented directly in SAC without the need to create another pixel-perfect high-fidelity prototype.

Mock-Up Drawn Using Digital Device

Low-fi mock-ups drawn by hand or digitally allow for quick and easy creation and immediate adjustments or refinements to the design, as well as rapid idea generation.

Mock-Up Created with Figma

Low-fi mock-ups created with the Figma UI Kit streamline the design process by providing ready-to-use components, ensuring a consistent and professional look for the mock-ups, while allowing for interaction. Download the Figma Library for schematic dashboard visualization.

Additional Ressources
Link to Figma Schematics UI Kit on GitHub

Additional Layouts

The following layouts have been designed for special use cases:

Additional Layouts

The following layouts have been designed for special use cases:

Related Links

The following frameworks are also used to design pages:

[internal_only]

[/internal_only][external_only]