Introduction
In this case study, I demonstrate my advanced prototyping capabilities by combining design skills with software development to craft experiences that secured stakeholder buy-in and generated meaningful insights through usability testing with real users.
Leveraging tools like ProtoPie, Framer, Figma, and even custom code, I created multiple high-fidelity, functional prototypes as well as MVPs — a few of which are showcased below.
1. StarHub TV+ Prototype – Built using Protopie, this prototype interacted with a physical remote control and embedded video content to closely simulate the actual TV experience.
2. StarHub Broadband Plans Wizard – Despite hundreds of permutations (based on home size, plans, and internet speed suggestions), the prototype was efficiently created with just a few screens using Figma and its Variables feature.
3. Singapore Smart Attractions App – My attempt to design and develop a image classification application using ML model and Python to craft an MVP of the app.
4. Horse Racing app – Leveraged newly released Figma features at that time to craft a realistic prototype that effectively communicated the intended design to an external development vendor for accurate quotation.
TV+ PROTOTYPE
1.1 Challenges
Back in 2020, during the StarHub TV+ project, we hit a critical roadblock while preparing for usability testing. Unlike standard mobile or web testing—where users tap or click—the 10-foot TV experience demanded users interact from a distance, using only a remote control's directional buttons.
But here’s the problem: tools like Figma, Sketch, and InVision simply weren’t capable of connecting with external devices like remotes at the time. Without that crucial connection, the entire usability test would fall apart. It wouldn’t just be flawed—it would be meaningless. We were on the brink of running tests that couldn’t reflect the actual user experience at all.
I didn’t back down from the challenge. Instead, I explored the capabilities of Protopie and discovered it could recognize keyboard input events. Building on that insight, I configured event listeners within the prototype to detect keyboard commands and mapped those inputs to control navigation—effectively simulating remote control behavior and bringing the 10-foot experience to life.
1.3 Connecting the dots
However, the challenge didn’t end there. We had the listener—but no “speaker.” In other words, while the prototype could now receive keyboard input, we still had no way of getting the remote to send those signals to the laptop running the prototype.
After digging deep into forums and documentation, we finally discovered a tool called EventViewer from Karabiner-Elements. This application allowed us to detect input from the remote, interpret the commands, and pass them on to the prototype—bridging the critical gap and enabling a fully functional, test-ready 10-foot experience.
Here are several iterations of the prototype we tested—ranging from early wireframes to high-fidelity designs.
Click on one of the prototype and try it out yourself: use the UP, DOWN, LEFT, and RIGHT arrow keys on your keyboard to navigate, ENTER to select, just like using a remote control in a real 10-foot TV experience.
2.1 Project context
In 2024, the "Broadband – Sell it Right" project began after a long-time customer contacted StarHub’s CEO, frustrated by a broadband upgrade that lacked clear cost communication. Their feedback revealed serious flaws in the plan selection process and called out the experience as unethical.
To address this, I collaborated with our UX Researcher & Product team to create a personalized broadband plan wizard —an online tool that guides users through a clear, transparent journey to simplify plan selection and rebuild trust.
2.2 Challenges
In order to validate and test our solution, we need to build the prototype that is flexible is enough to give recommendation to whatever options customer choose when we do the usability testing. We faced few difficult challenges as follows:
There are too many permutations of choices available to customers, based on combinations of dwelling type, dwelling size, number of users, fiber termination points, routers, and Wi-Fi type, as shown below.
If we use the conventional approach of duplicating screens with different states, we would have needed hundreds of screens to account for every possible permutation of customer inputs—just to be able to show dynamic recommendations. It would’ve been a nightmare to build and nearly impossible to maintain, as illustrated below.
2.3 Solutions
Leveraging my formal training and experience in development, I utilized Figma’s Variables feature to define the following structures for the prototype:
Constant values: Assigned constants to hold specific text values, ensuring that any future text changes wouldn’t break the underlying logic referencing them.
Main Object: define the Home object with its properties based on Object-oriented programming (OOP) concept.
Another Main Object: Define the Recommendations objects with properties to be dynamic shown on the result page.
2.4 Define the logics
Now, it's time to look at all permutations, analyse them and write down the logic.
Logic pseudocode: I wrote down the logic in plain language to prepare for next step, adding actual logic code into prototype.
Write actual logic code: into the last step of the wizard so that in the next page where we show result, it will capture the input and calculate the appropriate recommendation.
2.5 Final results
The final prototype replicated the full functionality of the developer-built product—cleaner, more efficient, and much easier to maintain, as shown below.
ATTRACTIONS APP
3.1 Project context
In 2022, as a personal side project while upskilling in AI and Machine Learning, I built an MVP application with image classification capabilities to address a common tourist need:
User Story
As a tourist, I want to explore Singapore’s history, architecture, culture, and cuisine—and understand how to plan my journey accordingly.
Solution
I developed an application powered by an image classification model that could identify architectural landmarks in Singapore. Based on the recognition, the app would display historical information about the building and suggest nearby attractions. (Suggestions for food and itinerary planning were planned but out of scope for the MVP.)
This project also showcases my ability to build prototypes and MVPs beyond design tools like Figma and Protopie—demonstrating a broader potential to solve problems through both design and code.
You name the challenge, and I’ll find the solution to make it real.
3.2 Data preparation
First, I captured and prepared the raw data needed to train the image classification model.
Data Collection
Using my smartphone camera, I gathered images of five major Singapore landmarks:
Marina Bay Sands Hotel
Singapore Merlion
Gardens by the Bay
ArtScience Museum
Esplanade – Theatres on the Bay
Data Extraction & Noise Filtering
To prepare clean training data, I extracted frames from the captured videos using Python scripts. I then filtered out noisy images—specifically those with excessive background clutter such as people, trees, or unrelated buildings—to ensure higher model accuracy and consistency.
Challenges
These landmarks are located in highly popular tourist areas, making it difficult to capture clean images without crowds.
Architectural overlap was another challenge—for example, the ArtScience Museum sits directly in front of Marina Bay Sands, making it hard to isolate each building in photos.
Solution
Waiting for right moment / Looking for right angle to take the photos with the least noise
Zooming in to the unique feature of the architecture
Remove / limit the use of image with overlapping architecture issue.
3.3 Train & tune the model
After the raw data were ready, we started the model training followed by tuning phase and deployed to an Android mobile device.
3.4 Testing the MVP in real life situation
Most of the time model can identify the architecture correctly with confidence from 50 – 90%
In some cases when there are a lot of noises (people, trees, buildings.. behind) it drops to 40%
Please refer to this link for all the testing videos
MVP app can recognise
Marina Bay Sand
up to 92% confidence level
MVP app can recognise
Merlion Park
up to 70% confidence level
MVP app can recognise
Esplanade Theatre
up to 73% confidence level
4.1 Project context
This project centers on designing a dedicated Horse Racing app, launched from a tile in the main StarHub TV app, to transform the live racing content on Channels 88 and 89 into a fully immersive, interactive platform. The current setup delivers only live streams content, offering viewers no deep engagement & insights.
I prepared this prototype by leveraging new features Figma (at that point in time in 2020 - 5 years ago), such as Smart Animate, to effectively communicate the design concept to an external vendor and support their quotation process.
I'm impressed!
You have scrolled this far. I hope you enjoyed exploring my work.
These above are just a few of the projects and prototypes I’ve crafted over my 8+ year career.
I’ve always embraced challenges and stayed on top of new innovations, applying them immediately to the projects I’m working on.
I'm excited about the challenges you might bring — and I look forward to solving them together.