The project's outcomes significantly improved the organisation's operational efficiency, streamlined internal information management, and enhanced user satisfaction, resulting in a more effective and user-friendly dashboard solution that positively transformed their supply pedestal management processes.

No user research was done for this project but the client provided us with feedback and insight from their real customers, which showed the lack of user independence and the need for a solution.

Thanks to this feedback we were able to not only create but also iterate the functionalities and flows of the app once they were available in the app.

Pain Points

To outline all the necessary steps and functionalities, I created different flow diagram of the main tasks the user can do. One of the flows is shown below. Fail state flows were also created, but are not shown due to space constraints.

In the initial phase of the project, I created paper wireframes as a low-fidelity prototyping method to quickly iterate and visualise the redesigned dashboard's layout, structure, and key functionalities, allowing to gather early feedback and refine the design direction.

Once the paper wireframes were ready, I started creating the low fidelity wireframes of the main flows.

When the initial flows were complete, I started by creating a few of the main screens of the app.

Once the functionalities were ready and tested, real users were able to use them and, from this initial contact, they sent us their comments and queries and we were able to identify areas in the mockups that required further refinement.
One iteration that we considered a priority was to change the appearance of the buttons to open and close the water and electricity supplies, as some users had difficulty identifying them as buttons.
It was also found that first-time users had trouble figuring out all the action that could be be done throughout the application. For this reason, we created a series of animations to be use as in-app tutorials to boost user adoption.

The app has been evaluated for contrast to match the AA standards of WCAG.

When revising the screens I found that the size of some texts needed to be bigger for them to be accessible. The smaller size found within the app is 14px, and these are used for secondary texts. For more relevant ones the smaller size is 16px.

In the final phase of the project, we translated our refined wireframes into high-fidelity mockups, delivering a polished visual representation of the redesigned dashboard that closely resembles the end product, allowing stakeholders to envision the user experience and final design aesthetics.

I picked an 8–point grid for the project and set the margins for within groups at 8 and 16, with margins between groups at 24, 32 and 48.

I connected my high-fidelity designs into a clickable prototype. This will allow me to better present the app to stakeholders and better showcase the features and user flows for development.