Lim Jiechao
Loading portfolio
Lim Jiechao
A product-minded engineer with 8 years’ experience crafting B2B and B2C web apps. Passionate about aligning business intent, technical capabilities, and end-user experience into thoughtful, pragmatic, and scalable implementations that achieve product fit.
E-Commerce
Secretlab SKINS
Major New Product Line Launch
Virtual Clinical Trials
KEMIP, Nestlé Health Science, Canada
Product Management
Collaborated with resident clinical trial expert to design the end to end workflow that is compliant with the clinical trial protocol.
Collaborated with resident clinical trial expert to design the phase progression to ensure that patients are compliant with the clinical trial protocol and proper capture of patient reported data.
Component Library
- This component library was built from scratch with Vue 3, TypeScript, Tailwind CSS, as well as vanilla HTML and CSS snippets adapted from Tailwind UI.
- It has light and dark mode which can be toggled with CSS dark class.
- As of May 2022, it has 23 presentational and 13 input components and has been used across 4 projects.
This clinical trial web module was a high-value full stack project. The bespoke component library was conceptualized and built specifically for clinical trials.
- The blinking man in the study progression chevron is the first thing that catches the user’s attention in the study module main view. The intention was to invite the user to read the top card which serves as a summary of where the user is in the study as well as the list of daily tasks to be completed in order to be fully compliant. This component is a custom SVG creation and animated with CSS.
- The traffic light calendar visualizes the user’s progress within a study phase. When there are outstanding tasks for a day, a yellow circle with a pencil is shown. When all tasks are done, a green circle with a tick is earned. If the user fails to complete all the daily tasks, a red circle with a cross is shown. This design strives to motivate users to finish all the daily tasks in order to earn a “sea of green circles with approval ticks”. Component is a custom creation as no such off-the-shelf calendar component exists.
- A lot of attention was paid to the component shadows, gradient background, text colors and spacing to ensure everything composes well and nothing looks out of place. The graphics, all SVGs, were painstakingly curated and in some cases, tweaked and recomposed so that they all look handpicked for the occasion and sit well with one another in the overall aesthetics.
Questionnaire Engine
Based on Typeform, the questionnaire engine has been used in clinical studies for prescreening and scheduled patient reported outcomes as well as for onboarding in patient support modules.
Survey Engine Component
- Left video shows the battle-tested Vue 3 version, right video shows the latest reincarnation in React with ample sequential entrance and exit transitions.
- The Vue 3 version exists as a standalone deployment as well as a component directly embedded into modules for a more seamless experience.
- Many custom question types have been created to meet the needs of clinical studies.
B2C Patient Support
Patient Reports
These monthly premium reports, delivered to over 10,000 MBplus subscribers of the Migraine Buddy app, were implemented to such a level of fidelity it is virtually indistinguishable when placed beside designer prototypes.
- One report is created in React and the other in Vue 3, but both are powered by the same custom component style library written in SASS and CSS Module, ensuring a consistent look and feel. No CSS framework was used.
- The charts are created with ApexCharts.js and Chart.js. All line charts feature subtle gradient fill.
- The bubble data labels on the Trigger Trends line chart of the Triggers & Migraine report were created by injecting programmatically created HTML
divelement nested in SVGforeignObjectso that the figures are vertically and horizontally centered within the bubbles.
B2B Patient Support
Patient Support Modules
Patient support modules are recurring low-value (~USD 80,000) B2B contracts which do not justify time and effort in a large amount of project-specific code. The solution was to build a library of reusable content blocks with the aforementioned component library using the versatile card metaphor popularized by Google.
The following videos showcase reusable components from the content block library to allow efficient development of polished modules that is adaptable to clients’ needs.
Rich Content Cards & Meditation Component
- A generic V-Calendar component is meticulously restyled to blend in harmoniously with the rest of the component library.
- A wide variety of rich content cards with action buttons can be seen throughout this video (, , , , , , , , , ). Notice that the content blocks cards are virtually indistinguishable from hard-coded cards.
- Attention is paid to ensure that module interface blends in with the meditation component’s dark theme.
- When leaving the meditation component, the module interface is restored to its original theme.
- For the meditation component, the animation is achieved using a concoction of CSS keyframes of
rotate(…)for satellite orbiting effect (),scale(…)for orbit pulsation effect (),background-colorandbox-shadowfor satellite dimming effect () and glowing (). - There is an escape hatch property to allow custom CSS styling, for example, unevenly sized two-column content block (), text wrapping around floating image (, ).
- There is extensive component reuse, for e.g., the calendar event list item () and the options in the Settings section () are using the same base component but the former resides in a card while the latter sits directly in the view but both look perfectly at home.
Doctor Locator Component
- Search card features configurable search options by doctor specialization, location type and distance.
- Video shows the Doctor Locator with only the distance option as doctor specialization and location type are fixed.
- Users can copy the address and contact number by pressing the copy icon on the right.
- Users can call the doctor by pressing the button at the bottom of the result card.
- Search results is paginated when there are too many to be shown in one page without a performance hit.
- As of May 2022, it is used across 2 projects and waiting to be backported into the source project should development resource be available.
Accordion & Two-column Content Blocks
- This content block is built from an accordion component which seamlessly transitions when content is expanded () or collapsed ().
- The down and up caret icons in the accordion item heading, apart from providing affordance, are animated to rotate clockwise and counter-clockwise to provide a delightful distraction while content expands or collapses.
- The accordion content features a () two-column content block built with CSS grid. It is able to render contents such as Markdown, images, videos and buttons.
- These two content blocks are surprisingly popular among clients.
Migraine Patient Assistance Programme, Malaysia
This was my first solo full stack project. I went all out, from project managing, frontend, backend to deployment, cradle to grave.
- A variety of animations, for example, shaking buttons, pulsating graphic were used to direct the user to what they should be looking at.
- Many custom SVGs, composed with off-the-shelf icons, were used. The graphic of a hand holding smartphone scanning a bar code, was assembled from a hand holding a burger, a bar code, and a smartphone. The interface shown on the phone was deliberately made to look like the actual camera view scanning barcode.
- Note that the same barcode is echoed in the leftmost button of the bottom navigation bar, while the purple syringe voucher in the middle button is echoed in the promotion banner at the top.