Understanding the context
The greatest difficulty was to quickly learn the context. The client provided all the technical specifications of the installations and showed how the installations were managed.
The continuous work also in the other phases was to make the information and functions clear, giving the interface a high level of readability and discoverability of the information.
Understanding the users
A proper definition of the users and the relationship between them made me realise the complexities of information visibility. Once the users and their relationships had been defined, it was possible to work on the logic of navigation, filters, complexity and depth of the information to be displayed.
Information & function
Once the context and users were defined, another piece of work was started with the client to figure out what data to show and how. Starting with the historical data set, we went on to figure out what data to show at the various depth levels. To do this, we shared the confluence pages containing tables that grouped the data by screen and indicated the order in which it was displayed.
Based on these, screens were designed using the wireframe design system on sketch and prototypes shared on InVision. On Invision, it was possible to collaborate in order to define which type of graph to adopt for each data set.
Parallel to gathering requirements on data and functionality, research was conducted on the visuals the web app should have. There was no brand book, so it was decided to propose two visual alternatives that were in line with the company’s other touchpoints.
To speed up design operations, I worked by applying the visual chosen by the customer to a copy of the wireframe library. In this way, the new visual library inherited the component names. Consequently, it was very easy to update the prototype by replacing the wireframe components with the visual ones. The next step was to update the InVision screens, which still retained all the existing links.
Update visual faster
In the same way that I modified the wireframe prototype with the visual library, it was equally easy to update all touchpoints with the client’s branding requirements.
Thus saving hours already from the design phase. The project totalled 120h between design and gathering requirements.