AT-PAC
Company Type
Medium-Large, Privately-Held
Industry
Industrial
Product Type
Web app
Services
UX Design, UI Design, Product Strategy Workshop
Deliverables
Wireframes, High Fidelity Designs, Design System
AT-PAC is the world leader in the supply of industrial scaffold products. AT-PAC created a SaaS product (Hi-Vis®) to help their clients manage their scaffolding projects. Hi-Vis® provides real-time electronic scaffold management processes to track scaffolding requests, resources, labor, and material for industries like oil, power, or construction.
LunarLab partnered with 3ci, a software development firm, to redesign their UI. The overall project goals for the improved interface were:
- a more efficient UI
- improved, more scalable navigation (some pages had over 25 tabs)
- improved consistency across the system
- make it more visually appealing
Original Designs (Before)
Discovery
LunarLab worked quickly to audit the existing system and identify the biggest usability issues:
- Every time someone clicks something in the side navigation, the navigation collapses down to an icon-only, slim version automatically. Ideally, the person using the menu should be the one to control whether it stays open or closed. In this example, the system is assuming the person wants it closed, and closes it automatically, even if they had it expanded it previously.
- Some pages had over 25 tabs. This tends to happen as software scales. A design pattern chosen at the beginning stages of a product might make sense when you only have 4-5 tabs. As the system grows, you’ll need to rethink the information architecture and adjust your system’s design to accommodate.
- The majority of the screens in the application utilize data tables. The current tables don’t make good use of screen real estate, the horizontal scrolling is wonky, and some of the columns are only useful to specific roles, but the ability to hide columns isn’t currently possible.
Design
Our improved usability recommendations included:
- Improved information hierarchy, which eliminates the overuse of tabs
- A more efficient, tiered navigation that groups similar workflows
- Integrated Kendo UI for Angular for usage in all data tables, which includes robust features like:
- Ability to turn on/off visibility for individual columns
- Ability to save customized filter criteria
- Right-click context menus which improve efficiency for Super Users
- Column Lock feature
- Simplified iconography and clearer labels throughout the UI
- Improved use of color that is WCAG 2.0 compliant
- Utilizing their existing brand colors, we created a new, cleaner, more consistent UI & design system that will ensure consistency as the product scales
