Contact

🔗

User Interface Design, Intranet Application

Background

This project aims to support the development and enhancement of an existing application by transforming an in-house fare regulatory tool into a software solution with a well-designed, user-friendly interface. The goal is to streamline the tool’s functionality while integrating data analytics algorithms into a unified programming language for rail fare charging and apportionment.

Objective

Develop the application using a single programming language
Simplify the current processes of FCAS with user friendly UI
Cater for future station lines and stations with easy maintenance
Enable FCAS to operate on GSIB laptops without requiring internet access

TIMEFRAME
4 months (End to end)

MY ROLEAs the lead designer, I

Ideated and came up with the user flow
Worked with the product owners to understand the key requirements
Worked with developers and project manager to build features

TEAM STRUCTURE1 UI/UX designer, 1 project manager, 2 developers

Our Approach

Waterfall Methodology

This project took alignment from the waterfall model, whereby it prioritised delivery through a linear, phase-by-phase process. The whole design phase lasted for about 3-4 months before handing it over to the developers. By rigorously defining requirements upfront, we mitigated scope changes and ensured timely, well-defined deliverables within the constraints of the project.

Requirements Gathering
& Mapping User Flow

A requirements gathering session was conducted with the stakeholders and key users of the application. This session provided valuable insights into their workflows and how they interact with the software. Based on these groups, I developed three distinct user flows to understand their work processes better which is also essential to served as a foundation for the application design.

1. Administrators The first user flow is designed for administrators, providing a clear and intuitive process for verifying the computed fare charging or apportionment matrix.

They have 2 different workflows: comparing the current matrix with an existing version or create a new version to add new stations, manage station parameters or lines. This computation process also helps to identify any discrepancies.

2. Normal UsersThe second user flow is designed for general users, allowing them to select a specific matrix version for verification and review the computation data.

3. Account ManagersThe third user flow is for account managers, enabling them to create, manage, and modify new or existing users within the application system.

The Process

Design Approach

Prior to the UI design, I prioritised a balanced approach, considering both user-friendliness and technical feasibility. Given the backend was developed in Python and the constraints of a small team size, streamlining the UI was crucial to:

Ensure efficient development.
Optimize performance within technical constraints.
Facilitate seamless integration.

I worked closely with the project manager, software architect, and developers, gathering their input early to ensure design feasiblity. This iterative process involved multiple rounds of refinements while still adhering to the brand colours.

Dashboard Design

The dashboard was designed for clarity and quick scanning, allowing administrators to efficiently monitor and perform necessary actions.

Displaying status, creation details, and associated data for all network versions.
Enabling easy tracking of changes.
Creation of new versions and initiating verification processes.

Application System UI

Administrator

Add Station Flow

When designing this new administrative platform, a core challenge was to ensure that complex data entry tasks, like 'adding a new station,' were intuitive and efficient. The 'Add Station' flow presented below showcases this approach by focusing on:

Minimizing Cognitive LoadStreamlining the process and reducing the number of steps for creating, modifying, and deleting stations or lines.
Enhanced UsabilityIntegrating concise instructional texts directly within input fields to provide immediate guidance and reduce errors.

Create New Stations Permutations

I have also created other instances of different permutations for the creation of new stations that has to be taken into considerations for administrators to configure to make creation much more effective and easy.

Adding the first station on a new line
Adding a new station in between 2 existing stations
Adding a new station at the end of a station line
Adding a new station on 2 different lines
Adding a new MRT/LRT line

Administrators & Normal Users

Perform Matrix Verification

This section details the 'Perform Matrix Verification' workflow, a critical function enabling both administrators and general users to validate computed Fare Charging and Fare Apportionment Matrices. This is achieved by uploading Excel or CSV files from rail operators.

Users can choose between two verification types, each serving a distinct purpose:

Account Managers

User Management Flow

The account management flow was designed to facilitate the creation, modification, and management of user roles. This straightforward process allows account managers to assign users specific permissions, determining who can create, modify, or perform verification within the application system.

View ONESpace SharePoint

Say Hello!

🔗