Portfolio
by category | by dateUser-Centered Design
Design/Interaction Design
Other Coursework
Websites
Digital Media
2008
2007
2006
2005
2004
2003
Loading...
ClassSync
EECS 339 – Introduction to Database SystemsNovember 2006 My teammate and I decided on creating an online scheduler for this four-week-long 'self-defined' project. Our goal was to create a prototype for an application that would allow students to easily plan their class schedules and other recurring commitments via a built-in conflict resolver. The database was created from scratch, beginning with a formal schema and concluding with a working implementation in Oracle and an AJAX front-end created for the demo. Technologies used: Oracle, SQL, PHP, AJAX
The Stringing Aid
IDEA 308 – Human-Centered Product DesignJune 2006 The Stringing Aid was a result of a ten-week-long group project between five members. The goal was to experience firsthand a snapshot of what product development was like, from idea conception to product launch. The team was involved in all aspects of the development cycle, including iterative prototype creation, user testing, and making a business model for the product. The group decided on developing a product to aid tennis players in stringing their rackets.
gTab
EECS 395 – Machine Perception of MusicMarch 2006 gTab was an end-project for this survey class which touched on the latest topics in the field of machine perception of music. Working with another teammate, we devised an algorithm that would take a monophonic MIDI file and output guitar tablature, a form of guitar notation. The front-end was designed to be as easy to use as possible, unlike current guitar tablature sites. Technologies used: PHP
MenuTron
EECS 330 – Human-Computer InteractionMarch 2006 Consisting of three members, our group was assigned the task of making suggestions that would improve the ordering process for patrons of dine-in restaurants. Over the course of four weeks, we sent out surveys to various people to identify their needs, conducted interviews with restaurant owners and waiters, and brainstormed ideas for solutions. Our resulting prototype was an electronic ordering device to be distributed per table. Patrons would be able to order and pay directly using the device.
Sound Without Sight
IDEA 106-2 – Engineering Design and Communication (Client – LouisClark Ltd)June 2003 The goal for this team project was to apply the methodologies we had learned in the previous quarter to a client setting. Our client assigned us the task of finding ways to reduce the cost of his Home Theater System installations. Researching current solutions and manufacturers, our group presented an alternative apeaker technology, including a technical overview of the new technology and costs to implement them. Our final solution also included the optimal positioning of these speakers as found from first-hand and online research.
Foldable Tailgate
IDEA 106-1 – Engineering Design and CommunicationMarch 2003 The Foldable Tailgate was my first college team project, where we were formally taught design and project methodologies such as Gantt Charts and Factor Analysis. After brainstorming possible ways for enhancing the usage of Sports Utility Trucks (SUTs), our group decided on designing a foldable tailgate. Throughout the quarter we made foam core prototypes and iteratively improved our design.
The Pinoy Show DVDs
Project for Kaibigan (Filipino Students Association) at Northwestern UniversityDecember 2005 The first Pinoy Show DVD was a result of acquiring my first DVD burner and learning how to produce a DVD using several software applications. I edited the footage from two videocameras using Adobe Premiere and produced the DVD menus and structure with DVDlab, complete with special features and bloopers. The following year I produced the second DVD and attempted to make the lighting and sound levels more seamless from three videocameras. I also switched to using Adobe Encore DVD to create the DVD structure. The third DVD (for the 2006 show) was produced in a similar fashion. View the DVD Menus: 2004 DVD 2005 DVD 2006 DVD
Pastoral Leadership Search Effort (PLSE) CD
Mythryn LLC (Client – PLSE United Methodist)April 2005 As a software developer at Mythryn, I was assigned to work on the PLSE account, which included the production of a Resource Folder (CD, DVD and brochure) distributed to young people interested in ministry. I was directly involved in creating a Flash interface for the CD, using design elements already in use in the DVD and brochure. Technologies used: Flash
The Undertones Website
July 2005 As former webmaster of The Undertones (A Cappella Group), I did a visual and technical redesign of the site from a much older version I had created. The new site discarded the use of frames (now perceived as both unfashionable and unusable) and utilized PHP and CSS. The visuals were inspired by the VMware Technology Network website. A new webmaster has since been appointed after I decided to leave the group to concentrate on my undergraduate studies. My old design is still available here. Technologies used: PHP, Flash
SkinSense and Tamoxifen
Mythryn LLC (Client – EduMedia)May 2005 For this Mythryn account, I was assigned to update SkinSense to a newer version of Flash so that it could be used for another related project, the Tamoxifen Education Application. SkinSense was previously implemented with an Apache-Tomcat installation but had to be modified to use ColdFusion. I also created a video-playback interface for both projects, which was also re-used in the PLSE CD. Technologies used: ColdFusion, Flash, SQL, XML
TheBoompsy.net
August 2004 My own personal blog, which I coded in PHP from scratch without using readily available blogging packages such as WordPress. Technologies used: PHP, mySQL
Kaibigan Website
August 2004 The former Kaibigan website was written in HTML without utilizing CSS or a server-side scripting language, which could have reduced the amount of coding for the previous webmaster. My redesign incorporated both these elements, reducing the amount of code particularly in the photo album section of the site. I stepped down from my position as webmaster to concentrate on my duties as Co-President, but the current site still incorporates most of my design. Due to size limitations on the server, the media and photo album sections are undergoing renovation. Technologies used: PHP
Hong Kong Students Association (HKSA) Website
March 2003 The previous HKSA website was a mixture of a Flash splash screen/navigation menu and static HTML pages. As an exercise to learn ActionScript, I combined all the elements into a Flash-only site, allowing updates to be easily implemented throughout the entire site. A succession of new webmasters have since been appointed, but the old site is available here. Technologies used: Flash
Nifty Little Scheduler
Project for Kaibigan (Filipino Students Association) at Northwestern UniversityMarch 2007 An annual problem that Kaibigan faced as part of the preparations for its annual cultural show was scheduling dance rehearsals for between 5 to 15 people. Previously, this was co-ordinated by each choreographer, sending out e-mails to each dancer and deciding what was the time slot that could accomodate all people. Seeing an important need, I decided to automate the process via a simple JavaScript solution which allowed each dancer to input their weekly availabilities. Once this information was obtained, a choreographer could then select the participants and instantly see the free time slots. Realizing the ease of use of the system, some members requested to use the system for other purposes, e.g. organizing sports team practices. A working demo is available here. Technologies used: JavaScript
Peel.com Intranet Pages
June 2006 As a Web Developer in the Tech Department at Peel.com (one of my co-op placements), one of my resonsibilities was to help create and maintain the intranet pages of the company. These included pages for inventory, directories, order processing, etc. As the company grew larger and took on more customer support staff, I was also asked to design some of these pages such that they could cater to and support the needs of the users that accessed them. Technologies used: PHP, mySQL, JavaScript
NativeAccent
05-610 – Introduction to HCI Methods (Client – Carnegie Speech)September 2007 This was my first group project as a masters student at Carnegie Mellon's HCI Institute. Our task was to assess the usability of a web-based system that helps non-native English speakers improve the intelligibility of their accent. As this was the Lab component of the Intro to HCI Methods class, we were required to practice all the techniques taught during lectures, namely the following: Contextual Inquiry, Heuristic Evaluation, Keystroke-Level Modeling, Cognitive Walkthrough, and Think-Aloud.
Final Report (.pdf)
STABLE – Sustainable Transportation and Business Listings Engine
05-610 – Introduction to HCI MethodsDecember 2007 This was the final group project for my first HCI course. Our task was to create a tool to assist apartment hunters in their housing search by applying all the knowledge we had accumulated throughout the homework assignments over the entire semester. The purpose of these assignments was to become familiarized with the following techniques: Contextual Inquiry, Heuristic Evaluation, Keystroke-Level Modeling, Cognitive Walkthrough, and Think-Aloud.
Final Report (.pdf)
Peanut Butter & Jelly Sandwich Instructions
51-761 – Communication Design FundamentalsNovember 2007 The purpose of this project was to integrate all concepts from the class (typography, layout, etc.) into a final deliverable. All illustrations were created from scratch using Adobe Illustrator, and the pages were compiled using InDesign.
Booklet (.pdf) | iPhone (.pdf)
Oven Control Redesign
05-650 – Basic Interaction DesignJanuary 2008 In this project we were given five different contexts in which to identify an interface control that was worth redesigning. I chose to redesign my oven's temperature control, which lacked feedback regarding the oven's current temperature and whether it was even on or off. My solution drew inspiration from thermostats and iron controls.
Poster (.pdf)
@HAND – Mobile Sightseeing Application
05-650 – Basic Interaction DesignFebruary 2008 The goal of this group project was to create a mobile information service for people who need to conduct opportunistic route planning. The design process involved the use of personas and scenarios to steer the direction of and inspire design.
Presentation (.swf)