Introduction

Designing a dashboard is one of the more complicated tasks a designer can undertake. The large quantity and complexity of information that has to be translated in an easy-to-read manner will put to the test any designer's problem-solving skills. Structured thinking and analysis will be the cornerstones of your journey in tackling this project.

What we will apply here can work on any UI/UX project since this system is structured in such a way as to address any product's requirements.

The Process

We can outline the journey into 4 simple steps:

1. Research
2. Analysis
3. Design
4. Validation

The final file of this tutorial is available for you to explore and use as you see fit. Just click on here to get access to it.

1. Research

When starting out your research, you want to address the basics first. Get to know your product, get to know your user, and find a way to address the user's needs with your product. There are multiple ways to conduct UX research, and the chosen method entirely depends on your budget and time. The most notable ones you can run at different stages of product development are card sorting, mind mapping, first-click testing, user personas, prototyping, usability testing, and many others.

To conduct basic preliminary research, we can start by asking these questions:

• What industry is your product based in?
• What is your product's audience?
• What are their habits and struggles?

These questions address general topics and serve as starting points in nailing down the details of your product and users. You can (and should) go further and ask:

• Who specifically will be using our product? Is it an internal tool, or is it geared towards external usage? What user personas are we talking about?
• What fundamental problem are we trying to solve for our users?
• How are others attempting to solve this problem today? What other notable, similar products are present in my industry?
• What are the user's pain points in using our competitor's products? What are people saying about them?

The questions above should guide you to a better understanding of your users and their needs. Whether the product is an internal tool or made for the general public, you will have to dig for answers in different areas.

Interviews with key stakeholders and past product analyses will point you in the right direction in the case of an internal tool. The issue is slightly different when discussing a product of external use and depends on the client's resources and budget. Gathering information, in this instance, can be achieved by observing the community around a product. People are usually quite vocal on social media about the things they like and even more so about what they don't like in a product.

Take the time to analyze what people say about similar products in your niche. This is your chance to compile research with easily accessible information. Also, remember that user feedback should be coming from people in your target audience and niche, so be sure to keep in mind your answers for the first couple of questions.

All this research ultimately leads to the question that is the gateway to finally unleashing your creativity:

• Is there some way I can provide a better solution to my audience's struggles than what is currently out there?

2. Analysis

The analysis phase begins here. This is the time to deck out those problem-solving skills while also considering your client's requirements. There is no need to reinvent the wheel, but there is always space for optimizing or, at the very least, for finding out the best possible set of solutions for the product.

The most important thing you can do at this stage is implement early testing of an idea through rough prototyping. By consistently testing this early in the design process, you can validate or update your initial assumptions about the product and ultimately save time. It is much harder to implement change when the product features polished design.

At this point in the project, analysis and design can overlap. Going forward, we want to make use of some basic wireframing. By doing so, we structure information in multiple ways depending on its priority and hierarchy. This enables us to have a go at creating numerous pathways for the product to develop. The first solution we come up with of structuring information on a page may not always be the best. To counteract this, we'll have a go at creating as many possible UI scenarios as we can. Use pen and paper, make notes, sketches, and use this to inform several wireframes you deem worthy of a follow-through.

Responsiveness is easier to address at this stage. To aid this, the process of wireframing can easily stretch into low-fidelity prototypes.

3. Design

For this design, we want to focus on creating a grid system that will enable responsive behavior when adjusting to the user's screen size. Consequently, we will create four breakpoints that cover most screen sizes available now in the market. We are talking about:

• Extra-large: 1280px+
• Large: 900px - 1279px
• Medium: 600px - 899px
• Small: 375px - 599px

It is usually best to design at the lowest point within the breakpoint range since it is always easier for design elements to fill and expand rather than contract. While doing this, you also have to keep in mind what device your users are coming from, mobile or desktop.

In terms of grids, we want to implement a column grid that takes into account an 8pt grid system. Grids in Figma can also be applied to a specific part of the page. For example, we may want the vertical menu to be excluded from adhering to the grid system.

In terms of navigation, we're talking about several types: product-wide and page-specific. For product-wide navigation, we'll implement a vertical menu that links every feature and point of interest for the user. For page-specific navigation, we want a horizontal bar that gives the user the ability to quickly access profile info, search for relevant information, and travel back within the same page structure.

Navigation can also represent a way to address responsiveness issues. A collapsible menu is a viable solution for when the user wants to focus on the information on the page, making it a lot less crowded.

On smaller breakpoints, the vertical menu can be accessed from a button included in the horizontal navbar through modal-like behavior.

As for the information modules present on the page, each has to fill the appropriate role for your product. For the sake of this example, we included multiple ways of showcasing the progress of graphs, numbers, and transactions.

4. Validation

The validation phase is slightly akin to the research phase in this project since we want to make sure that the design choices we made fit the solution the product intends to deliver. We can employ the same tactics as in the research phase, interviews with end-users and key stakeholders while giving usability tests, to gauge whether we need to make alterations to the design. This final step is here for you to fix any bugs that may come up during testing.

‍