FOX Asset - Maintenance Management System
Comprehensive Brand Identity and Design System for FOX maintenance management system
Overview
FOX Asset, a maintenance management system provider based in Johor, Malaysia, sought to revamp their outdated user interface and design. As the dedicated Product Designer, my role was to reimagine the system’s frontend, establish a design system, and improve user experience through a combination of design upgrades, usability research, and prototyping, All while trying to keep the excising developed skeleton of the systems front end.
Keywords
Product Design, Maintenance Management, User Experience, Design System, Usability Research, Rapid Prototyping, UI/UX
Current Status
The design system and prototype have been successfully implemented, improving the user experience and design consistency across the FOX Asset maintenance management system.
Design Tools
Figma
Team and Collaborations
Collaboration with FOX Asset’s development team to ensure seamless implementation of the new design system.
Regular feedback sessions with stakeholders and end-users to gather insights and refine design choices.
Live Site
Challenges
Inconsistant Design: The existing design lacked a cohesive style and consistency, leading to confusion and inefficiencies for users.
No Design Guidelines: Absence of a design system hindered developers’ ability to maintain a consistent design language.
Frontend Dependencies: Excessive frontend dependencies contributed to slow loading speeds, impacting user satisfaction.
Solutions
Design System Creation: A comprehensive design system was developed to provide a unified design language, ensuring consistent visuals and interactions across the system.
User-Centered Redesign: The design focused on user needs, simplifying complex workflows and emphasizing user-friendly interactions.
Frontend Optimization: Superfluous frontend dependencies were identified and replaced with lightweight components, enhancing loading speed and user experience.
Research
User Research
Leveraging insights from the client’s user research analysis, the design process focuses on addressing user requirements and challenges identified during the analysis.
Market Research
Studied competitors’ maintenance management systems to identify best practices and design trends in the industry. The result of this research concluded that there yet to be clear user experience design best practices in this industry yet. In addition, the competitors in the market still cary on with outdated designs of user interfaces. However, there seem to be a trends starting to form with the use of Modals as they have proven to improve the users experience.
Market competitors
Design Process
The clients request of maintaining the existing structure of the systems front end, and their need for rapid development of the prototype provided a need to skiping the Low fidelity stage and jumping directly into high fidelity design.
Design System
Established a set of design principles including color palette, typography, and iconography for a consistent visual identity.
Colors & Typography of the Design system
UI Components & Organisms
Created an extensive library of UI components & organisms, each documented with usage guidelines to streamline development.
Components and Organisms of the Design system
Prototype Development
Utilized Figma to develop the required high-fidelity interactive prototypes, enabling stakeholders and users to visualize and test the new design.
High fidelity design depicting the use of modals in two of the system flows
User Testing
The Client conducted their own user testing sessions on the interactive prototypes to gather user feedback and validate design decisions.
I then iteratively refined the design based on the client analyses, ensuring optimal user experience.
Future Expansion and Maintenance
Scalability: The design system provides a foundation for future feature enhancements, ensuring new functionalities integrate seamlessly into the existing design.
Ongoing Maintenance: Regular design reviews and updates to the design system will maintain design consistency and accommodate evolving user needs.
Conclusion
The FOX Asset Maintenance Management System’s design transformation involved a systematic approach to address challenges and improve user experience. By establishing a robust design system, analysing the cients thorough research, and implementing user-centered design choices, the redesigned system now offers a streamlined and user-friendly experience, setting the stage for continued growth and enhancement. The collaborative effort between myself and the development teams has resulted in a cohesive, modern, and efficient maintenance management solution that meets user needs and exceeds expectations.