Dashboard Design
Key redesign features for the general interface:
Sidebar navigation – Redesigned for full-width responsiveness, quick scanability, and addition of collapse functionality.
Top navigation – Condensed to a set of icons. Inclusion of user menu to enable switching between company profiles (new feature).
Row of buttons enabling users to quickly perform key actions.
Before
After
Collapsed dashboard menu; new user menu functionality.
Manage Work Orders – New Advanced Filter System
The Manage Work Orders screen allows utility management companies to perform numerous actions related to a large database of work assignments associated with their clients and workers. Within this interface users can create new work orders, modify existing records, and view customer data.
Our challenge was to redesign the interface to help users navigate this complex array of data and perform related tasks more quickly and easily.
Before
Users can type in full-text search bar or click into overflow menu to reveal pre-populated search options or to switch to “query drop-down mode” to execute boolean logic queries. The old system was clunky and unintuitive.
First Iteration
Search bar and filter panel are separate, although they’re grouped together to imply related functionality. Here the filter panel has been opened. I positioned available actions like Reset and Save Filter Set in accordance with where I thought users would intuitively seek or notice those actions. The panel occupies the same width as the table below, creating some empty space.
Final Design
Starting on the Search Tab
Search and filter were combined into a single function, and the panel is open by default when a user lands on this page.
The panel was condensed to maximize efficiency of space.
There was a lot of debate within our team about whether to keep the search bar at all since the filter system could perform the same functions with greater precision and clarity. I argued strongly in favor of keeping the search bar, because it is the quickest and easiest way for many users to reach their goal. The search bar is also a ubiquitous feature that users expect to see.
The compromise I proposed can be seen in the following sequence of screens. Once a user searches, they are automatically moved over to the filtering tab with their previous search formatted as a filter, allowing them to refine their search by continuing to add filters if they wish.
Below, the user’s search has been formulated as a filter.
*Note: the upcoming screens are from an in-between iteration where we briefly labeled the button “Advanced Search” before ultimately landing on”Search & Filter”, which we agreed was more clear and accurate.
Starting on the Filter Tab
Users can select from the most commonly used filters, from their saved filters, or they can create a new filter group.
An example of multiple filters with “and” and “or” logic.
Once the filters have been applied, search results will be populated in the table below. Users can modify their search parameters by clicking the “Edit Filter” button, or they can choose to save their filter set for later use, which will prompt a dialogue.
Message Blast Wizard
This piece of the app allows management companies to mass message their clients using email, SMS, and voice messaging. The original interface was housed in a tabbed modal window that would pop up over any screen you happened to be on. I reworked this system so that it would have its own dedicated screen, with a step-by-step wizard style interface to lead users through the process of creating and sending their message.
1. Select Recipients
2. Choose & Edit Message Template
2. b. Select message type to edit
Once a template type is chosen, the menu drills in to message types.
2. c. Edit message content
This part of the flow represented the bulk of the heavy listing for the redesign. I built this interface to allow users to edit their content within the larger context of the template, to switch easily between translations in multi-lingual situations, to get real-time feedback on the status of their edits, and to be able to have fine control over saving and committing or discarding changes.
In the old system, users would choose their template and then enter their customized message text in a separate tab.
When the message has been edited but is still unsaved, an elipsis icon appears beside the message type that is being edited.
In the current system, accounts that have been marked as multilingual automatically require a translation. So in this model, we have a translate dialogue trigger automatically where once the English version has been saved, allowing the user to choose between Google Translate or manual translation, and moving them forward to the next step.
Once all changes have been saved, a check mark icon appears beside the message type.
Also note that once the message has been saved, the blue background behind the editable portion of the text disappears, but the dotted line remains, indicating that this text may still be altered.
3. Review & Send
The user gets confirmation of all the messages they are about to send, and to what audience.
The H2O system doesn’t send messages automatically, but adds them to a pending messages queue where users have to go and take additional action to send the messages, so I provided a link to that screen here for convenience beside the confirmation message.
Client Records Search & Tagging
User executes search.
User selects records to view.
Default view of record summary tab.
Tag overflow.
Adding an existing tag.
Creating a new tag.
Figma Component Library
