michelle t. chin

ux designer, pixel pusher

user experience

Thesis Project - Mobile Technology for Nonprofits: Harnessing the Power of Crowdsourcing

For my thesis project, I designed a mobile application where individual users could help promote fundraising events via their social networks (of friends of friends) for a specific cause. To create a solid application, my work involved user research, interaction design, storyboarding, digital prototype creation, and user testing. Detailed interface design can be found under the "Mobile" section.

Mock up drawings of the mobile appStoryboards for the mobile app Comparison of the original design of the app and a new revised version

Gettin' Grown Web Site

The filmmakers wanted to expand the Gettin' Grown movie into a Web series. In addition to having the webisodes, the site would encourage kids and teachers to learn the aspects of video production. My team created a proposal for a Web site that included personas, scenarios, a complete information architecture of the site, and wireframes.

Sample persona Sample wireframe Sample scenario walk-through

University of Baltimore School of Law - Information Architecture

The University of Baltimore's law school was looking to revise their Web site. My team presented them with an information architecture report that was based on an extensive content inventory of the current site and a digital card sort (using PowerPoint) with participants of the site's targeted audience.

Screenshot of content inventoryScreenshot of a PowerPoint slide from the card sort activity Wireframe of new site based on information architecture recommendations

The Uniformed Services Employment and Reemployment Rights Act (USERRA) Web-Based Training

The VA for Vets project included delivering a series of Web-based training courses about USERRA to various audiences in the Department of Veterans Affairs. My colleagues and I brainstormed creative ideas of introducing the information and sought innovative ways to assess users' knowledge of the material. In addition to regular content screens, the final courses included short testimonial videos and a "choose your own adventure"-style scenario assessment.

Testimonial screenScenario assessment screen Scenario assessment results screen

 

mobile

Thesis Project - Mobile Technology for Nonprofits: Harnessing the Power of Crowdsourcing

To put my thesis project into better perspective, I tailored it to a specific nonprofit, Be The Match Foundation. Below are screenshots from the app, which allows users to make donations and promote fundraiser events. More details about the project can be found under "User Experience."

Main Menu screen Donation screen Event screen Completed Task screen Share Message screen

A Duke in Queens

This iPad app highlighted the artwork of Duke Riley commissioned by the Queens Museum of Art. The goal was to teach people about the history and current events of Queens, New York through art interpretation. My team and I designed the features and modified the content. I created the interface and a working prototype was designed using HTML5, CSS, jQuery Mobile, and the Wink Toolkit.

Mockup interface design of A Duke in Queens app

Brain Boot Camp

This iPhone game was designed to help teenagers increase their cognitive abilities through playing games. This brain workout contained several mini-games created based on extensive research about human cognition. I designed the app interface and my team and I developed working digital prototype using PowerPoint and the GoodReader app.

Brain Bootcamp splash screen Brain Boot Camp mini-game instruction screen Brain Boot Camp math game screen Brain Boot Camp Tip screen Brain Boot Camp Twitter screen

Green by Me

This iPhone app was designed to help users find local "green" services, stores, and restaurants in their neighborhood. My team and I developed the interfaced and functionality based on the fundamentals of interaction design. We tested the design using both a paper and digital prototypes.

Screenshots of the Green By Me app

Scooter Cable Guide

This reference guide allows scooter mechanics to quickly look up what length and type of cable they need for vintage Vespa and Lambertta scooters. I used jQuery to develop the app. Scan the QR code below with a smartphone to interact with the guide.

Scooter cable guide start screen P-Series scooter cable list screen Cable details screenQR code for the scooter cable guide site

 

creative

Motorcycle Injuries Infographic

This infographic was created as a part of a motorcycle safety display at Modern Classics, a motorcycle shop in Washington, DC. The goal was to demonstrate the importance of wearing safety gear to protect yourself from even the least severe accidents. I analyzed data from the Motorcycle Industry in Europe (ACEM) - Motorcycle Accidents in Depth Study (MAIDS) report and created the infographic.

Infographic on Motorcycle Injuries and Prevention

Prezi Presentations

For grad school projects, I created several Prezi presentations. Here are a few where I take advantage of an open-canvas for presentation. The first is a final presentation for the Green By Me mobile app, the second is an "about me" for a class, the third is one for a report I did for an analysis of the Architecture iPhone app. (Note: the "about me" presentation is the only stand-alone one.)

Screenshot of the Prezi for the Green By Me appScreenshot of the Prezi about meScreenshot of the Prezi on the Architecture Mobile App

Scenario Animation for Department of Justice Asset Forfeiture and Money Laundering Section

This animation series was part of a training seminar for the Organized Crime and Gang Section (OCGS). Participants learned how to conduct investigations and, as part of their training, walked through a hypothetical organized crime scenario. The animations told a story from investigator interviews and evidence found. I storyboarded and created the vision of the animations based on a script from the client. I worked alongside a graphic designer and a programmer to come up with the final piece.

Screenshot of the OCGS animation

 

web

Web Site Interfaces

Here are just a few Web site interfaces I've created. I've done work for federal clients, musicians, small businesses, and special events.

Screenshot of Coolie Ranx's Web site Screenshot of Pilfers Web site Screenshot of the Trispective Solutions Web site

Web-Based Training Interfaces

I've created WBT interfaces for mostly federal clients including the Federal Aviation Adminstration, Department of Veterans Affairs, Department of Homeland Security, and Immigration and Customs Enforcement.

Screenshot of the Pilot Deviations WBT Screenshot of the Pre-deployment Advisor Tool

Artist Portfolio

I created a PHP-based web portfolio for artists. With the portfolio, the artist could add, modify, or delete pieces in it, as well as add descriptions, keyword tags, materials, and other pertinent info. Viewers of the portfolio could learn about the pieces and search through the portfolio by keyword tags or materials. This project was created entirely from scratch using HTML, CSS, PHP, and MySQL. For context, the portfolio is for Andy Warhol and features images I took of his pieces since I've owned an iPhone.

Artist Portfolio site's main screenArtist Portfolio site's individual piece screen Artist Portfolio site's Search Results screen

©2012 michelle t. chin | michelletchin@mac.com