Managed the deployment of a custom-branded page framework for Deep Tech Central, coordinating between design assets and front-end development to streamline the onboarding experience for external partners
Project Details
Client: SGInnovate
Sector: UI/UX, Product Management
My role:
Applied user-centered insights to optimize the usability and functionality of Partner Branded Pages
Create and shape the Partner branded Page in an agile environment using the Project Life Cycle
Conduct user assurance test(UAT) checks to ensure all features within are developed according to written ACs for each ticket
Create bug tickets if more issues are found on DTC and Partner Branded Pages
Project Time: 3 months
The development of Partner branded Page goes through 5 iterative stages of the Project Life Cycle! Each stage involves weekly product huddles and bi-weekly dev meetings to align given requirements, handoff revisions, and discuss possible implications.
✍️Initiation
A feature that creates and manages an external page of Deep Tech Central (DTC) with existing curated listings. This external page is fully customizable to match the exetrnal organisation's branding, including logos, color schemes, and headers.
Make Deep Tech Relatable: Growing the Deep Tech Central community by telling human stories instead of just listing/promoting modules. Curating module listings around topics people actually care about, Partner Branded Pages make the users feel relatable and inviting while navigating through it.
Create a Home for Partners: Enable external organisations to pair with SGInnovate to create a space they can truly own, giving them the flexibility to rebrand and tailor their pages to reflect their own unique identity.
Public Users
Users who have not registered an account in DTC
Basic Users
Users who have registered an account in DTC
Organisation Users
Users who are assigned under a listed organisation in DTC
Executives
SGInnovate Admins who manage all listings in DTC
Start with a site map to establish a high-level concept of how Partner Branded Pages are integrated as a tab within DTC and their relationship to DTC’s targeted users.
Each Partner Branded Page will share listings of the following modules that are available in Deep Tech Central.
🎯Planning
After researching the Partner Branded Page to understand its functionality, I broke down its features into multiple user stories. Each story was added to a ticket with detailed acceptance criteria. I then prioritised these tickets using an Impact vs. Effort analysis. This is a crucial stage for laying the groundwork and determining which screens to design first.
Explore prioritised Jira tickets on Miro.
✏️Execution
Tasking with working on the Basic user & Organisation user flows, I start with creating user flows of both of these users. To ensure development clarity, I break down user flows into Jira tickets. Each ticket includes a user summary, mobile-ready UI specifications, and a linked Figma file mapped to the target user. Additionally, I define every micro-interaction and edge cases or system implications for each criterion. Select any quick links below to view specific user flows, screens and Jira documentation.
User flow for Public / Basic users: Navigating between module listings within Partner Branded Pages.
Explore the user flow by clicking and dragging, and use Ctrl +/- to zoom.
User Interface Design for Public / Basic users: Navigating between module listings within Partner Branded Pages.
Explore the user flow by clicking and dragging, and use Ctrl +/- to zoom.
User flow for Public / Basic users: View and register for an event/course in the Partner Branded Page
Navigate the user flow by clicking and dragging, and use Ctrl +/- to zoom.
User Interface Design for Public / Basic users: View and register for an event/course in the Partner Branded Page.
Explore the designs by clicking and dragging, and use Ctrl +/- to zoom.
Events and Courses also share the following user flows below if the basic user is viewing and registering for them.
User flow for Public / Basic users: View and register for a module via the Partner Branded Page.
Navigate the user flow by clicking and dragging, and use Ctrl +/- to zoom.
User Interface Design for Public / Basic users: View and register for an Opportunity opening via the Partner Branded Page.
Explore the designs by clicking and dragging, and use Ctrl +/- to zoom.
User Interface Design for Public / Basic users: View and register for an project opening via the Partner Branded Page.
Explore the designs by clicking and dragging, and use Ctrl +/- to zoom.
User Interface Design for Public / Basic users: View and register for a job opening via the Partner Branded Page.
Explore the designs by clicking and dragging, and use Ctrl +/- to zoom.
Since Partner Branded Pages are a subset of DTC, the user flow is tied directly to the module management process. While the Branded Page serves as the display layer, DTC remains the primary platform for organizations to create and manage their listings.
User flow for Organisation users: Managing module display settings and accessing the external Partner Branded Page URL.
Navigate the user flow by clicking and dragging, and use Ctrl +/- to zoom.
Opportunities, Talent Programmes and Jobs also share similar feature behaviours as the following user interface design below.
User Interface Design for Organisation users: Manage module display settings for event/course/e-learning listings
Explore the designs by clicking and dragging, and use Ctrl +/- to zoom.
🖥️Monitoring & Controlling
After handing off all screens to the Devs, the tasks are monitored via Jira according to the workflow below.
Disclaimer: The above system is not created by me but a replica to view a visual breakdown of how each task is managed while creating Partner Branded Pages
💡Starting a Task
Task starts at OPEN status. From here:
If the task is not determined as a potential bug or has already been implemented, it will be shifted to CLOSED status.
If the task is taken up by the Development team, it's status will be shifted to INVESTIGATION IN PROGRESS.
🔁Task Development & Iterations
Task continues at INVESTIGATION IN PROGRESS status. From here:
If the Development team discovers some potential implications to the design or if Design team discovers that some designs needed to be edited or added, task's status will be shifted to PENDING SGI CLARIFICATIONS.
Once implications have been resolved either via quick meetings or once designs have been created, task will be shifted to INVESTIGATION IN PROGRESS status
🖌️Work in Progress
Once all clarifications are addressed, the task continues at IN DEVELOPMENT status where the Development team will develop the feature onto a testing site. This testing site is a replica of the actual site but filled with dummy data for easy testing of features before they are deployed to the actual site. From here:
Once the Development team has completed development of the task on the testing site, the task status will be shifted to IN UAT.
🧪Testing Phase
Once all developments to the test site are completed , the task continues at IN UAT status. The Design team will check the according to the Acceptance Criterias(ACs) listed within the task in the testing site. From here:
Each AC of the task will then be video recorded to prove that the feature has been checked. Each video then be listed under the comments section of each task. (Labelled with Header: UAT Verified)
If there are some bugs discovered during testing of ACs, the task status will be shifted to PENDING CLARIFICATIONS
Development team will then to look into and fix discovered bugs. Task's status will be shifted to FIX IN PROGRESS.
if no bugs are discovered on Development team's end, task's status will be shifted back to IN UAT.
if discovered bugs are fixed, task's status will be shifted to IN UAT. Design team will need to do another check of the ACs
Once all ACs are checked, task's status will be shifted to UAT Passed.
At a planned date, the Development and Design team will then schedule a date and time for a deployment of this task into the actual site. Task status will be shifted to AWAITING DEPLOYMENT.
At this point, an announcement of the actual site going on maintance will be sent to all relevant teams who maybe using the actual site if necessary
🎉Completion
Once the deployment to the actual site is completed , the task status shifts and continues at IN PRODUCTION status. The Design team will then check the according to the Acceptance Criterias(ACs) listed within the task in the actual site. From here:
Each AC of the task will then be video recorded to prove that the feature has been checked. Each video then be listed under the comments section of each task. (Labelled with Header: Prod Verified)
If there are some bugs discovered during testing of ACs, the task status will be shifted to PENDING CLARIFICATIONS for Development team to look into and fix discovered bugs.
if no bugs are discovered on Development team's end, task's status will be shifted back to IN PRODUCTION.
Once discovered bugs are fixed, task's status will be shifted to IN PRODUCTION. Design team will need to do another check of the ACs
Once all ACs are checked in the actual site, task's status will be shifted to DONE.
At DONE status, the feature will be live on the actual site!
If there are still discovered bugs after this stage, it will be written as a separate task where it will go through a new task life cycle.
🎉Closure
When I first started managing Partner Branded Pages, I went in thinking my designs would speak for themselves. I quickly realised, however, that handing over "just Figma screens" left my developers in a tough spot. They were often stuck guessing which buttons to update or which specific colours to swap. To fix this, I started adding mini UI notes and documenting every interaction in detail. Moving beyond just the visuals to provide a clear "how-to" for the build has been a game-changer. Additionally, it takes the guesswork out of the development process and ensures the final product actually matches the acceptance criterias.
To ensure a well-rounded feature release, every edge case must be thoroughly evaluated. For the Partner Branded Pages, we are addressing the following ones:
External Redirection: Users registering via Deep Tech Central (DTC) must see a redirection screen. This informs them they are leaving the current site, preventing confusion.
Access Control: Organisation users viewing a module they did not create should be restricted from viewing user activity data; this data should only be visible to the module's creator.
Empty States: We need to define the 'basic user' experience for instances where no module listings exist—specifically, whether they encounter a themed empty state or a standard screen.
Persistent filters: After applying filters, users should be able to see the applied filters when toggling back to the same listing from a separate page.
The above list isn't everything, but it shows why I need to think through these scenarios early on. It’s the only way to really nail the feature and make sure all our bases are covered.
It’s easy for small details to slip through the cracks when jumping back and forth between Jira tickets. I often find myself double-checking my documentation against my Figma screens over and over just to make sure the notes match the visuals, and everything is typo-free.
By 30 November 2025, this feature will have been developed and deployed on the live site: sginnovate.com. Click to view the user guides below to try it on the live site!
Disclaimer: The following user guides are only for viewing portfolio purposes. No distributions are allowed.