Employment pass solution for Singapore Government

Key features and solutions

This project centered on creating a scalable, user-friendly platform by leveraging modern front-end practices and ensuring accessibility, while everything was focused on addressing key pain points and continuously iterating design prototypes through feedback loops.

Progressive enhancement and balanced browser support

Ensured core functionality for older systems through progressive enhancement while delivering optimized and enhanced experiences for modern browsers. This approach included browser upgrade prompts, a legacy browser matrix, and regular testing to maintain compatibility and respect user needs across diverse devices and platforms.

/* Base styles for progressive enhancement */
@import "style_guide/base/colors";
@import "style_guide/base/breakpoints";
@import "style_guide/base/dimensions";

/* Layout fallback for legacy browsers */
.container {
  display: block; /* Ensures compatibility with older browsers */
  width: var(--container-width); /* Dynamic variable for layout width */
  margin: 0 auto; /* Center align for consistency */
}

/* Enhanced layout for modern browsers */
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--grid-gap);
  }
}

/* Responsive adjustments */
@media (max-width: var(--breakpoint-medium)) {
  .container {
    width: 100%;
    padding: var(--container-padding); /* Scalable padding */
  }
}

/* Progressive enhancement for modern interaction */
button {
  background: var(--primary-color);
  color: var(--text-light);
  border: none;
  padding: var(--button-padding);
  cursor: pointer;
}

@supports (filter: brightness(1.2)) {
  button:hover {
    filter: brightness(1.2); /* Subtle hover effect for supported browsers */
  }
}

Reusable components:

Developed a modular component library to streamline development and ensure consistency across the platform.

/* Atoms for buttons */
@import "style_guide/atoms/buttons";
@import "style_guide/atoms/links";

/* Components for form elements */
@import "style_guide/components/text_field";
@import "style_guide/components/checkbox";
@import "style_guide/components/radio_button";

Dynamic user flows:

Designed intuitive interfaces to guide users through complex application processes, minimizing errors and improving clarity.

<!-- Dynamic form flow with user feedback -->
<div class="form-step">
  <label for="user-name">Name</label>
  <input type="text" id="user-name" placeholder="Enter your name" required>
</div>
<script>
  document.querySelector('#user-name').addEventListener('input', function() {
    if (this.value.length > 0) {
      this.classList.add('valid-input');
    } else {
      this.classList.remove('valid-input');
    }
  });
</script>

Accessibility-focused design:

Adhered to WCAG standards, making the platform accessible to users of all abilities.

<!-- Accessible modal component -->
<div role="dialog" aria-labelledby="modal-title" aria-describedby="modal-description">
  <h2 id="modal-title">Confirmation</h2>
  <p id="modal-description">Your application has been submitted successfully.</p>
  <button aria-label="Close">Close</button>
</div>

Seamless integration:

Worked with backend teams to integrate over ten external systems, enabling smooth data flow and real-time updates.

// API integration example
fetch('/api/external-system')
  .then(response => response.json())
  .then(data => console.log('Data received:', data))
  .catch(error => console.error('Error:', error));

Outcomes

The launch of the Work Pass Integrated System (WPIS) achieved significant success, reflected in the following key performance indicators and achievements:

• Efficiency: Reduced application processing time to under 3.5 minutes, even during peak hours.
• Operational impact: Decreased call center inquiries by 30% due to enhanced self-help features.
• Adoption: Increased self-help usage by 15%, showcasing a user-centric platform design.
• Scalability: Successfully integrated with more than ten external systems, ensuring seamless data flow.
• User satisfaction: Consistently rated above 5 out of 6 by users.
• Recognition: Passed multiple code and security audits and won numerous awards within the ministry and government, including the Best UI and UX Design Award at the GovInsider Innovation Awards 2016.
• Performance: Tested for up to 8 years of system load, ensuring long-term reliability.
• High availability: Maintained continuous deployment with stable performance through peak operational periods.

Despite its success, the project faced several challenges, which were addressed with effective solutions: