Product Design & User Experience
Updating the general design theme across the entire portal experience. All screens were designed responsively to accommodate those users that were occasionally accessing the portal via a mobile (smaller) viewport size.
Initial rough draft of the Overview screen. This screen offers news, budget summaries, recent orders, product finder and service ticket lists.
Initial idea for a client's budget summary with geographical and relative size visuals for an immediate understanding the key numbers. The team liked this design, however, it was going to be too heavy of a lift for the needed timing to implement all the other changes.
Budget screen with revised chart for a quick visual standing of area pantries with a connected data table for specific location details. Interaction details have bi-directional highlighting of a location and its specific information when user mouses over them.
Listing of all orders specific to a location and its various pantries. Key summary details such as order number, destination and status are presented first and easily scannable. Additional order details such as any pertinent notes and messages exchanged are easily recognized and available for viewing in the Order Details modal (next screen).
Summary details are carried forward for reference with sortable table data for all of the product details in the order. Functions such as search, CSV export and printing are available.
This was the current state of the Overview screen with many data pieces displayed and delivering a bit of a cognitive overload for those new to the experience.
Illustrating the needed details for what can be many levels in the grouping hierarchy for a client's location. Introduced a dynamic "toggle" to reduce the number being displayed with a one-click option to hide or show all levels.
There were many related pages for the Overview screen in the current system with not all of them needing to be viewed by a client‘s team. I introduced a widget for hiding and showing only the desired pages.
Also showing the mobile view of the main navigation and the associated Overview pages.
This widget was in-progress when I wrapped up the assignment. I was working through a way to handle the single week selection of data for all the tracked months and years.
I shared a previously-leveraged plugin for handling a user's preference for viewing tabular data on mobile devices.
Additionally, I provided explicit details to the dev team for styling the plugin for the new theme.
