foreground01

WAN-TING HUANG

—  User Experience Designer  —

“I seek to create simple and aesthetic experience.”

foreground03

ABOUT

Hi, my name is 黃莞婷, read as HuangWanTing. In English, "Wan-Ting" happens to be the continuous tense of "want", which I think is a cool coincidence.

As a user experience designer, I believe that good design comes from human-centered thinking and processes, as well as collaboration with diverse people. I seek to create simple and aesthetic interactive experiences by constantly learning, practicing and reflecting about the surprises and routines in life's challenges and adventures.

I am currently working at EchoUser(www.echouser.com), a UX design agency in San Francisco, CA, as a user experience designer. I work with clients to create beautiful products with simple and intuitive interfaces.

Prior to joining EchoUser, I was a freelance UX designer working on projects with both startups and corporations. I got a Master's degree in Human-Computer Interaction Design from Indiana University Bloomington and a Bachelor's degree in Business Administration from National Taiwan University. I am currently not available for full-time employment but always interested in taking cool projects on the side. If you're interested in collaboration, let's talk!

resume icon CV
WanTingHuang
foreground04 process

PROCESS

foreground05

CONTACT linkedindribbble

You can get in touch with me via email: wanting76[-at-]gmail[-dot-]com,
or use the contact form below.

Date

May. 2012~May. 2013(Expected)

Role

Research, Sketching, Wireframing, Prototyping, Developing, User Testing

Due to Confidentiality Agreement with Cook Medical, detailed materials are for face-to-face showcase only.

Style Guide

An intern project at Cook Medical, designing and developing style guides for web and digital publication on iOS devices.

presentation01

The style guide for Cook's incoming public website.

presentation02

The style guide is intended to unify Cook's overall brand identity but still keep the characteristics among its 11 SBUs.

presentation03

The scope of the style guide.

presentation04

The structure of the style guide.

During my internship at Cook Medical since May 2012, my project mainly focused on developing a style guide for Cook’s incoming public website, and then extending the web identity further to Cook's digital publications on iPads. The style guide is a document that record the design team's decisions through out the design process, which is presented in a visually-enhanced way to clearly convey our thoughts and advance communication with other in-house designers as well as outside vendors. It will act as a living document that will reflect updates and evolve as the project goes forward.

The second stage of the project is to convert the paper style guide into an interactive digital publication on iPads that is more engaging and easier to share. My responsibility was to research and explore the possible interaction and visual design on the screen that is aligned with Cook's brand identity, and also build an example application by Adobe Publishing Suite to envision other future digital publications.

slider01

The responsive design of the homepage.

slider02

The responsive design of the submenu for each section.

slider03

The structure of the app.

Date

Nov. 2012~Dec. 2012
(3 weeks)

Team

Barb Belsito Jacob Farny Hongyuan Jiang

Role

Ideation, Secondary research, Conceptualization, Prototyping

PDF

Group Dynamics

A tablet application that facilitates the communication and understanding between introverts and extroverts in a team setting.

screenshot

The design is a platform bridging extroverts and introverts.

ideation

We firstly ideated potential topics through affinity diagram.

postit

Then we grouped similar ideas together to find common grounds.

narrowdown

The result of first-stage narrowing down.

People with different temperaments work differently. Misunderstanding occurs when people judge their teammates' contribution only from their own perspectives and only from what they see during a meeting. In a team setting, people who are extroverted can perceive their introverted teammates as lazy or as if they don’t care, don’t have anything to say, etc. On the other hand, introverts can view their extroverted teammates as loud and bossy and as people who don’t take time to think things through before they talk.

Extroverts thrive on social interaction while introverts tend to work better and more creatively alone where they are free to focus on specific goals.

Based on our primary and secondary research, we discovered that each group's optimal creative and productive condition is the exact opposite of the other. Extroverts thrive on social interaction while introverts tend to work better and more creatively alone where they are free to focus on specific goals. From Susan Cain’s book, Quiet, we learned about the extrovert ideal and how it changed the fabric of the American workforce. We also learned that small teams with diversity in skills and personality provide the best results.

Our design was intended to improve the understanding between introverts and extroverts in a team setting by providing them a collaborative tool to facilitate communication before, during and after meetings. The prototypes below showed how the relation tree visualizes the group dynamics and each team member's contribution, as well as how the filter function provides constant feedback to team members.

prototype01

Start a new project.

prototype02

Every team member can record what they did and convey what they think from the timeline.

prototype03

A new content is added to the timeline.

prototype04

Users can drag the content to the map to build relations of each other's contribution.

prototype05

As the content becomes richer, the relation tree grows larger as well.

prototype06

The panel below sums each member's posts on the timeline, nodes in the tree, and how relative those nodes are.

prototype07

Tapping the first person reveals his own contribution.

prototype08

The same thing works for the other members.

Before meetings, people who did more individual works can make their contribution be seen by others through the application. During meetings, the facilitator of the team can start discussions from what has been recorded, instead of being drawn by people who talk more and ignoring the quieter one. Once in a while, the team can review each other's contribution and discuss future expectation based on everybody's performance. The following video showed an overall scenario that the design can possibly be used.

You can also check out the same video on Vimeo here.

Date

Nov. 2012
(2 weeks)

Team

Minqi Luo David Orr Nick Truncone

Role

Ideation, Secondary research, Conceptualization, Prototyping, Usability Test, Presentation

Eames Store

An iPad application showcasing Eames chair collection that reflects Eames' design spirit.

screenshot

The design was aimed at showcasing Eames' iterative design spirit.

ideation

The challenge is to create an Eames store within Crate & Barrel's current product lines.

postit

We researched about the histories and design styles of both parties.

narrowdown

The moodboards created by graphic designers that served as a bridge of our visual communication.

narrowdown

A sketch of our final concept and how we were going to divide the work.

Given that Crate & Barrel, an American furniture company, had made a commitment to launch The Eames Store within its product lines, the challenge is to create a digital experience on iPads: a store within a store that features the furniture designs of Charles and Ray Eames. It was also a collaborative project between the School of Fine Arts and the School of Informatics at IU. Our team was composed of 2 graphic designers and 2 interaction designers, which reflects the real-time collaboration in a work environment.

"Yes, it was a flash of inspiration, a kind of 30-year flash." by Charles Eames describing how the development of the Molded Plywood Chairs evolved over time.

In the first meeting, our team started from exchanging each other's design processes and initial thoughts about the project to find common grounds. The group came to the decision that the app should be as much about education as commerce, connecting with the desired audience - young, tasteful professionals with money to burn - inviting them to be part of a world which has been shaped by the Eameses in subtle and explicit ways. After that, each person focused on researching his field of expertise. For interaction designers, we looked more into users' needs and the exemplars of tablet shopping experience, while graphic designers focused more on Eames' design spirits and building actual visual elements, e.g. moodboards, as the resource assets that can be utilized in the future. We shared phrases and keywords which shone out brightly during our research, with the idea of a “thirty year flash of inspiration” standing out as especially potent. Exploring this idea on the white board, the group arrived at an idea of a graphic timeline, leading the user from the initial inspiration for each Eames design, to the logical conclusion of committing to a purchase.

prototype01

The homepage.

prototype02

The introduction page provided an overview of Eames' design.

prototype03

The collection of Eames chairs.

prototype04

Users can tap a specific chair to see more of it's information.

prototype05

Users can explore the history of the chair on the timeline by scrolling to the right.

prototype06

The middle of the timeline.

prototype07

The end of the timeline.

prototype08

Scrolling to the end, users can see the chair they selected placed in situ.

prototype09

The shopping cart summarized all the selected items and allowed users to finalize product details.

The project was a fresh and inspired collaborative experience for all of us. The interaction designers learned about the central role of type as visual identity from the graphic designers, who likewise appreciated the insights of usability testing performed by the interaction designers. The project has opened our eyes to the methods employed by our counterparts and made us more open minded to new possibilities, both in envisioning a final artifact and in the collaborative process itself.

Date

Aug. 2012
(5 days)

Team

Parichehr Razmand

Role

Ideation, Secondary research, Conceptualization, Prototyping, Usability Test, Presentation

Persona PDF Usability Test PDF

Zombie Survival

An iPhone application helping people evacuate to the West from the zombie outbreaks.

screenshot

The zombie outbreaks started from the East. People are heading to California in order to survive.

ideation

The app allowed users to send SOS signal, report zombies' whereabouts, and help each other with private vehicles.

postit

We created a persona and did 2 usability tests to evaluate our design.

It's better to take precautions against a calamity before it happens. This fictional zombie project is one of the examples. We were designers who got a request of designing a survival app from the leader of other survivors when the walking dead was prevalent on the earth. We had very limited information about the outbreaks. We just knew that the West was a safer place to go and people could still access to unstable signals through their smartphones.

Evacuating people in groups is more efficient and safer than evacuating them individually.

In order to approach this fictional problem, we gained insights from TV series about zombies and created a persona as our reference point. We also looked into the best practice of mass evacuation in human's disastrous history, where we found that evacuating people in groups is more efficient and safer than evacuating them individually. With the idea in mind, we developed a concept of a carpooling system, given that there were no any rescue teams around. People needed to help each other get on vehicles in order to make it to California.

prototype01

The homepage.

prototype02

A zoom-out map showing users' final destination to the West.

prototype03

After zooming in, users can see dangerous areas as well as resources and other survivors around them.

prototype04

Users can change their icon to SOS by tapping the SOS button.

prototype05

Users can identify their current areas as dangerous areas by pressing the bottom-centered button.

prototype06

Users can let others know they have vehicles if they are willing to carpool with other survivors.

prototype07

The app was also attached with survival guides for people who know little about zombies.

prototype08

The app will send warning signal if users are getting close to dangerous areas.

prototype09

The GPS will reroute if users are off the pre-planned path.

Date

Feb. 2012~Mar. 2012
(a month)

Team

Wishaya Piyasirisin

Role

Ideation, Primary and secondary research, Conceptualization, Booklet design.

PDF

Ethnic Cooking Journey

A workbook about preserving culinary heritage.

spread01

Front cover.

spread02

Problem reframing.

spread03

Narrowing down to our problem space.

spread04

Research methods.

spread05

Interview and observation.

spread06

Online survey.

spread07

Conceptualization.

spread08

Concept map.

spread09

Exemplars.

spread10

Concept 1

spread11

Concept 2.

spread12

Concept 3.

spread13

References.

spread14

References.

spread15

Back cover.

A design workbook is a way of presenting design processes, which includes strategies for targeting design research, design thinking and design communication. The goal of a workbook is to document the research methods that are used and how those research results lead to final concepts. It focuses more on the beginning exploratory stage of a project, rather than finalizing concept details in the later stages.

A design workbook focuses more on the beginning exploratory stage of a project.

In this specific design challenge, we were asked to ideate around the topic of preserving cultural heritage through interaction design. We first created a mind map and brainstormed about interested topics, with "the culture of ethnic food" speaking to us the most. We then went for this direction and did couple interview and observation sessions to gain insights from them. We also did an online survey to involve more subjects in order to gain bigger picture of the problem. Based on our research, in the end we generated three concepts, by which we hoped to enhance people's awareness about the ethnic food around them and increase the convenience to access to resources they need when cooking.

Date

Oct. 2012~Nov. 2012
(2 monthes)

PDF

Brilliant Expert

A booklet design about a recommendation system for interior lighting selection.

screenshot

Wire binding.

ideation

Personas.

postit

Different moments of the application.

The final interface sought to turn a traditional text-intensive recommendation application into a visually-focused interface that is more intuitive for users.

The selection of proper interior lighting is somewhat technical for people who are not familiar with the terminology of physics. It's also very subjective in terms of appearance preference and room layout. The design was intended to create a recommendation system that can achieve both functionality and aesthetics as well as consider a space as a whole. Besides, since the project was from the course of graphic design, the final interface sought to turn a traditional text-intensive recommendation application into a visually-focused interface that is more intuitive for users.

In addition to the application, the booklet also contained initial exercises in preparation for the final concept, including a traditional matrix, an interactive matrix, a concept map, personas and a system map. They might not relate to the final recommendation system directly but were assets that helped me develop the idea in the end.

prototype01

The homepage.

prototype02

Start exloring.

prototype03

Inputing basic room information.

prototype04

Sliding the correct room information to the middle.

prototype05

Going to the next section.

prototype06

The bubbles are floating on the page. The size of the bubble reflects the level of recommendation generated by the system.

prototype07

Tapping on each bubble can bring up more detailed information about the product.

prototype08

There are filters on the right to give more specific search result.

prototype09

Users can adjust the value by sliding the markers.

prototype10

The size of the bubbles change while the value of the filters change, reflecting different results of recommendation.

prototype11

Users can go to the shopping cart after they selected what they need.

prototype12

Within the shopping cart, users could adjust the setting of the room get a sense of total lighting as a whole.

prototype13

Dragging the corner to change the room shape.

prototype14

Adding and moving lighting sources around.

prototype15

Accepting suggestions from the system to make minor changes.

prototype16

Confirmation of the purchase.

Date

Aug. 2012~Present
(will be a lifelong project)

Personal Identity

An identity design for myself as an interaction designer.

screenshot

The website was designed and hand-coded by myself based on the HTML5 standard.

ideation

The print pieces: letterhead, envelope and namecard.

ideation

The letterhead.

ideation

The envelope.

ideation

The namecard.

I found the personal identity project is the most challenging project within my portfolio, not only because there is no deadline to work for myself, but also because my design philosophy evolves every time I finish a new project. The project was intended to capture who I am as a designer right now, but it will definitely be a lifelong project that I'll keep in mind forever.

About this website

The website was designed and hand-coded by myself based on the HTML5 standard. With the single-page design, I hoped to create a smooth flow that portrays myself and showcases my works within just a few glances.

Client

23andMe, Inc

Date

Jul. 2013~Sep. 2013

Team

Eric Hollings

and the marketing and dev team in the company

Role

Interface design, Visual graphics creation, Task flow design, UX strategies

Recent Projects

A collection of some work-in-progress and fun projects.

Public Website Revamp

23andme design process

Check out the full site at www.23andme.com.

More details about the process and mocks:

Redesigning the checkout flow, research and wireframes [pdf download]

Full mocks of the responsive site [pdf download]

Client

Zenpayroll, Inc

Date

May 2013~Jul. 2013

Role

Visual design

Payroll Infographic

ZenPayroll, Inc provides online payroll service that enables businesses to get set up and run payroll in minutes, from any web enabled device. I helped the team create infographics that go with their blog posts, as well as create other marketing materials.

zenpayroll infographic

See original blog post: [click]

Date

May 2013

Role

User research, UX strategy, Interaction design

Notification Redesign

The project is about developing strategy for improving the notification system on iOS devices. It's a personal project that I did to showcase my design thinking and process.

notification process

See full presentation [pdf download]

Date

Oct.2012

Arduino Prototype

Teamworked with Tarun Gangwani.

You can also check out the same video on Vimeo here.

Arduino is an open-source electronics prototyping platform based on flexible, easy-to-use hardware and software. In this project, we used Arduino to modify a Newton's Cradle, making it go beyond a physical device that demonstrates basic physics rule, but also an interactive toy that can play music with different tempos.

Date

Nov.2012~present

Visual Design

A collection of my visual design works.

Window World's Classified Redesign

collection

The collection of all 4 redesign works.

ad01

The first redesign.

ad02

The second redesign

ad03

The third redesign

ad04

The fourth redesign.

original ad

The original ad.

The visual design of a typical paper classified usually suffers from over-decoration, which contains too many different fonts, colors, and images. The challenge of the project is about improving a traditional classified by using only 1 font and 1 image to create visual hierarchy and interest.

Stamp Design

collection

A collection of 16 stamps.

To design a collection of 16 stamps of endangered species desgined for World Wildlife Fund, I chose the same color palette and use geometric shapes to create a consistent visual look for each animals.

Postcard Design

collection

The first 4 postcards.

collection

The last 4 postcards.

collection

Front and back.

The collection of 8 postcards of endangered species were also designed for World Wildlife Fund. With the concept, I was intended to strengthen the idea that humans occupy those animals' habitats and put them endangered.

Bookcover Design

collection

Romeo and Juliet.

collection

Hamlet.

collection

Macbeth.

collection

Othello.

The collection of 4 book covers were designed for the Penguin Shakespeare Series. I created patterns that represent the themes from each story, and chose script fonts to enhance the overall classic look.