Hospital Pharmaceutical Inventory Application
Web App UI/UX Design
From Ordinary to Extraordinary: The Skins Factory's Impactful UI/UX Redesign for Acme's Inventory Application
The Skins Factory was brought in for two UI/UX redesign projects by Acme (the Client and service names have been changed to maintain strict confidentiality) to redesign their responsive browser applications. We focused on a super crisp, design language that deploys subtle modern trends, while making sure usability was amplified compared to the previous iterations. Foregoing utilizing a modal system, all secondary screens were created as slide-in panels. Super-wide, horizontal tables were visually broken up with colored, vertical columns.
To address the challenge of wide, horizontal tables with numerous columns, we designed the UI at a wider resolution of 3840 pixels instead of the typical 2400 pixels used in Bootstrap designs. Additionally, we implemented a Column Edit feature that allows users to select and modify column positions on the table.
The Home Screen
The hybrid design of this display effectively blends light and dark panels, resulting in a visually captivating presentation of analytics. In order to maximize the available space for content, we have incorporated a sleek navigation sidebar that remains concealed until hovered over, at which point the navigation title is revealed. The expanded menu can be accessed by clicking on the hamburger icon situated in the top left corner.
Navigation + Menu Systems
- Image 1 shows the various menus and dropdowns deployed
- Image 2 shows an expanded sidebar navigation with extended menus
- Image 3 show an alternative navigation w/menus with users are on smaller displays
The Dashboard
Double column informational panels flanked by simple, color-bursting analytics, breathe life into the screen. When a user views one of the sections of the Dashboard, a slide-out panel appears instead of taking them to a separate page.
Replenishment Report
As you can see by the large amount of columns, to try and eliminate as much side scrolling and page height as possible, we placed the Search Filters in a collapsed sidebar which overlays the table when expanded.
Claims Report
In this particular set of screens, we encountered numerous challenges regarding sizing. To address these issues effectively, we decided to reintroduce slide-in panels and even incorporate a sidebar in one of the screens. As previously mentioned, one of the key advantages of using slide-in panels is their ability to adapt seamlessly to various screen sizes, all while ensuring that users remain on the same screen they are actively engaged with. Given the potentially extensive widths of certain tables within this context, there was a possibility for them to occupy the entire screen if deemed necessary. Additionally, we opted to collapse the Search Filters within a sidebar and employed a color gradient for visually appealing symmetry between these filters and the table itself.
Blacklisted Drugs
