emily hsiung MOBILE\WEBVISUAL DESIGNVISUAL DESIGN

PORTFOLIOPORTFOLIOMOBILE\WEB

2012

EDUCATION

PROGRAMS

ssarchitects [sept-dec ‘09] architectural intern

vicious dericious [jan ‘10-jan’11] visual designer

badgeville [jan’11-present] visual designer

university of michigan [architecture] class of ‘09EDUCATION

WORKWORK

PROGRAMS Fw

MOBILEAPPLICATIONSMOBILEAPPLICATIONS

AMP MUSIC PLAYER.

AMP was born out of a simple desire: a better player for music on the iPhone. We took the iPod app’s clunky user interface, sub-par playlist creation and standard graphics and turned it into a app that offered much more than just a simple music player.

PLAYLISTS: users can create playlists on the fly. We designed AMP’s unique interface around this specific feature. No more scrolling through On-The-Go; AMP offers simultaneous browsing and playlist creation, similar to the way music is added on iTunes or WinAmp. Playlists are always accessible, easily edited and saved.

ARTIST INFO: integration with external API databases enables quick access to artist info. Users can scroll through album art, sing along to lyrics, read an artist’s wiki page and look at music videos, as well as look for the next concert by that artist, all on one page.

SKINS: users customize their music player with a skin of their choice. With Apple’s strict design aesthetic and limited personalization options for most of their native apps, this was a popular feature. Six skins are available, showcased in the following pages.

your new music experience for the iPhone and iPod touch.

AMP MUSIc PlAyer: vIcIOUS derIcIOUS

01

was created as our standard skin. We wanted something minimalist and neutral, yet not quite “Apple”, since we were catering to iPhone users that wanted a player that was different from the standard offering.

liquid Glass incorporates subtle glosses and gradients with a neutral palette dotted with strategic emphasis of cool colors, focusing mainly on shades of blue. The soft radius of the buttons mimics Apple design, but the color choices and gloss shape impart an edgier, more modern feel.

AMP MUSIc PlAyer: vIcIOUS derIcIOUS

02

03

was created as an alternative to the standard Apple look. This way, we could cater to the users that wanted a better music player, but still wanted everything to match on their phone.

Blue Steel duplicates standard Apple, by utilizing gray gradient colors, a standard Apple background, rounder glosses than liquid Glass and rounded corners. We spruced it up a bit with a splash of deep sky blue and set the text as an easily readable Helvetica.

AMP MUSIc PlAyer: vIcIOUS derIcIOUS

is a bright, busy skin pulling elements from graffiti and retro style art.

We created this skin to cater to a younger female audience, ages 14-18. This demographic has shown an interest in more street/skater styles of clothing and we thought using graffiti elements and bright colors would cater to that interest.

Fonts used are a condensed form of Helvetica, for clarity, and American Typewriter, to add a splash of fun.

The color black is never used in this skin, to promote an organic feel and bright tones.

AMP MUSIc PlAyer: vIcIOUS derIcIOUS

04

is a foil to the Molly skin.

It utilizes the same skater/street trends and targets a male audience instead. Dark grays, taupes and creams float in the background, intersected with bright pops of blue and orange.

Textures and stamps of lampposts, street signs, high rises and more were used to create a urban grunge effect.

This is the second most popular skin chosen by our users, after the standard liquid Glass.

AMP MUSIc PlAyer: vIcIOUS derIcIOUS

05

06

was designed to appeal to another user type: the older male. We wanted to create a dark, sleek skin that looked richer and more mature than the standard liquid Glass.

We created this skin first by utilizing Trajan Pro, a bold, capitalized serif font that helped set a more masculine tone. The chicago skyline in the background imparts an air of a classy, jazzy city scene. various golds and silvers contrast against a black background littered with high rise city lights.

AMP MUSIc PlAyer: vIcIOUS derIcIOUS

AMP MUSIc PlAyer: vIcIOUS derIcIOUS

was designed with a summery, illustrated look in mind as well as an appeal to our female users.

each library icon is represented by a traditional Asian symbol and no glosses are utilized with this skin to provide a soft, matte, organic appeal.

The font chosen is a light version of Helvetica, which provides readability along with a slimmer look to match feminine light gold colors of Zen.

cherry blossom and grunge swirl brushes are used for background textures and koi fish are incorporated into selection and player screens for an illustrated look.

07

SNAP

SHOP

SHOW

ROOM

Snapshop Inc. contacted me to revamp their user interface. They had been featured by Apple but were still getting low ratings, and many reviews had mentioned a cluttered interface.

I ended up taking the app and restructuring their browsing and augmented reality screens.

I also designed several intra-app banners for the developers to use with the other iterations of this application as well as a new splash page and couple new buttons for the new flow of screens.

SNAPSHOP SNOWROOM, SNAPSHOP INC.

08

OSHA tHAI ReStAuRANt APP- luNCH RuSH APPS

LRA:

OSH

A TH

AI lunch rush Apps contacted me to design a user interface and app layout for them. They were looking to market a monthly app “subscription” to restaurants in the Bay Area.

The concept was simple but useful: business owners could have an all inclusive app made for their restaurant, including access to menus, contact info, locations, ordering- even a twitter and facebook feed for customers to follow. The owners could easily maintain it with a web interface and the pay a monthly fee for it.

With this in mind, I created two sets of pilot mocks. I needed a neutral “standard” layout and skin that could match most restaurants- the juxtaposition was to give each app just enough custom graphics that could be swapped out to give a unique look and feel.

I focused on a warm gray/black skin for the neutral look, along with flatter colors, outlines, round buttons, small icons, lighter glosses and a condensed font to convey a feel for a modern, yet warm and inviting restaurant.

09

Osha Thai (last page) is a modern Thai restaurant with trendy decor and menu items. Their main logo color is pink, so I made a home page with warm pinks and tropical oranges, photos of luxurious interiors and close up macro photos of their dishes.

Thirsty Bear (to the right) is a tapas bar known for their world class beer brewery. The restaurant is housed in a space with unfinished concrete floors and industrial wood and metal furniture. The home page is a replica of this space, with wood textures, warm colors and photos of rustic brews and food to give it a friendly, unpretentious, and down to earth feel.

LRA:

THIRS

TY B

EAR

10

SNAkeDOS, ANDy lIN

Snake DOS is a retro style iPhone game modeled after the classic Nibbles on MS-dOS. The developer wanted me to create an icon as well as a banner that showcased the app’s retro feel. I took the classic MS-dOS logo and created a “snake” version that would translate logically into the idea of the game. The banner was created with beige, matte colors and a retro mouse while pixilation throughout all the art conveyed an older, MS-dOS retro feel.

snak

e dO

S

11

DESIGNINGBADGEVILLEDESIGNING@BADGEVILLE

“Badgeville, The Behavior Platform, enables the world’s most innovative businesses to measure and influence user behavior.

Founded in 2010 to revolutionize the analytics industry and bring modern engagement experiences to every web and mobile property, Badgeville draws on proven techniques from social gaming, traditional loyalty programs and social networking in its acclaimed suite of Behavior lifecycle Management solutions.”

As the one and only visual designer at Badgeville, I wore more hats than I could count. Anything and everything that someone stuck their eyeballs on would go through my mouse, my creative Suite and my screen. I collaborated with every department of the company: I’d work with our sales reps to create web mocks to tell their story to the prospect, with marketing to create collateral for trade shows, flyers for events and case studies and project sheets to send to our customers. I worked with engineering and our project manager to create mocks and wireframes for our front end product and back end admin interface and supported our client services team by designing and creating graphic assets for clients after they signed. I designed company tshirts and infographics. I managed illustrators and other contractors.

I also conducted numerous interviews for another designer to work with me and we finally found her last month after 5 months of searching. By then, we had grown from 12 employees to just over 60. The following pages showcase just a sample of the work I’ve done for Badgeville in the 16 months I’ve worked there.

The Behavior Platform

Emily Hsiung

emily@badgeville.com @badgeville

640 Oak Grove AvenueMenlo Park, CA 94025

Visual Designer

BADGEVILLE WEBSITEThe director of marketing approached me to give our website a fresh redesign. I took the director and a couple of our executives through a 45 minute branding exercise to figure out what they wanted for our new look. We were growing up as a startup; we wanted to be modern, sophisticated and elegant, but still approachable.Site accessible at www.badgeville.com

BADGEVILLE INTERNALI worked with our Senior community Manager to design and build this site from scratch. We wanted a place where our customers could help each other answer questions and share ideas. The branding words used were: fun, playful, clean.

The Social Rewards & Analytics Platform

Grow Engagement

Drive Behavior

Gain Insight

BADG

EVILL

E EVE

NTS

A sample of the various event collateral that I’ve designed and laid out

BADG

EVILL

E MAR

KETIN

G

B L U E F LY

Download our free report:Social Gamification BenefitsBadgeville.com/reports/socialgamification

ww

w.b

adgeville.com

Track, measure, reward and

display user behavior.

Increase conversions, retention,

time on site, and referrals with a

powerful revolution in the social

user experience.

Gamification will never be the same.

Introducing Social Fabric.Gamification, meet social.

The Leading Smart Gami�cation& Social Loyalty Platform

Grow engagement. Drive behavior. Gain insight.

Introducing Social Fabric.

Badgeville.com/reports/socialgamification

Increase conversions, retention, time on site, traffic and referrals with a powerful revolution in the social user experience. Badgeville, the Social Loyalty Platform, announces a revolution in user engagement:

Download our free report:Social Gamification Benefits

+ Relevant activity streams

+ Social notifications and alerts

+ Enable following of anyone on your site

1

2

3

Promotional flyers created to market a new product.

END