Welcome! Click me to show/hide the nav.

Powerplay is an energy saving application which helps monitor and provides tips. Splash screen.

Powerplay's homepage features the top information visualizations based on prior research: 1. a running record of energy and money spent, 2. real-time ticker of the same, 3. a comparison with a relevant group, 4. ability to drill down. ...

... and 5. Insights about recent usage.

Note. I visually refreshed the homepage screens recently, the following screens feature the older styling.

The tips page allows a user to view trending tips as well as keep a list of their own. These efforts show monetary savings over time.

The badges page allows users to keep track of their progress and accomplishments in their energy saving journey.

The Powerplay settings screen. The user may enter basic information about their home and connect their smartmeters.

Powerplay switches to landscape view while the user is investigating nitty gritty power consumption details!

Powerplay

Team Silk

Powerplay in an early paper prototype form! We printed these out on cardstock and user tested them.

Setup asked for the user's address so appropriate data could be matched.

Previously, the data used to be quite granular. Users were not comfortable with the level of detail, so in the we used 25% quartiles as seen in the HiFi prototype.

Powerplay used to have goals, however we discovered users wouldn't know what a goal is, so the app later served the average usage / week and tips.

An early reincarnation of tips combined with the goal.

Early mock-up of the drilldown.

The team documented our prototype, process, findings, and recommendations in a report. I was responsible for the document design. Here's a preview of some of my favorite pages.

If you'd like to learn more, get in touch and see the Slide Decks section.

EveryCarListed.com
Search results page.

EveryCarListed.com
Compare cars from search.

EveryCarListed.com
Vehicle details page.

Vast.com

Designing for automotive search is tricky. Fitting plenty of information in a small amount of space is an example. These 4 modular search results cards account for business, technology, and user needs.

Some of Vast's automotive partnerships I had the chance to work with.

I also conducted user research internally. These studies were shown off as presentations and the results were a great complement A/B testing. The little users drawings were a small part of my contribution.

While I'm not allowed to show you the rest of the goods, please enjoy these mugs I drew of the SF team. See mugs of the whole team on my blog.

If you'd like to hear more about my experiences at Vast, get in touch.

I illustrated art for the NASA JWST Public Outreach team featured in this game, Scope It Out!

I also helped create matching avatars and wallpapers. Finally, this very game was also
featured on Wired's GeekDad as well as the
Hubble Space Telescope Exhibit.

Given the success Scope It Out! The team pursued a more ambitious second game,
Build It Yourself: Satellite!
My role was primarily illustration, though I did contribute a bit to the game design.

You've scrolled here! Please enjoy this rocket flying through space!

Don't forget to play Scope It Out!
and Build It Yourself: Satellite! for the whole experience.
Raincat is a 2D puzzle game for PC and Linux. I illustrated art for the game.

Later, I created the mini-website promoting it. It has ~12,000 unique visits since launch (September of 2009!). Learn more by visiting it.

It is also a Game Creation Gold game and enjoys a humble Facebook Page following. See more games in the games section.

#spoilers
I BE FIRING MAH LAZER!

Play the game to figure out what this is about.

Change. Limited to one typeface and minimal colors. Featuring President Obama's own words, change itself is demonstrated subtly through the differences in verb tense. Each iteration of the quote is grows lighter as it progresses closer and closer to present tense.

JWST Poster. During my internship with the
NASA Goddard Space Flight center, I designed
new prints for the Webb telescope.
The designs made a cameo on The Big Bang Theory!

Related work in the NASA JWST section.

Colours from Life. A simple exercise. I once photographed flora from Phipps Conservatory and made palettes.

Visual Designs

The cover of our MHCI Capstone final presentation. Switched to a darker, classier colour scheme from the original Team Silk branding.
Redone Silk branding! Compare to the old one in the next deck.
Agenda. Note the colour coordinated numbers and sections docked on the right hand.
The introduction section cover.
The introduction explained research background and mission statement.
The design section cover.
The design section included the walkthrough of Powerplay, the mobile solution we created.
The process section cover.
The process had shots of each prototype: speed dating, wireframing, paper prototypes, and various fireworks prototypes.
The looking ahead section cover.
Looking ahead explained an alternate application which could be further explored and opportunities to apply our residential application to the commercial space.
A high-level overview of our process.
We had 3 standalone prototypes, combined them into 2, and finally 1: Powerplay.
Personas: residential consumers of energy, with varied motivations driven by interest in conservation versus cost.
An overview of our background research in the energy domain.
An overview of all 8 months we were working on our project.
The large majority of the project itself is kept under wraps, so if you'd like to learn more, please get in touch.

Also check out the Powerplay video sketch on Vimeo.

Slide Decks

Classic Team Silk branding from our first in-class presentation.
A sequence of slides which explain our project scope our client, Eaton.
Eaton's competitors were entering the mobile space.
So our project's premise was to figure out what would be the best thing for Eaton to build in this space.
This was the origins of Powerplay.
We analyzed a matrix of potential users before settling on Residential Tenants.
Presentation for Designing Mobile Services course.
We tried to frame our prompt around romantic relationships. I created the deck for the team.
Slide demonstrating our initial pursuits for building a mobile application for romantic relationships.
We quickly learned that it would be a tough service to monetize.
Our criteria to select another problem space to pursue.
We decided to track those who communicate often.
The graphic on the left shows people pulled out of the crowd.
Slide demonstrating key results from our survey. Each block appeared one at a time.
We were asked to evaluate the idea using POG, Social, Technical, and Economic parameters. This diagram demonstrates that.
This is a short sequence from our final presentation which demonstrates the value of mobile job seeking app.
If you're curious about the final product, you may watch the
NewTies video sketch on Vimeo.
Geekbear, tamagotchi game.
I designed and coded this flash
minigame solo. Play online »
Pink, 5 second colour game.
I designed and coded this flash
minigame solo. Play online »
Spring Cleaning, text game.
I designed and coded this flash
minigame solo. Play online »
Mochicat, 2D pixel minigames.
I was the lead artist and responsible for the concept, character designs, environment, and UI art. See more »
Music Sheep, music visualization game.
I was the lead artist and responsible for concept, character designs, environment, obstacles, and UI art. See more »
Hobocat, puzzle platformer game.
I was the lead artist and responsible for the concept, character designs, environment, and UI art. See more »

Games

An older 2D animation piece of mine, "The Heart's Content."
The sketch shows planning of this meticulously drawn
1 minute, 20 seconds, 1,440 frames animation.
Watch it online.

I also animated this nifty little crank.
A more complete version is up on Vimeo.
More animated gifs to come!

Shirt design featuring Game Creation Society games from
the F08 and S09 semesters.

Shirt design for 1000plus 2011, a CMU day of service event.

Shirt design for the CMU School of Art for the 2008 school year.

Woot! shirt entry. The King of Kiwis for the cute derby.
See it on Woot!

Woot! shirt entry. 3 birds for the three derby.
See it on Woot!

Woot! shirt entry. Catbuns for the crosshatch derby.
See it on Woot!

Graphic Tees

Double tipped sharpie portraits!
See more from the same series here.

Ink sketches.
left: (rib)bon, pun art.
right: caffeine addiction!

Medicine container product design.
Prismas and Copic Marker and hands!

Medicine container, part 2.
Grab the container and twist off the top while squeezing the 2 sides.

Medicine container, part 3.
Figuring out best skin tones and exploring button shading.

Can you fly a balloon to the moon?
Ink and Copic Marker.

Various Copic Marker sketches.
left: sketch of primary colored car.
top-right: soot game concept art.
bottom-right: globe sketch.

Penciling things in.
left: origami crane instructional designs.
right: the four seasons of a tree.

Rocket kitty!
Game concept art done in Staedler Liners.

"Designing Peaceful Interfaces"
Some wireframes for MHCI Capstone.

A character of mine, toothless dinosaur.
left: dinosaur amongst the bamboo.
right: animation of the toothless dinosaur.

More wires in Staedler Liners.
Sometimes there is a ton of whitespace left on the pages.

Even more wires!
left: frames in an handcrank animation.
right: search wireframes and the original Raincat wire in the middle.

One of the early Yorokonde wires done in watercolour pencil.
The classy mouse mascot was born.

Abstract red ballpoint piece.
Note the ebb and flow!

Like sketches? See the latest @ sketch.bysusanlin.com!

Sketches

Paintings

Select few of my favorite oil, gouache, and watercolor paintings. Some are originals while others are older studies.

Susan, Designer(d)

hi! Susan Lin here. IAmA designer residing in the San Francisco bay area.

The nerd in me makes me a technology aficionado while the artist in me loves gorgeous things. I believe design thinking is futile without design shipping. I strive to be a great product designer.

I am also a Carnegie Mellon HCI alum.
And infp. Ask me about mbti.

Looking for full-time work!


↓ Résumé

I'd love to join a small team who needs a young, eager designer capable of UX, UI design, HTML/CSS, & swag making.

Elsewhere on the internet.


Blog sketch bysusanlin
Tweet @bysusanlin
Dribbble bysusanlin
Pin susanl
LinkedIn bysusanlin

Yes! The hat is real.
Say hi! Emails are best.