• Hi, I'm Nancy.

    I'm a visual & interactive designer interested in making memorable experiences.
    I spend my time petting dogs and ruining my eyesight •◡•

    Use ← → keys to explore!

    LinkedIn Twitter Dribbble Side Projects

Academy of Art University

  • UI/UX, Visual Design, IA, User Testing
  • (In progress- site launching soon)

While at JVST, I helped redesign the Academy of Art University's website. I led UX research as well as IA and creation of the new sitemap. I made interactive prototypes, helped write test plans, and conducted usability testing. While wireframing, I helped design a mobile-friendly modular component system that enabled us to design efficiently for hundreds of pages. I also contributed to the visual design of the site.

  • Photo by Bob Toy

    With over 18,000 students, the Academy of Art University is the largest private art and design school in the United States. The University aimed to drive interest in their diverse academic offerings and increase applications, but their own website was over a decade old and had become a sprawling mess. JVST was briefed with creating a refocused site that represented the innovative and forward-thinking spirit of the school- one that posited AAU as a leader in providing quality art and design education fit for all types of students.

    The old AAU site lacked focus, organization, and suprisingly, art.

    Our findings from stakeholder interviews, competitor research, and consideration of AAU's marketing goals informed our vision for the overarching user path: to inspire ("I know what I want to be"), inform ("I know what's going on"), and equip ("AAU will get me there"). This meant making it easy for students to clearly see what career paths each department offered upon graduation, highlighting past/current/future school events and student success stories throughout, and emphasizing the ease of contacting admissions for more information.

    Sampling of competitor and best practice research, user personas and goals

    The personas and user-goals we used to craft UX included prospective/current undergraduate students, graduate students, international students, online-only students, continuing education students, the parents of prospective domestic and international applicants, industry professionals, and finally school faculty and staff.

    Plotting out content and relationships between content in the new sitemap

    I tried to create a sitemap of the old site's structure for use as a starting point and as reference of what existed, but the site was so broken and so large that it proved impossible. I decided to start from a clean slate instead and start with the basic needs of every school- sections such as 'Academics', 'Admissions', 'About Us', 'Financial Aid', etc. Then I used personas and stakeholder interviews to map out what their main goals in visiting the site were, and gradually added additional branches as needed. When I finished covering the essentials, I created an interactive wireframe prototype and ran the site structure through several rounds of task-analysis testing to verify we were on the right path.

    Experimenting with various sitemap structures to strike a balance between shallow and deep content to avoid overwhelming a potential applicant.

    Evolution of our wireframes, from sketches to interactive prototypes.

    I used methods such as card-sorting, personas, task analysis, and user testing to test the effectiveness of our sitemap, wireframes, and terminology. The results from testing were invaluable- for example, we found out that users loved our approach of featuring career path summaries on each department homepage. In another instance, we learned that the label 'AAU Jobs' was being perceived wrongly as jobs for students through the school's career services center (it was actually for outsiders to apply to work at the school), and that many students didn't know what 'Accreditation' was. These findings helped us fine-tune content hiearchies and context, as well as copywriting, to convey clear messages.

    Multiple rounds of user testing with interactive desktop and mobile prototypes helped us gain insight on our audience's real-world usages, identify problem areas, and get confirmation on what was working well. I went back to the drawing board time and again to refine navigation, page flows, terminology, and balance a potential vs current student's needs in our wireframes.

    The following are a mix of unused design directions for homepage and department pages, as well as concepts that heavily influenced the final design. They focused on highlighting student work and happenings at the school.

Jennifer Lopez

  • UI/UX, Visual Design

Capitol Records came to JVST with the challenge of redesigning JenniferLopez.com. The aim was to create a singular destination for all things Jennifer. But instead of creating a site with standard sections such as 'Music', 'Tours', and 'Media', I sought to infuse her personality and life into the site experience. She is no longer just 'JLo' of the 2000's, but a force to be reckoned with as an entreprenuer, entertainer, producer, philanthropist, and role model.

  • My designs centered around the idea of showcasing the classy and sophisticated sides of Jennifer Lopez. Over the years she has matured from her roots as 'Jenny on the Block' to a successful, entreprenurial woman in charge of her passions and dreams. Based on a recent documentary about her by NUVOtv, 'Her Life, Her Journey', I decided to redefine sections of her site as 'My Life', 'My Work', and 'My Dreams'. Her social media feed became her 'diary', comprised of 'entries' including posts, photos, tweets, and songs she's listening to.

    The 'Vault' was an area that offered exclusive access to content created by Jennifer.

    Concept for an image gallery showcasing different photoshoots

    Concept for a music video archive

    A second variation with an expanded Film/TV section to showcase the different characters she has portrayed,
    a new section for her fashion/accessory brands, and expanded philanthropy section.

Sushi Set

Sushi Set is a puzzle / strategy iOS game based on a Russian computer game called 'Color Lines'. Sushi Set refreshes the 1992 classic by mixing in a sushi theme, cute characters, new gameplay such as the ability to 'bomb' the board, and a multiplayer element. I worked with Triet Luong (iOS developer) to come up with new features, in-app purchase opportunities, and gameplay. I designed the wireframes, flows, and visuals.

  • Sushi Set gets its name from the sets of sushi you make in order to clear the board, similar to Connect-4. When the board fills up, you have no more moves and its game over. You can play as one of four characters (cat, bear, pig, tiger), and your character cheers you on as you complete sets. Winning games or matches against other players earn you points and help you level up. Points may be used to buy in-game items or accessories for your character.

    Start screen, tutorials, board elements, other screens

    The following screens are from the shop, which lets you purchase items for your character. Locked items were acquired by acheiving a set challenge, and seasonal items were available within the given timeframe.

    Shop screens

    Many different character variations were possible with just a few items and color options.


A poster series and website based on a comparison of events that occurred on my date of birth and its corresponding date 20 years later. Through a quadrant system I developed featuring four sectors (good/chance, good/planned, bad/chance, bad/planned), I was able to categorize and illustrate the similarities/differences in the importance and timeframe of these events.

  • What happened in the world the day you were born? How significant were those events? And what does a relationship between events spanning two decades look like? I decided to find out by visualizing data about chance events, timeframe, significance, location, and outcome.

    Right: Comparing the significance of corresponding events 20 years later. Left: Events visualized by order they occured, and the quadrant areas they covered.

    The site lets you sort events more powerfully with filters such as geographic location and importance.

    Plotting all 26 datapoints on the quadrant system and experimenting with ways to see their similarities and differences over various sectors.

    10 of the 26 datapoints

Hungry Duck

Hungry Duck is a side-scrolling iOS game where you are a duck trying to get back to land. Your sidekick is a whale that helps you collect food for the journey. But be careful- avoid hitting UFO's, rockets, and other unsavory objects! I came up with the game concept and worked with Triet Luong (iOS developer) to make it a reality. I designed the wireframes, flows, and visuals.

  • The sketches below show an intro animation depicting the duck's desire to get back home. As he crosses the ocean aboard his trusty whale friend, he collects food and avoids unedible objects. The user controls the height of the whale's water spout by tapping and releasing. The more you tap, the less energy the whale has. Energy levels are replenished by collecting food.

    Early sketches of side-scrolling and vertical gameplay

    Left: Edible items include cake, fruit, and booster items like soda. Right: Avoid smelly socks and rockets.

    Start screen, collecting food, getting hit, and end screen

    The background changes according to the length of time you've played. Completing a level could possibly take several cycles of day/night until you reached land.

    Acheivement badges awarded for completing levels

    Design for the microsite


My childhood dreams came true when I got to work on Pokemon while at JVST. I created takeover themes for Pokemon.com to celebrate the finale of the 'Pokemon Power Bracket' campaign and created a 3D papercraft Pokemon as part of the campaign's downloadable digital prizes. I also contributed alternative design directions for their Pokedex 3D Pro minisite.

  • The 'Pokemon Power Bracket' campaign let fans vote for their all-time favorite Pokemon character- and it was Mew! I created several color and style variations that fit with the company's brand guide.

    The finished 3D papercraft Mew

    Part of the challenge in designing the papercraft was to make the steps and instructions simple enough for young children to complete.

    An alternate design for the Pokedex 3D Pro minisite, with 3D elements that could be viewed in perspective as you scrolled down the page.


  • Window & Store Display Design
  • Branding, Print, Crafting, Production

As an intern I was able to assist in all areas of the design and production process for Gap's Fall/Winter 2012 collections. From brainstorming to the final setup in our mock store, I made mood boards, mocks, produced hand-drawn in-store signage, worked on windows, packaging, branding, direct-mail pieces, press-kits, and had extensive experience in hands-on crafting work.

  • Backdrop and photobooth prop illustrations used in-store and online

    Gap Kid's 2012 holiday concept was to modernize the tradition of taking boring, staged family photos during Christmas time. We turned to the photobooth and its ability to take effortless snapshots of precious moments, and decided to put real photobooth stations in stores for parents and their children to enjoy together. The photobooth let shoppers try on real products as well as illustrated props against a backdrop, and we offered coupons on photo-printing services through our partnership with Tiny Prints.

    The Adult's concept was titled 'Joy It Up'. To highlight the theme of joyful abundance and brightness, we borrowed the spirit of the 'DIY' movement, and added funky touches of brightly colored knit-bombing and light-bombing to store fixtures, decorations, and windows. I helped design a matching 'Yarn Gothic' typeface to be used in a gifting guide, made wrapping paper patterns, and aided in the production of hundreds of in-store decorative props.

    Custom hand-wrapped 'Yarn Gothic' typeface

    Gifting Guide page spreads

    Wrapping paper explorations

    Window displays: GDance, Portobello Road, Brick Lane, & Holiday Photobooth Collections

    Window and in-store production work: Yarned fixtures and gift boxes, hand-drawn signage

    Hand-drawn type and props for Gap Kids fall collections

    Illustrations used in print and online ads

    Label explorations for Women's Khaki pant line

Asian Art Museum

As the Asian Art Museum's Agency of Record, JVST had the opportunity to brand their biggest event of the year- the exclusive Terracotta Warriors exhibition. I contributed to the final design direction for environmental signage, which included street and building banners, bus ads, posters, and online marketing materials.

  • As China's terracotta warriors are rarely seen outside of their country, it was a real treat for the Asian Art Museum to be able to bring six of the famed warrior statues to the states and host a special exhibition for the public.

    Mocks for bus ads, bus stop posters, and street pole signs. Photos by Charlie Clark.

    Poster variation #1

    Poster variation #2 (unused)

Instant Date

  • Physical Installation

The Instant Date was a project in exploring the design processes behind pop-up cards and paper folding mechanisms. Developed in 10 weeks, an 8x8ft pop-up was installed and exhibited in 'Elsewhere' (2012) along with a miniature version at 1:7 scale. 'Instant Date' was a semifinalist in the 2012 Adobe Design Achievement Awards, and was featured on PFSK.

  • Inspired by the cardboard 'Pop-up' office by duo Scheffknecht and Wagner in 2009, I sought to create my own version of life-sized pop-up furniture in the form of an 'instant' date. While Scheffknecht/ Wagner's design opens on a diagonal and the pieces are box-shaped, I was able to devise my own prototypes that opened on the seam and included complex curved shapes.

    Demonstration of the 1:7 scale miniature card

    The 8x8' card in action!

    When opened, the Instant Date includes two classic Eame's Eiffle chairs, a table, and two coffees.

    The entire table top folds- including cups and saucers

    Making pop-up boxes was easy, but curved shapes were challenging

Hello, Maganda!

  • Print Design

A coptic stitch bound book entitled 'Hello, Maganda!' / 'Hello, Beautiful!' I created for my Visual Communications class. The book, an abstract exploration of a fellow classmate's quirks and interests, used a narrative that tied in her FIlipino heritage, L.A. upbringing, and subsequent return to her culture as she took Tagalog language classes.

  • Some of my classmate's quirks included an affinity for mushrooms, an inability to swim, and a fear of the ocean. I abstracted those topics into chapters of the book. The book's structure, content, and design were inspired by traditional language learning workbooks (she was taking Tagalog classes at the time). For example, a chapter would be titled 'lumangoy' (translation: 'to swim') and would include step-by-step instructions on how to swim. Features of the book include a die-cut cover, open inner spine, modular pages, and Tagalog flashcards in the back.

    A selection of spreads from the book

    One of the quirks I learned about my classmate was that she knew exactly what her 'last meal' would be comprised of, if she had a choice. It'd be "spinach in artichoke dip with plain tortilla chips, baked ziti with chicken and mushrooms, and a white chocolate bar". I expanded on the idea of a 'last meal', and dedicated a chapter of the book to documenting the various 'last meal' requests of real death row prisoners. I illustrated their requests by scanning the items and pairing it side-by-side with their prison records.

    Items scanned: Bananas, pie, salad, eggs, coffee, M&Ms