Sync is a tool built for desktop & tablet, used by the Architecture/Engineering/Construction industry to centralize workflows into a single digital platform, enabling real-time updates, structured documentation, and automated daily update reports.
It features role-based permissions and tailored views of the software designed for different use cases—transforming project coordination from an ad-hoc process into a structured workflow.
Being given a basic brand book, we expanded their visual identity while maintaining consistency across all digital touch points.
This process involved designing UI components including navigation bars with active and inactive states, button variations, cards, drop down menus, checklists, toggle bars, standardized typography, iconography, color palettes, and spacing guidelines, ensuring a cohesive design system that supports both light and dark modes for the digital product.
Given the platform’s breadth and the complexity of its interactions, our team anticipated numerous UX scenarios that would need unified and efficient solutions. To address this, we prioritized compactness and clarity as key design principles in this redesign.
To facilitate customization and scalability, we adopted the Ant Design system, known for its comprehensive framework and high-quality components that streamline development and ensure consistency. Additionally, we adhered to WCAG 2.1 AA standards to guarantee accessibility to color-blind (red-green & blue-yellow) users, ensuring the platform is usable by individuals with diverse abilities.
Process
While the project didn’t follow a rigid design methodology, we adhered to a structured process to ensure that the final solution addressed both user needs and business goals.
Results
The redesign introduced optimized solutions for key functionalities, including :
UI Components
The Homepage, Groups and Files pages required significant UI standardization. The pain points on each screen were identified through heuristic evaluation and were further validated by insights from stakeholder feedback during contextual inquiries.
The Tasks page underwent a major UX redesign. Previously, viewing task details opened a split-screen view, compressing the existing content. To address this, a new dialog box was introduced, allowing employees to access task history, comments, details, and descriptions in a consolidated format. This streamlined approach provided a more user-friendly way to summarize individual task information, previously scattered across multiple table columns.
Tasks page (After)
Redesigned elements
Action Buttons:
All CTA’s were made consistent and made easy to access.
Distinct buttons for 'New Task' and 'New Group' were added to minimize clicks and reduce initial user confusion.Pagination:
A clear indication of the user's current page was provided.
Forms > Design Query form (After)
Redesigned elements
Addition of a dialog box when the user clicks 'New form' to simplify the form creation and prevent errors.
The form type could be quickly selected from the dropdown menu in the top-left corner.
Improvised view for filtering form status.
The form number can be easily selected from a dropdown displaying all active DQ forms.
Each form can be edited, with audit history displaying details of who made changes, when they were made, and any comments added.
PDFs of each form can be generated, with the download CTA appearing only when a specific form is open to prevent confusion.
Addition of breadcrumbs for simplified navigation.
Forms > Change Order form (After)
Forms > Blasting Activity Permit form (After)
Redesigned elements
Addition of a dialog box when the user clicks 'New form' to simplify the form creation and prevent errors.
The form structure was redesigned to open on a new page, providing a clear and organized display of each field. A breadcrumb menu was added for easy navigation back to the list of forms.
Radio buttons for 'yes/no' fields, hover interactions for CTAs, and table columns were implemented to provide system feedback to the user.
Frequent users requested the option to delete or edit any row accidentally added to a table while creating a new form, which has now been implemented.
Daily Report (After)
Redesigned elements
Main categories moved to the top and each acts as a tab.
Sub categories under each main category can be chosen from drop down.
Empty states, missing states for fields in the form were added.
Under the ‘Work Items’ tab, users can now add ‘New Task’ and ‘New Subtask’ directly, eliminating the need to repeatedly fill out a new form for the same main task
Under the ‘Plan of Work’ tab, weekly and monthly tasks were now differentiated for ease of use and review.
The 'Daily Report' tab now allows employees to submit weather reports directly, replacing the need for a separate logging platform.
An interactive cursor-follow feature was added to the graphs.
Excavation work permit (EWP)
This form was designed for construction workers on-site to request permission from the project or site manager to excavate a specific area and ensure all necessary arrangements are in place before excavation begins.
Using the new design system and the requests obtained from clients, this new form was created.
A dynamic new layout was designed for the vast fields that the form demands.
Material Inspection report (MIR)
A document used in construction to assess and verify the quality and compliance of materials before they are used in a project. It ensures that materials meet specified standards and are suitable for their intended purpose.
Key features :
Project Information: Details such as project name, location, inspection date, and inspector's name.
Material Details: Information about the materials inspected, including type, grade, manufacturer, and batch numbers.
Inspection Findings: Observations on whether materials meet project specifications, including any deviations or non-conformities.
Photographic Evidence: Visual documentation of the materials' condition.
Deficiency Remediation: Recommendations for addressing any identified issues.
Signatures and Approvals: Sign-offs from the inspector and authorized personnel.
Minutes Of Meeting
A document used to record the key discussions, decisions, and action items from project meetings. It serves as an official record, ensuring that all stakeholders are aligned and aware of their responsibilities.
Key Features :
Project Details: Includes project name, meeting date, location, and attendees.
Agenda Items: Lists topics discussed during the meeting.
Attendees: Specify necessary and optional participants.
Decisions Made: Documents resolutions and agreements reached.
Action Items: Specifies tasks assigned, responsible individuals, and deadlines.
Additional Notes: Records any other pertinent information or observations.
Key Takeaways
Grasping how users view and engage with your system design is crucial, particularly when they come without background knowledge or context - new employees/project managers in this case, or when new people get assigned to an already live project.
As designers, we bear the responsibility of leading our users smoothly through intricate workflows, ensuring every interaction feels intuitive and approachable.
