2022 | Laravel, HTML/CSS, Vue.JS, AWS
Web application for managing client data
Dirk Daude Wastewater Consultancy Services
Challenge
The company needs an online database to store information and documents about their clients and site visits in user-friendly format.
Specification
An initial meeting with the client was held to gather information about their existing data and how they would use the new system.
The client was provided with spreadsheets so they could provide examples of the data the system would need to accommodate.
The main data sets were identified as:
Client - each client can have multiple sites
Site - each site can have multiple plants
Plant - each plant belongs to a site and can have multiple visits
Visit - each visit belongs to a plant
Investing time in these early discussions with the client to understand their content and how they intend to interact with it makes for a more efficient design phase.
Site structure
Designing the database structure identified that the ‘plant’ record was the most logical primary data point – from here the user could quickly access information about the client, site, visits and test results.
Low-fidelity wireframes were created to provide a basic click through prototype to test the user’s journey through the site and make improvements to the design and site structure where necessary.
Dashboard design
In collaboration with the client, we identified the most useful information to display on the dashboard.
Reminders - these are prominently displayed using a contrasting colour.
Upcoming services - displayed with their due date. To help the user, the due date for the next service is automatically populated when a visit it uploaded. A RAG system is used to visually indicate to the user the level of urgency.
Visits - the most recent visits are displayed to provide quick access for uploading reports.
Live search - updates results as the user types to help the user quickly identify the required record.
Responsive
The client wanted to be able to use the database whilst ‘on site’, so the interface design is optimised for usability on smaller screen sizes.
In portrait format list data is displayed as a 'card' instead of a 'table' so information is clearly accessible and doesn't require horizontal scrolling.
Summary
The new system has allowed the client to consolidate their document storage and client records in a format that is now accessible online.
The responsive layout means that engineers are now able to easily access client data on mobile and tablet devices which has made their job easier.