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

tHIRStY BeAR APP- luNCH RuSH APPS

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.

The Behavior Platform

Emily Hsiung

emily@badgeville.com @badgeville

640 Oak Grove AvenueMenlo Park, CA 94025

Visual Designer

Site accessible at www.badgeville.com

Badgeville’s director of Marketing approached me to lead a website refresh. We were a startup, but growing up, and our site needed to reflect that sentiment.

I led her and two other executives on a 45 minute branding exercise.

Badgeville to us was: elegant, sophicated, modern but still approachable.

The design utilized the typical enterprise blue (with white background), but textures, shadows, splashes of color as well as playful graphics helped lighten it up.

The whole project was designed in a little less than two weeks, with feedback from the director, ceO and vP of Business development.

BADG

EVILL

E WEB

SITE

COMPANY WeBSIte, BADGeVIlle

Header styling, text styling, graphical styling and button styling included in the design mocks- to make the dev’s life a little easier.COMPANY WeBSIte, BADGeVIlle

15

COMPANY WeBSIte, BADGeVIlle

We wanted to design a community where our clients could access documentation, ping us for help and also chat about the latest Badgeville news and products.

We wanted to keep with an aesthetic similar to our corporate site, but more playful- it is a community, after all.

I exaggerated the bright splashes of color, took down the top nav bar, contained it to a piece of “paper” and added a light blue background. The previous village graphic was also extended to a full screen panorama.

We also added some of our own gamification elements to the site, such as leaderboards, header widgets and mini icons/badges.

This is a WIP and should be completely coded in 4-6 weeks.

BV CO

MM

UNITY

WEB

SITE

COMMuNItY WeBSIte, BADGeVIlle

Site not accessible: internal only

COMMuNItY WeBSIte, BADGeVIlle

COMMuNItY WeBSIte, BADGeVIlle

19

The Badgeville widgets were designed as a front end visualization of our dynamic Game engine. The dGe allows anyone to track any behavior on a website, whether it be reading, watching videos, commenting on blog posts or checking in to a hotel online.

From this functionality sprang leaderboards, profiles, user hovers, activity streams and more.

I took our original design and streamlined the customization process. Before, the client needed 10+ images that were stretched and sized to certain specs- but the process was too confusing.

With these widgets, everything (save some small icons) was renderable purely by cSS. clients could change colors, fonts, font sizes and widget radii in our Widget Studio to get a preview of what our software would look like on their sites.

BV G

AMIFI

CATIO

N W

IDGE

TSGAMIFICAtION WIDGetS, BADGeVIlle

20

GAMIFICAtION WIDGetS, BADGeVIlle- PROFIle SHOWCASe

22

GAMIFICAtION WIDGetS, BADGeVIlle- FOllOW FuNCtIONAlItY

23

GAMIFICAtION WIDGetS, BADGeVIlle- SOCIAl CONtext/MeCHANICS PRODuCt (MINI PROFIle & ACtIVItY StReAM)

Blue widgets show end product, gray widgets were different iterations & explorations

24

BV BADGESI illustrated various badges for Badgeville, these being my favorite set in terms of style. created for our Bazaarvoice x Badgeville connector in Q1 of 2012

The Social Rewards & Analytics Platform

Grow Engagement

Drive Behavior

Gain Insight

BADG

EVILL

E EVE

NTS

layout Only

END