Hello, I'm Allen Chuang
  • Front-End Developer.
  • UI/UX Designer.
  • Minimalist.
  • Music Junkie.
  • Taiwanese American.
  • Optimist.
  • Creative Thinker.
  • CSS Ninja.

I care about people. I enjoy solving challenges with technology. I find gratification in making lives easier by building functional and thoughtful applications.

NIH: MRI Quality Control Analysis

Developed and Designed a Quality Control Information Management System for the Translational Neuroradiology Unit to review and analyze over 30,000 processed MRI images for more than 400 patients.

Problem to Solve

The principal investigators at the Neuroimmunology Branch of the National Institute of Health have been collecting MRI scans as part of a clinical research for Multiple Scelerosis. The doctors needed a way to analyze the scans, rate them, and flag them for errors.

Preparation and Planning

From the get-go I wanted to design the application to be simple and intuitive. The doctors at NIH are already busy enough seeing patients, and on top of that they need to use their spare time to do research. I want this app to be straightforward and without clutter so they can quickly get used to the workflow of analyzing the scans. Thus, I planned to build the backend with a simple PHP framework that downloads the images and layered it with an incredible user interface for the clinicians to perform diagnosis of the scans.

Boostrap and Go

The front-end is designed using a combination of HTML5, CSS3 and jQuery to achieve a user experience with the utmost functionality without deteriorating the overall aesthetics. The style sheets are specially crafted for the website to support multiple screen formats, including mobile and tablets. The page layout and font sizes of the website resizes fluidly depending on the viewing device, which means that the website is accessible and functional on the clinicians mobile devices on the go.

Quality Control Portal Home
Private login with two levels of access providing read/write access depending on the user’s privilege

Interface Design

To make adding comments and making edits extremely simple, I incorporated a jEditable library that enables the user to simply double click on the text to have an inline textfield replace the static text. The updated information is automatically saved to the database with a simple click.

Quality Control Portal - Patients
All Patients List with a fixed top navigation bar using jQuery that responds with user scrolling
Quality Control Portal - Patients
Quickly filter for Case Status and Flag Status to update queries using the fixed top bar
Quality Control Portal - Patients
Select based on patient case

Information is key

Underneath the front-end interface is a robust back-end engine built using a combination of PHP, MySQL, SQL, SQLite, and Perl Scripting to automate scanning and saving updated images from the server. A Cron job is used to run scripts that checks for updated images and make scheduled backups so the users do not have to worry about losing precious data in the event of a server failure.

Feedback Loop

After getting feedback from the initial prototype with minimal design, I took note of the key issues and started playing around with different design ideas with the doctors need in mind. Afterall, it will be them who will be using the app on a daily basis, so it is very crucial to hear what they have to say. I continued to go back and forth between the team of physicians until I ended up with a product that both me and the team of physicians are happy with.

Quality Control Portal - Patients
Multiple Tabs to view information for a specific case, with the main tab showing the most relevant information – the case status and comments
Quality Control Portal - Patients
Top bar stays fixed to show the case being viewed. Easily compare between various MRI scans at a glance
Quality Control Portal - Patients
Switch between tabs to see additional details on the case.
Quality Control Portal - Patients
Dropdown access to additional files pertaining to this current case.
Quality Control Portal - Patients
Double click to edit the description/status for the case and instantly update the database through AJAX
Quality Control Portal - Patients
Quickly filter for Case Status and Flag Status to update queries using the fixed top bar

Final Thoughts

There were definitely challenges with designing this app. For one, I spearheaded the project on my own. I was responsible for the entirety of the project from ground up - from writing the SQL scripts for the database, to using PHP to dynamically communicate with the database, and finally to designing and building the user interface. I managed to touch on all aspects of the app development and it was a thrill ride and a great learning experience altogether.

Math Lab Mobile

Math Lab is a prep school offering classes and preparation to College standardized tests. I designed a responsive site with a white theme to match the classroom environment.

SimLEARN Portal

Developed the SimLEARN Portal for the United States Veterans Affairs to provide VHA medical personnel nation-wide with a centralized, web-based presence focusing on medical modeling, simulation training and education.

Problem to Solve

The Veterans Affairs has a vision of reorganizing their internal employee portal to provide a friendlier user experience amongst those who seek medical training. Doctors and medical personnels in the VA system are required each year to take classes so they can stay up to date on the latest medical practices and learn about new procedures. The SimLEARN portal seeks to solve this problem by offering an all-in-one solution where physicians across the nation and connect and browse the latest course offerings and training videos.

Preparation and Planning

In order to ensure compatibility with legacy VA resources, the SimLEARN portal is built on top of Microsoft Sharepoint’s framework to make use of Microsoft’s built in features across the internal VA domain. The site is skinned with its own code so it doesn’t look like it is straight out of the box. Though it is not personally preferable for me to work with machine generated code, it is part of the customers requirement so I have to adapt and make the best of it.

From design to code

I was responsible for taking the assets drafted in Photoshop and converting it into pixel perfect code. On top of the presentation layer, I added in interactive elements with the help of Javascript. These include dropdown menus, countdown timers, news scroller, carousels and much more. The most challenging part of the project is to work around the often unreadable boiler plate from Sharepoint and the many limitations of Internet Explorer and make everything work as supposed to. To over come these obstacles, I've learned many ninja fixes in css and javascript in order for legacy support for older browsers.

SimLEARN Home
SimLEARN Home
SimLEARN Home
SimLEARN Home
SimLEARN Home
SimLEARN Home
SimLEARN Home
SimLEARN Home
SimLEARN Home
SimLEARN Home
SimLEARN Home
SimLEARN Home
SimLEARN Home
SimLEARN Home
SimLEARN Home
SimLEARN Home
SimLEARN Home
SimLEARN Home

Learning by Coding

Most of the development skills I acquired under my belt are from working on interesting projects. I get excited when the fruits of my labor are put into good use and making a difference somewhere in the world. In addition to tinkering on side projects, I’ve also been busy learning new languages and frameworks and getting up to speed on the latest advancements. The following are a brief list of skills and tools I've used in the past and/or currently learning.

hover over each icon for more details

Trifecta

I had the previlege of learning how to build websites at a young age. Since then, I have honed in on my fundamentals in HTML, CSS and Javascript.

PHP

I had learn to build dynamic websites that pull content from databases and worked on wordpress projects based on PHP.

Sass

This has totally transformed the way I write CSS, Using variables, nesting, mixins, inheritance, I can cut down on repetitive work.

Github

I hate to admit it, but when I first started out, I edited sites directly on the live server via FTP without a version control system. Never again!

Ruby

I’m just dipping my toes into Ruby, but I’m hoping to develop my skills in Ruby and Ruby on Rails over the next year.

Angular JS

I've learned to use Angular to take advantage of the MVC design pattern for scalable and easily maintainable code

"Without change, something sleeps inside us, and seldom awakens. The sleeper must awaken." - Frank Herbert

I am a huge believer in change. For good or for worse, I believe change acts as a catalyst that drives growth and stretches our capacity by forcing us to adapt new challenges thrown our way, which is why I've decided to move to San Francisco in search of my new challenge.

I am excited for the opportunities that await me in this new city, and I look forward to meeting new people and embracing each experience with an open mind and curious heart.

About & Contact