The Challenge:
To redesign a multi-piece application for H2O Analytics – a company that manages water meter repairs and tracks usage statistics for utility companies across the country – with the end goal of producing something more modern, functional, and attractive while keeping code work to a minimum.
Part I: Primary Booking Interface
The images below show the current booking calendar and appointment review interface alongside my first iteration redesign. The redesign uses button and menu styles from Google’s Material Design v3 kit to make the transition to code more efficient for the programmers.
Key Features:
- Increased legibility: rather than having each appointment for a time slot listed on the calendar itself, the list of appointments has been separated out into a panel to the right of the calendar so that the information is still readily available and easy to view.The calendar block only shows the time and the number of booked or open appointments.
When the user clicks on a time block, the corresponding list of appointments for that block is populated on the right. The user can then click the popout icon to view additional information for the appointment or make changes to the booking (this links into the app’s existing functionality). - Aesthetic Upgrade: The new interface uses more modern colors, fonts, and interface elements.
Iteration 3
Message History Modals
Final Iteration
Appointment detail and messaging panels, originally displayed through modal windows, were converted into drill-in panels which expand to fill the window.
In the initial calendar view, the calendar panel and appointments list panel still appear side by side, but the user can also choose to collapse the list and view the calendar at full width.
Part II: Manage Schedule
The manage appointment calendar screens were the most nuanced and challenging to design because of the variety of status attributes possible for a given appointment during its lifecycle. We ultimately handled this with a combination of icons and background colors.
Appointment Lifecycle states:
No work order yet + committed = Unassigned
No work order yet + sandboxed = Assigning
Work order created + committed = Scheduled
Work order created + sandboxed = Reassigning
“No geo-data” is a possible condition at any state (even if unlikely/rare for some states) and needs to be shown alongside lifecycle state.
First Iteration
Final Iteration
Part IV: Manage Device Availability
Part V: Appointment Summary
Component Library
