Precise

Project Overview

Precise Inc. is a Toronto based company that develops hardware and software to enable construction companies to measure the integrity and stability of concrete after it has been poured. Prior to this technology, workers would be required to manually take measurements several times per day which can often lead to errors in accuracy as well as delays in data delivery and exorbitant costs for contractors. This technology minimizes errors and allows engineers to assess data in real time while cutting down on costs.

 

My role in working with the team was to reimagine their dashboard design from both a UI and UX perspective and to create an aesthetically pleasing design that conveys the most important information while allowing users to easily complete several basic tasks. This dashboard design also provides the team with an aesthetic that can be used throughout the rest of their application.

Role

UI Designer

UX Designer

Tools

Adobe XD

Before Redesign

Below is the original dashboard design. The minimalist design is intentional, however, it clearly was not making the best use of space and the layout is inefficient. A good rule of thumb for dashboard design is to have the most relevant data at the top and to hide information that isn’t of the utmost importance to the user. This design breaks that rule and is displaying data (such as the hardware product number) that isn’t immediately relevant to the user. Further, alerts are hidden at the top and do not warn the user of significant changes, which could be critical.

 

After Redesign

Below is the refreshed and redesigned version of the dashboard with new colours, fonts, icons, and layout. Unimportant information is hidden in the ‘Status’ drop down at the top right and the interface has been completely revamped with navigational and action items now integrated in a collapsible side bar. This design is a huge step forward in terms of user efficiency, safety, and overall aesthetic.

Alerts

If the hardware detects movement of 2mm or greater this could be a critical situation, therefore the user needs to be alerted of this in the app in an obvious way. The new design highlights the alerts tab in red to capture the user’s attention immediately if there is a scenario that requires attention.

Two Graphs and Data Sets

The team at Precise suspects there could be some correlation between temperature and movement. The new design takes this into account by separating the data for each to allow the user to easily make comparisons, noting if there is any correlation. Also, the user is able to hide/display data from within the ‘Readings’ boxes. This both cleans up the original design and streamlines the user experience.

Action Items

The user can add notes and images using the over-sized buttons for these actions in the sidebar. The size of these buttons is due to the fact that the app will normally be accessed by workers while on site and therefore provides easier access to completing these actions.

Outcome and Next Steps

This is an ongoing project that will require continued work to complete the design on the remaining screens of the application. The team is currently moving forward in developing the app further and will be utilizing the elements of this design to continue improving their product.