About the platforms

The ERP system helps manage industrial construction projects throughout Australia and New Zealand. We are working on:

LinkedSite mobile and web application

• Captures real-time data, enabling the delivery team and subcontract partners to manage cost, time, and production for work being conducted in real-time. This includes controlling products, managing projects, internal and external resources, and tracking time, cost, and progress of projects.

LinkedOffice Web Application:

• Supports Excel-like input, insightful reporting, data visualization with charts, and report exporting.
• Main modules include cost control, contract valuation, cost forecasting, head contracts, and vendor management.

Linked Map:

• Allows viewing live resources and machinery on the web platform in real-time.
• Utilizes geographic technology to provide real-time project overviews and track operations, vehicle usage, and behaviors.

AIMS: Integrated Management System

• All in one introduction of system guidelines and way of working

Assessment of Existing Product:

The project has been developed over five years and is scaling up. As I discover the applications are using multiple library for each application, mostly are Ant Design and MUI, and there are many new custom components that not follow any rule.

As the project scaled up and more people became involved, it is necessary to establish a common language for the development team and business analysts (BAs) for collaborating. As a designer I help systematic the existing applications and base on it to maintain and design for new applications

Define:

• Define components and design patterns for each project.
• Assist the development team and BA team in aligning with each other in design language.
• Improve UX for new flows and enhance existing flows to improve responsiveness.

Analysis of Existing UI/UX:

• Evaluate the strengths and weaknesses of the current UI/UX design: the interface of the ERP system are using many overlap components thus the interactions are not sync with each other
• Identify the common components, pattern and get feedback about the most satisfying elements and the least one to improvement based on best practices.
• Investigate the dev site to adjust the initial design file with the real products

Stakeholders and Team Collaboration:

• Explore to understand stakeholders and how people collaborate to include the design role as part of the process and bring value to the regular workflow.
• Business decisions are made by stakeholders, and the BA team forms requirements, drafts visuals, and sends them to the development team for implementation. As a designer from VN, my role is to assist the FE team in qualifying requirements, improving UI drafts from the BA, following the design style guide and library, enhancing UX, responsiveness, and ensuring satisfaction for both business and development teams.

Success Criteria:

• Reduce discussion time between development and BA teams by providing visual designs aligned with the developer library and explaining UX improvements.
• Bring value as a designer to the team

Design Process:

Research and Discovery:

I conducted investigations the original figma with existing platform to documenting the style guide, elements and components

Explore all applications to see what library there are using and how is the work process

From the finding, create new set of components to align the design file with the current products, define the style to develop for other products

Ideation and Conceptualization:

• To improve the design's ability to handle new tasks quickly, I updated main elements reused in the product (such as the header, navbar,.....). I also updated the style guide to ensure visual consistency with the web app.
• Recreated the MUI design system (for LinkedSite) and Ant design system (for LinkedOffice) to quickly recreate screens when enhancing or creating new features.
• Documented design element changes, considering another designer from the client site also works on the project.
• Communicated with developers, BAs, and designers from the client site to understand the app's flows, and bring value to the process.

Iterative Design:

• Developed high-fidelity mockups based on wireframes to add visual elements and details.
• My main task mostly involved enhancing existing screens or creating new flows based on BA requirements.Incorporated feedback from stakeholders and usability testing to refine the designs.
• Iterated on the designs as necessary to improve usability and user experience.

Visual Design:

• Applied visual design principles to enhance the aesthetics and branding of the product.
• Created a style guide to maintain consistency across UI elements.Ensured accessibility and readability of design elements

Collaboration with Developers:

• Worked closely with the development team to ensure the design was suitable and convenient for implementation.
• Provided clear and detailed design specifications, including UI assets and interaction patterns.Maintained open communication channels to address any questions or concerns from developers.
• Collaborated on resolving design-implementation discrepancies and finding feasible solutions.

‍

Implementation Support:

• Collaborated with developers to ensure accurate implementation of the design.
• Provided support and guidance during the development process to address any design-related issues.

‍

‍