Portfolio
User Experience (UX)
Media Outlet Browser
Allows users to browse up to 8,000 media outlets in the GetActive system. Leveraged faceted-browsing to help users isolate based on type, geography and size all the while giving them a progress indicator showing total # of media outlets that fit their criteria. Responsible for interaction design, visual design, high-fidelity prototypes, and front-end development. View full-size screenshot
Conditional Content UI
Allow users to conditionally show different content on their websites, emails, and campaigns based on constituent segments and the conditions they build. For example, they can dynamically configure different payment amounts on a donation page depending on previous giving history. Responsible for product management, usability testing, prototyping, visual design and coding. This feature's framework uses a design pattern I created for managing limited number of objects with no page reloads. The design was inspired by a window shade metaphor, where we put spatial coherence as a premium. View full-size screenshot
Campaign Templates
One aspect of ease of use can sometimes be described as finding the right defaults. I designed the default template for GetActive's campaigns that promoted single-page conversion events, clarity, and accessibility compliance with Section 508 and W3C WGAC standards. Also programmed the cross-browser compatible XHTML/CSS templates that drive the campaign presentation. View full-size screenshot
360° Member Profile
A significant portion of GetActive's users spend 6-8 hours using the administrative UI to do their jobs, and referencing membership information is one of the most frequent tasks. The Member Profile page provides our users with a 360° view of a constituent. The UI presents personal information as well key performance indicators -- all of which are necessary inputs required for the simplest activity: talking to the member on the phone. Responsible for analytics research, usability testing, interaction and visual design, and front/back-end development. View full-size screenshot
Training and Adoption
I designed and wrote the copy for the Education Services UI that uses a house-moving metaphor to guide the training of a user. A carefully designed online training experience is critical to product adoption, no matter how easy you might think your UI is. View full-size screenshot
A/B Split Testing
Example of a form page asking the user for inputs to define the statistical samples required for a A/B split test. Split testing is a complex process, and the challenge of this project was to guide non-technical users in creating an A/B split test for their email marketing campaigns. Responsible for product management, usability testing, design, and front-end development. View full-size screenshot
Data Presentation
GetActive's first AJAX implementation that I spearheaded. I helped design a presentation framework for displaying data lists with actionable links. Responsible for interaction design and front-end development. View full-size screenshot
Visual FX
Hellboy (2004)
My first show at Tippett Studio. I was a Lighting Technical Director on this show and was responsible for the underwater shots of Abe Sapien (the green, fish guy). Shots required a fully digital hero, CG water, etc. In fact, all of the plates were shot on a dry set. Funny thing is on the DVD interview, Ron Perlman (plays Hellboy) extols the great underwater acting and swimming skills of his colleague Doug Jones (plays Abe Sapien). Obviously, he wasn't aware that it was all CG. What a compliment to the team though! Check out my demo reel for the shots I worked on.
Constantine (2005)
My second show at Tippett Studio. As a Lighting Technical Director, I was responsible for a handful shows in the Hell Freeway chase sequence. Dealt with multiple scavenger demons, lots of detritus and other FX elements. These shots were huge, dozens of layers at times. I was also the TD responsible for the R&D and lighting of the elastic skin technology we developed for the exorcism sequence that opens the film and the mammon sequence that ends the film. Check out my demo reel for the shots I worked on.
Sometimes I wonder why of all movies I happen to have worked on, there's this not-so-subtle theme that runs through them. Coincidence? I think not -- but I have yet to understand why. I think I need to light a cute kid-friendly, character for a change.
Sometimes I wonder why of all movies I happen to have worked on, there's this not-so-subtle theme that runs through them. Coincidence? I think not -- but I have yet to understand why. I think I need to light a cute kid-friendly, character for a change.
Wingnut
My MFA final project at the Academy of Art University, about an old robot in a post-apocalyptic world. I did the modeling, texturing, animation, lighting, foley, music – the whole shebang. 3D accomplished in Softimage XSI, comped in After Effects, Pro Tools and Avid for finishing. Won two awards: Spring Show 2005 Special Achievement Award and was a winner at the Nickelodeon NickToon Film Festival. Watch the film
Site Design and Development
Gracepoint Fellowship Church
The church I go to. Designed and coded the front-end and back-end. Invested a lot of due diligence in usability and IA. Backed by the eZ Publish CMS system. Event management leverages a tag system that we laid over a shared Google Calendar.
Joyland - Children's Ministry Website
The lovely town on the front-page was painted by one our volunteers. I helped with the art direction and integrating the painting into an overall user experience. Designed and coded the front-end and backend for the rest of the site. Backed by the eZ Publish CMS system, and dynamically integrates assets from the parent Gracepoint site. There's also a cool easter egg if you visit the site past 9:30pm.
Berkeley Academics
Approached by a friend to help her re-design her tutoring business' web presence - in one afternoon, of course (after which, I negotiated it down to two nights). Did the IA, design, back-end coding, and copywriting for the site. Backed by the eZ Publish CMS system.
Koinonia at Berkeley
Designed and coded the back-end for a local campus group that I used to go to when I was a student at Cal. Built on top of WordPress, so the students themselves could maintain it with minimal training.
Kairos Christian Fellowship
Designed and coded the back-end for another local campus group. It was a new group and I wanted to help this fledging group get up on its feet with an inviting website. Features sub-pages whre each small group leader independently manages news and pictures. Built on top of WordPress with a tag-based Google Calendar integration for shared calendaring.
GraceList
This is the community bulletin board system for Gracepoint ... our version of Craigslist. Uses an email digest to send bi-weekly updates to members. Nice, dead-simple app that's very accessible to everyone. Designed the templates, and built everything on top of the Ruby on Rails framework.
Photo Journal
Photo blog for our Gracepoint website intended to give visitors a narrative of our photos that photo galleries typically leave out. Also has a very cool slide-out panel to traverse photos. Designed and coded the front-end as well as some of the back-end. Built on the eZ Publish CMS system integrated with our FlickrBySetTag API.
Impact
Started in 1997, Impact is an inner-city program for kids. I volunteer as a driver for the Oakland route. I designed and programmed the back-end in WordPress. One of the fun things about this project was the speed in which we were asked to complete it. From design to registering a domain and finding a server to release, took two of us 6 hours. Goes to show the power of the tools we have at our disposal these days.
acts2fellowship
Designed and coded the back-end. One of the fun things about this project was that Kairos, acts2fellowship, and Koinonia websites were all completed in three weeks, from design to code to release. Yup, it was a busy summer that year.
Resources
The usual place to get shared stuff like books, podcasts, etc. Includes a not-so subtle integration with MyShopify. We're pretty happy with it and will probably make the integration a little tighter. I designed and coded the front-end and back-end.
Print/Identity
Logos
Some of my more recent branding/identity work.
One Life DVD
A 4-color press print for a DVD cover set that I designed for a church production.
Berkeley Academics Flyer
Designed tri-fold mailer used for advertising the Summer Academics Program for Berkeley Academics.