Pearl Chen - Karma Laboratory

Pearl Chen
Electronic & Interactive Artisan
Manifesto
To be an artisan is to be a skilled worker who practices some trade or
handicraft. For an electronic and interactive artisan the tool palette blurs
and -- above and beyond technical expertise -- what matters most in the
end is crafting the user experience.
From LEDs to Flash, sewing to micro-controllers -- I take on a
cross-disciplinary approach to my work. As an artisan, I strive for
practicality and accessibility, technical skill and efficacy, all while being
aesthetically beautiful.
As a freelancer, I am ready to tackle any job such as:
• web development (Flash or HTML- based);
• user experience design;
• leading a project from conception to launch;
• consulting, teaching, and mentoring; and
• helping you find the solution to any of your digital problems.
©2009 Pearl Chen
Featured Work
Page
Makeover Solutions
4
Ignite the Americas
9
Bell Payphone Labs
10
Artillerist / Battleship
12
Flash & Web Design/Development
Web Development
Interactive Art
Interactive Art
©2009 Pearl Chen
3
Roles: Flash & Web Designer/Developer
Keywords: Flash, RIA, AS2, Drupal, PHP, HTML, CSS,
Multilingual, Social Media, Retail Kiosk
Makeover Solutions
Time Frame: April 2005 - August 2008
Employment Status: Full-time & Contract
This story begins with a small start-up located in Toronto
called Ai-Media.
Way before I got there, the CTO had envisioned the idea of a
“virtual makeover” in which you could upload a photo of
yourself and apply a multitude of cosmetic colors or try on
new hairstyles without the clean up, commitment, or costs of
real life.
Eventually this virtual makeover software manifested itself as
a Flash Rich Internet Application (“RIA”) which was
customized and licensed to clients such InStyle, Clairol,
Revlon, Rimmel, and Shoppers Drug Mart.
Around 2004, Ai-Media started investing more time into
makeoversolutions.com, their flagship product, and they
snapped me up as a recent university graduate in 2005 and
immediately put me to work as a Flash Developer.
Of course, when the entire company is only 7 people (and
only 2 frontend developers), you don’t usually stick to your job
description -- you just handle anything that comes your way.
Print Design
It was not often that this
web company needed print
materials but, when the
time came, I would design
business cards, brochures,
and posters.
I programmed and designed. I created wireframes and poked
around databases. I wrote content and was on conference
calls with clients. I even sewed a curtain and picked out the
lighting fixtures.
In this section, here are some highlights from my 3.5 years
there while Makeover Solutions climbed up to 1.5+ million
registered members and was eventually bought out by U.S.
investors in late 2007.
4
©2009 Pearl Chen
Virtual Makeover (“VMO”) RIA
Ongoing VMO-related Tasks I Did:
My main job at Ai-Media was to master the ins
and outs of their massive VMO application
framework.
It was built with AS1 and about 50 .as include
files. I used my “code-sense” everyday in
order to work with this legacy code and
continually tried to improve it.
●
continually added new features to the
trunk code based on a rapid development update schedule;
●
refactored the heck out of it by adding
AS2 classes and breaking up larger
chunks of procedural code;
●
created wireframes, mockups, and/or
customized versions of the VMO for
licensing and affiliate clients such as
iVillage, Rimmel, Clairol, Walgreens,
CIBA, Meredith, Hearst, and MTV3;
●
oversaw the “live launches”, including
QA testing; and
●
mentored newer developers by sitting
through their debugging sessions.
Makeover Solutions VMO code base
Custom Affiliate
Licensing Work
Affiliate Customization Framework
The affiliate program allowed other
websites to use the same instance of the
VMO Flash movie but with a dramatically
different appearance.
The framework I architected
was a huge overhaul of
library components to allow
for a stylesheet of color
properties to enable rapid
themeing.
An editable features list
accommodated
different
workflows for various clients
requests.
©2009 Pearl Chen
5
Kiosk Applications
In addition to web-based software, I worked on five kiosk projects while
at Ai-Media. Below is a description of two where I was lead developer.
Walgreens Interactive Beauty Center (“IBC”)
The IBC is a pilot project in several Walgreens cosmetic departments in the St. Louis
area. The kiosk offers barcode scanning, browsing of in-store inventory, virtual try-on,
shopping list printing, branded commercial video loops, beauty tips, and a color
recommendation engine.
I was lead frontend developer/designer for this project for two years and was heavily
involved early on with workflows and interaction design, along with developing the Flash
application.
Walmart Shade Selection
Shade Selection is an in-store kiosk initiative
spearheaded by Clairol and their creative
agency, The Integer Group - Denver, to help
consumers choose the right hair color
solution while shopping at Walmart.
Based on mockups and wireframes from Integer, I architected an application framework
that allowed for:
6
●
custom themeing for different Walmart color schemes (and later on, for Target and CVS
stores);
●
database-driven options to allow the kiosk administrator to turn on and off different
screens and features with a fluid frontend layout that would adjust in response to those
settings, in addition to changes in product inventory and color recommendation logic;
●
options to switch between English/Spanish in the US, and English/French in Canada,
with a fluid frontend layout that automatically adjusted for different translated lengths
of sentences; and
●
an “invisible” navigation framework to accommodate the complex (and always
changing!) user workflow developed by Clairol and Integer.
©2009 Pearl Chen
Social Media
Over the years, I was involved with designing and/or developing
several social media applications for makeoversolutions.com
such as:
●
All the Rave -- a Digg-like news feed for fashion and beauty;
●
Celebrity Hair Showdown -- think of a March Madness basketball
bracket but applied to celebrities;
●
Makeover-a-Friend -- members were
given an interface to quickly load in
their friend’s photos for makeovers;
●
a Product Reviews section;
●
a Beauty Tips section; and
●
Community Makeover Gallery -- one of the most successful
initiatives in which a member could generate a “Before” and “After”
JPEG from within the Flash VMO and submit it to an image gallery
for ratings and comment feedback.
“My Makeover Gallery” Facebook Application
To further expand Makeover Solutions’ current Drupal-based Makeover Gallery, I developed the user
workflow, interface, and administrative tools for a Facebook application.
It gave registered members the ability to display a mini-version of their
makeover gallery submissions on their Facebook profile page while allowing
non-members to vote and comment from within Facebook.
The Facebook application was designed for scalablity and could also be placed
on a MySpace page or a personal blog.
©2009 Pearl Chen
7
Email Newsletters
Makeover Solutions had two regularly occurring newsletters sent to a
subscription base of 50,000+ people, along with additional promotional
emails here and there.
I was the go-to-girl for newsletter layout and HTML/CSS markup that
would still look right in Hotmail, Gmail, Yahoo, or Outlook; Firefox or IE;
Mac or PC!
Content would make it my way via Excel spreadsheets (of which I had
added a heavy dose of Excel formulas in order to auto-generate both the
HTML and plain text versions for me) and I would then proofread, create
any needed graphics to go with it, and handle sending it out via a 3rd
party distributor.
8
©2009 Pearl Chen
Role: Consultant, Developer
Keywords: Drupal, PHP, Multilingual, Social Media
Ignite the Americas
Time Frame: September 2008
Employment Status: Contract
Ignite the Americas was a week-long
conference for selected youth delegates
from across North and South America.
The organizers wanted a website that
would strengthen the communication
between the delegates during and after
the event.
Also very important was that all content
(even user-generated submissions) were
to be translatable between four
languages -- English, French, Spanish,
and Portuguese.
The time frame to get it all built was
under two weeks so, as a consultant, I
suggested leveraging the Drupal CMS
system and offered advice on what
module add-ons would be best
implemented in such a short time span.
As the web developer, I setup Drupal
with the appropriate modules for:
● a multilingual translation framework;
● a blog for all delegates;
● a discussion forum and wiki;
● WYSIWYG content editors;
● a media gallery; and
● custom user profiles.
©2009 Pearl Chen
9
Roles: Collaborator, Creative Director, Project Manager
Keywords: Art Installation, Electronics, Arduino, HTML, CSS
Bell Payphone Labs
Co-founded with artist Laura Paolini while I was a resident at the
Canadian Film Centre’s New Media Lab, Bell Payphone Labs*
was created to explore the role of technology in the social
sphere.
We created site-specific installations and re-engineered new life
into payphones to create a new way of experiencing and thinking
about an orphaned technology that is now taken for granted.
Our humorously faux-corporate website showcases payphonerelated projects and we have made appearances at trade shows
performing as Bell Payphone Lab representatives.
Time Frame: November 2008 - March 2009
Employment Status: Post-graduate Residency
Public Appearances
When the opportunity to showcase our
work arises we take our lab coats, payphone
gumball machine, website (in the form of
overhead projections), and setup a space to
promote thinking about what’s possible to
do with technology after it’s “useful life”
instead of sending it to a landfill.
In this project, I acted as Creative Director and Project Manager
while working within the framework of an artist collaboration.
Gumball Machine
We took apart an actual payphone and made it dispense
candy for your quarter instead of
a phone call!
This project would be presented
as an innovation that offsets
feelings of sadness or rejection
you may have when your call
does not complete.
10
*We our not affiliated with Bell or any of its subdivisions. We chose the name Bell Payphone Labs as a homage
to the original Bell Laboratories located at Murray Hill, New Jersey -- inventors of the transistor and employer
of Billy Klüver who co-founded Experiments in Art and Technology (E.A.T) in 1969.
©2009 Pearl Chen
Site-specific installations
One of our fun Photoshopped ideas that was
realized with an actual photoshoot involving
“broken” phone booths around Toronto and a
disco ball.
Print & Web Design
The look and feel of bellpayphonelabs.com was created through collaboration with two other
designers, Nadine Lessio and Alex Kurina, and was the base for any additional print materials.
The website was built with clean HTML/CSS and content written from both myself and Laura Paolini.
©2009 Pearl Chen
11
Role: Consultant, Electronics Modder
Keywords: Wiimote, Wii Sensor Bar, Electronics,
Wiiflash Server, Polymorph Plastic, Art Installation
Artillerist / Battleship
Time Frame: May 2008 - December 2008
Employment Status: Two separate contracts
Commissioned for the 2008 FITC Design & Technology Festival and
curated by Pixel Gallery, Battleship was the first prototype for an
“Interactive Wii Battle” using modded Ninento Wii controllers that
communicated to a Flash game via wiiflash server.
For this first installation, I had two main tasks: (A) get the Wiimotes
into a fun case that fit into the theme of “battle”, and (B) get the
Wiimotes to work from at least 50 feet away since the game screen
was being projected onto a large divider.
With other members on the team, we picked out toy Nerf guns from
Walmart and painted them. I then took apart the Wiimote and rewired
the electronics to fit into the toy gun.
For the distance issue, I researched how Wiimotes worked with its
so-called “sensor bar” and custom built two super sensor bars out of
50 infrared LEDs.
Artillerist
After FITC, Pixel Gallery commissioned a new and improved version
called the Artillerist in which gallery visitors were invited to “make art,
not war” with the Wiimotes and projected canvases.
I was involved early on with planning and helped shape the physical
installation space from both a technical and user experience standpoint.
Also, since the modded Nerf guns from FITC were fragile and weren’t
build to stand up to two months of heavy gallery traffic and battery
changes, I designed a new Wiimote case that combined commercially
available Wii gun cases with my own custom built covers made out of
polymorph plastic.
Battleship
12
Artillerist was also part of Nuit Blanche 2008.
©2009 Pearl Chen
Thank you
for your
interest.
Additional Gratitude
For the use of their photographs
and/or likeness, I would like to thank:
Makeover Solutions
shappi5
The Integer Group -- Denver
Tina Santiago
David Girolami
Rick Mason
Lillian Xia
Magda Olszanowski
Hire Pearl
Email pearl@karma-laboratory.com to find out
how I might fit into your current or next project.
I would love to speak with you about it!