Welcome to my
Design Portfolio!

From a designer to a team lead, my ultimate
mission is to ensure that my users can achieve
their goal with a joyful and meaningful experience.

Scroll Down

Who I Am

I started my career as a web-UI designer in 2000 and keep digging deeper from the surface of the front-end design to the core of user experience.

I've been working on UI and UX design for more than 15 years specifically for print, web media, desktop applications, and mobile devices. I develop myself as a multidisciplinary designer who has a strong background in both graphic (UI) and user interactivity (UX). In my opinion, good user experience is way more than just good-looking interface design.


Profession Experience

Sr. UI/UX Design Manager

DMAI Company 2019-Present

- Supervising and managing UX/UI team members
- Defining standard project developing processes
- Providing team design direction for UX/UI projects
- Responsible for project Quality, Creativity and Delivery
- Fully in charged for UX/UI design of AILA project
- Fully in charged for UX/UI design of MAIA Project

UI/UX Design Lead

Age of Learning Company 2015-2019

As a UX design lead, my work at Age of Learning inc (ABCmouse.com) is analyzing the core product user experience including children and parents users, researching the user's behavior and providing innovational UX solutions that reach the business goal.

Senior UI/UX Designer

Fuhu - Nabi Tablet 2010-2015

I joined Fuhu company in 2010 as a senior UI/UX designer. We developed the world's first fully functional tablet that is specifically designed for children. I was in charge of providing UX/UI solutions on many core features. Nabi tablet was awarded as the best tablet of 2013.

Senior Web Designer

Upper Deck Company - 2005-2010

My position as a senior web designer at Upper Deck, a trading card company was to create and maintain the entertainment products' official websites such as World of Warcraft and Yu-Gi-Oh. Each product site has very strong art and style on the design. I had to generate and design new content that matches the product's theme and style.

Master of Art - Interactive Design

Savannah College of Art & Design - 2003-2005

After working as a web-artist for 3 years in Taipei, I felt I need to learn more about users' behavior and decided to study at Savannah College of Art & Design for my master's degree in User Interactive Design. I spent 2 years to build up my knowledge of understanding how users interact with digital platforms.

How people talk about me.

Author image

Yao joined DMAI as a Sr. UI/UX Designer, transforming the team into a well-oiled machine. I highly commend his attention to detail in processes - he's careful and thoughtful about communication, making him stand out as a leader and design visionary for our products. He brings up potential issues early and often, before they spiral out of control, which made him an essential ingredient in our team. I wish to one day work closely with him again.

Read More Read More on linkedin

Nishant Shukla VP Engineering, DMAI
Author image

Yao is not only very skillful in UX/UI design but also innovative in surveying the competitive landscape and coming up with unique and attractive proposals. He is also a caring team leader that consistently provides professional guidance to his team members...

Read More Read More on linkedin

Weijun Lee Director of Products, DMAI
Author image

I worked closely with Yao on two AI products as the product manager. Yao is a fantastic UI/UX designer, as well as an exceptionally reliable design team leader. He is adaptive, hard-working, and very organized. I remember we met a complex challenge of our product in a critical moment, Yao came up with clear logic and a quick design upgrade to help the project move forward successfully...

Read More Read More on linkedin

Yang Dowd Xu Technical Product Manager, DMAI
Author image

I personally worked with Yao in another company before. Yao is amazing to work with, not only his dedication and hard working ethics, but Yao is always fearless in taking on our UI/UX projects and pushing its boundaries with creativity. Yao is also a strong team player and design lead with kind eyes, passion and patience for team members. It has been a great experience and I am humble to recommend Yao! Keep up with your FANTASTIC work!

Read More Read More on linkedin

Nicole Liang Talent Acquisition, DMAI
Author image

My role as the head of User Experience Design, I come into collaborate with many talented UX/UI design leads - and Yao, when it comes to game design thinking for the modern cross-platform experience, is one of the best I've worked with. We've developed data-driven experience design strategies together for many products for both children and grownups, and aside from his talent, what I appreciate most is how reliable and responsive he is...

Read More Read More on linkedin

Takeshi Horiuchi Director, User Experience Design, Age of Learning
Author image

Yao is an exceptionally talented manager and UI/UX designer. He was my manager at DMAI, Inc. and quickly proved to be reliable, clear, adaptable, and creative. He has a knack for being able to come up with really sophisticated solutions to complex issues and has always given feedback in a timely and efficient manner. Aside from work related issues, Yao has always gone above and beyond to make sure I was comfortable in my work environment and that I was happy with my position within the company. Any company would be lucky to have Yao on their team and I hope there are many more opportunities for us to work together in the future.

Read More Read More on linkedin

Greg Mako UX/UI designer, DMAI
Author image

Yao is an exceptional user experience designer. I worked with him for over two years and he pays exceptional attention to design details and throughly thinks through and solves challenging design issues. He was great working with when he brought his prototypes to test in our usability lab, as he always had his goals and questions outlined when preparing for testing. I highly recommend, Yao, as he would be an asset to any team.

Read More Read More on linkedin

Marie Maxey Senior User Research Manager, Age of Learning
Author image

Yao is the "machine" in Creative. His Flash and animation skill has been a tremendous help for Fooz Pet Team and a huge asset to Creative Team. His ability to multi-task and joggle between projects is one of his great success at Fuhu. His knowledge of tech requirements in Ul is also one of his strength. His great attitude and openness to feedback has made him a great designer to work with. Whenever we have Photoshop questions we can always count on Yao to solve it.

Read More Read More on linkedin

Antony Pai Director, Brand Experience, Fuhu Company Nabi Tablet
Author image

Hsin is that rare creative talent who exceeds expectations on every project. I managed Hsin for approximately 3 years at Upper Deck, and I can honestly say that he is one of the most talented, driven, and responsible designers/developers I have ever worked with. Whenever I handed a project to Hsin, I considered it already done; he never failed to deliver by deadline, and his creative talent and knowledge of web development allowed me the peace of mind to know that the project would be completed above all expectations...

Read More Read More on linkedin

Morgan Bonar Sr. Interactive Producer, Upper Deck

What I Can

A multidisciplinary designer who has a strong background in both graphics (UI) and user interactivity (UX).

Begun as a web-artist then UI designer and eventually a senior UI/UX design lead, this background and progress provide me with a full vision of how users will encounter a digital platform. I can do almost any type of design project from the front-end UI style design, user testing, and prototyping, user experience (wireframe and flowchart) developing, and product Strategy analyzing.

Design Team Management

- Manage designer
- Project development process
- Project initial requirements and direction
- Cross-teams communication
- Reviewing and providing feedback

UI Design

Website style-guide, webpage layout/graphic design, application interface design, mobile app UI design. I am an expert for Adobe Creative Cloud design software such as Photoshop and Illustrator.

UX Development

Developing user flowchart and wireframe for defining the core user experience. I use software such as Axure, Adobe XD and Lucidchart when working for user experience development.

Web Design

Adobe Dreamweaver for web-design with hand-coding HTML5 and CSS style-sheet.

Product Strategy

Teardown research for competitor products, user journey mapping study, UI/UX designer training, BI (Business Intelligence) Data research.

User Research

User testing plan, User test script, 3 stages of user test (Exploration, Iteration, and Validation), user test/interview observation, Documenting test report and key learnings.

Prototyping

Depending on what's going to be tested and what we want to find out from the test, I use various prototyping tools like Marvelapp, Axure, Origami, Sketch or sometimes even with a paper-based prototype.

Recent Works

Projects with DMAI Company

AILA - Animal Island Learning Adventure Child APP Project

Android and iOS Tablets

View More

AILA (Animal Island Learning Adventure) is an early education mobile app that was designed for preschool children. It featured a total of 12 units (120 education activities) of curriculum progress. The objective of the design was to provide young users with an understandable/learnable interface with a joyful learning experience. Besides, it also provides complete parental controls such as screen-time limits and child usage reports. Click here for the complete UX/UI design document.

AILA Parent APP Project

Android and iOS smart-phone

View More

Bundled with the AILA child app, the AILA parent app is a smart-phone app that provides AILA parents with an easy way to monitor and manage their child accounts. It can remotely edit the child's account, view the daily usage report, and oversee the child's learning progress. The app is related to the AILA child app but needs to redesign the overall style for the interface to fit with the parent users. Click here to see the design UX documents (user flowchart and wireframes).

MAIA - US K-12 E-Learning Website

Cognitive AI Education/tutorial site

View More

MAIA is an adaptive, AI-powered learning chatbot for K-12 English Language Learners. MAIA empowers teachers by giving them the ability to provide personalized instruction to each ELL student through frontloading lessons. What you see above is the mockups for redesigning the product interfaces. It is still undergoing development. By revising the UI design, we will provide users with the better visual experience.
Click here see the original UI design | Click here to see the user flowchart and wireframes

DMAI Authoring Tool Project

Web Application

View More

DMAI Authoring Tool is a web application that enables users to create learning content, lessons, and courses using text, media, and interactions. Mainly such content developed to use it in LMS and can be saved in various formats. It is still an on-going project and I was in charge of helping them redefine all the user experience and functions. By the complete user flowchart/sitemap and wireframes for all the features, both UX/UI designers and developers can obtain a clear view of the entire product.
Click here to browse the complete UX/PDF document

UX/UI Project Design and Review Process

Presentation and Team training

View More

When I joined DMAI as a senior UX/UI design lead, one of the biggest missions was to help them define and set up a standard process for project development from beginning through the approval and delivery. The process involves cross-team members such as product owner, project manager, tech-lead, and marketing lead. After the presentation and instruction, people from different teams learned about what roles they would play and what is responsible in each stage.
Click here to see the Presentation PDF

DMAI Authoring Tool Re-Branding Project

Web Application UI design

View More

While engineers were developing all features for the Authoring Tool site, we were also planning to redesign the theme style for better branding and visual quality. These mockups covered the main screens for the Authoring Tool website.




Featured Works

User Interface Design Projects

Nabi 2 Tablet UI Design

Android Tablet OS UI Design

View More

Nabi 2 Kids Mode is an Android-based system that features parental control. It is designed specifically for children to give parents peace of mind by protecting their kids from any inappropriate content. I was honored to work on this project from concept to flow and was in charge of the system settings and Sync functions.

Nabi XD Launcher Project

Android Tablet OS UI Design

View More

Nabi XD Launcher (also called "Smart Screen"), was released at the end of 2012. Nabi XD tablets targeted audience is teenagers. To make the product more customizable, we provided users a way to set up their screens and allow dynamic home screen upon time and locations. As the lead designer on UI and UX for this project, I worked closely with other designers and engineers to ensure the UI and flows met the business objectives.

Spinlet Plus TV APP Design

Online Video Stream APP for Kids

View More

Spinlet+ TV is an online cartoon streaming and watching application for kids. It is supported by Cookie Jar TV that has over 700 hours of kid-safe entertainment. The challenge was to design the UI and UX that kids can use without any trouble. To make it a successful product, I had to conduct extensive research to understand kids' behavior. Many questions like what kids favorite cartoon characters are and their literacy were essential in solving the puzzle. I was put in charge of this project to design and develop the visual solution and make sure all UI and UX would be comprehensive and enjoyable for kid users. This app soon became one of the key features for all nearby tablets.

Nabigator Parental App

Mobile App UI/UX Design

View More

Nabigator is an Android and iOS app for parents to install on their cell-phone so they can remotely do all the parental controls on their kid’s tablets. Moreover, it also connects with kid’s tablets via instant messages, email, and share photos. I was fully in charge of developing the UI/UX for this project. One of the biggest challenges was the consistent issue on UI and UX pattern cross whole application because it combines more than 8 different individual Apps into one. I spent a long time on redefining the app so users can use the app with the smooth and united user experience.

Nabi Sync Application

Desktop Application UI/UX Design

View More

Just as it was named, Nabi Sync is a PC and MAC application that allows users to synchronize photos, music, movies, and transfer them to and from the Nabi tablet. One of the things that no one has tried before (at that time) was that we had to figure out how to make this happen "WIRELESSLY". The sync function is common for most platforms, but syncing with no cord is a whole new story. Questions like “How a user can get started?”, “What they should look first?” pop up instantly. Most importantly, how can we make sure that young users will still be protected by parental control? All these questions are where I would come in handy.

Nabi App Zone

Tablet App Store for Kids, UI/UX Design

View More

The Nabi App Zone is an application that young users can buy, download and manage their apps, music, eBooks, and movies from their Nabi tablets. In other words, it's just like a Nabi version iTune, but all contents are pre-selected and are appropriate for kids. I was assigned to oversee the checkout process and purchase section. It was a pleasure to work with other designers and provide my commentary (feedback). Sometimes, the best way to learn is to teach.




FEATURED WORKS

Web and Visual Design

World of Warcract TCG Official Site

Web Design

View More

This was one of the web projects that I am most proud of. It was the official web site for World of Warcraft TCG (one of the most popular trading card game in the US) for Upper Deck company. I was responsible for creating and maintaining the entire web site for new products and events. It is designed to closely match the original WOW theme. Sadly, the site is no longer live.

Yu-Gi-Oh TCG Official Site

Web Design

Web Design

What is the world's most popular TCG game? The answer might be simple, Yu-Gi-Oh! (A card game manufactured by Konami). I was asked to re-design the official Yu-Gi_Oh web site for the US market back in 2008. I had to make sure the style will fit the guideline from Konami, but will still have some features that we wanted to add. Again, to my dismay, Upper Deck is no longer running this product.

Nabi Point of Sale Mockup

Graphic/Photoshop Design

View More

POS (point of sale) is the battlefront where a product itself will fight its competitor. At FUHU company, very often I would help the marketing team in coming up with the highest quality POS image like this one. That is very helpful and critical of them when they are doing a business proposal because we need to visually show our business partners the best of our idea to earn their business. This example was made in a day by using Adobe Photoshop only (no 3D software used).

Mini Mogul GAME UI Design

Game Development

View More

I am majoring in Interactive Design and Game Development at SCAD. Therefore, I am well-qualified to work on game UI and UX. Mini Mogul was a preloaded game for a newbie tablet. I was in charge of the UI side of this project. In the game, kids can build their own town and street, accomplish small quests and, earn virtual currency to buy stuff. My objective was to provide users with an interesting and playable game environment and experience. It allows them to get into the game and characters smoothly. Encourage them to spend more time on this game.

Nabi Tablet Packages

Package Design

View More

Even though I won't call myself a packaging designer, but I do have to help out often with my Photoshop skill. Any time they need to have a high-quality package mockup for any marketing purpose, they know who to talk to. Here are a few good examples to show you what I mean "High Quality". Keep in mind, no 3D software was used for any design you see on this site.

Photoshop for Product

Graphic/Image Design

View More

Sometimes, photography itself just can't present the best of a product. That is why they need someone just like me, a Photoshop freak. I can use Photoshop on almost any design project and surprise you every single time, regardless if it’s a beautiful product image for package or for the online marketplace.




FEATURED WORKS

User Experience Projects

Book App UX Concept Development

ABCmouse.com Reading IQ App

View More

Reading IQ is a new ABCmouse book app released recently for both iOS and Android devices. It is designed to help kids ages 2-12, learn to read with thousands of digital books. I was leading the early development for the core UX design includes the onboarding process, content browsing experience, and personalizing features. This concept document was designed as a mobile (phone) first. The app was released in Nov 2018 soon became one of the most popular book apps on the Apple App Store and Google play store.

Download PDF

ABCmouse - Pet Park Re-Design Project

Game Experience

View More

The pet park was one of the existing core features on ABCmouse.com. Originally, it was designed for young users to have a virtual pet that they can feed or water the pet. Also, the team can promote some educational activities by showing them in the pet screen. However, after it was released, they discovered that after visiting the section, most users won't come back anymore. I was the creative and UI lead on this project who had to find out what causes the users to leave and how we can improve the user experience. The new pet park was released a few months ago and quickly the average time users spend and the rate of revisiting were both increases over 35%. I am glad it works great.

Download PDF Open Prorotype

ABCmouse Learning Path UX Concept

Story/Game Like Learning Experience

View More

Another existing key feature on ABCmouse.com that needed to be redesigned. The Learning Path is a section that provides a series of learning activities that young users need to do one by one. It has a similar problem as the pet park that young users got tired and bored quickly after trying a few times and hardly revisited the section. When we have this type of UX issue, I will always start with inspecting/defining the issue. In this case, there is no initial motivation that can drive young users to keep doing the learning activities (the ticket reward is not working). Therefore, I decided to build a game/story like user experience and combine it with a series of learning activities. I create the wireframes and prototype and put it to user testing with pre-k through 2nd grades children. The test result turned out very impressive. The users' engagement was improved hugely. All tested kids were attracted by the storyline and couldn't stop playing more activities. This project is now under the design and production process and should be able to be released soon.

Download PDF Watch Video

User Flowchart Developing

ABCmouse main content features

View More

Here are some of my previous user flowchart documents. User flowchart is not only important for mapping out the concept for a project, but also providing the designer a vision on how the users will go through the process to reach their goals. Moreover, the designers and developers can visually review the logical-flow of the concept, make sure it is technically accurate, and cover all scenarios and requirements. Please download the PDF files for the detail.

Download PDF

ABCmouse Homescreen Content CMS Development

User flowchart/Wireframes Document

View More

The main objective of this project was to provide the ABCmouse site master a clear and well-organized web-application so they can manage the ABCmouse home-screen content. The site master will have access to upload/remove banners, set up the specific display time, choose the particular group of users to display, also submit changes for QA review. I was in charge of mapping out all the main features with the user flowchart and mocking up the general wireframes with the detailed functionality description so we can go over and review the plan.

Download PDF

ABCmouse Back Button Behavior Rule Definition

Function Behavior Rule Document

View More

Back buttons are very common for many websites and applications. However, it is also a problem when the number of contents page and/or subcategories becomes bigger. It is always a question for UX designers that by clicking on the back button, the users should go back to their previous page they visited or the upper level from the current viewing page. Sometimes, the rules mixed and make its users even more confused. Therefore, I made this small document and defined the UX behavior rule on tapping/clicking the back button in ABCmouse application so our users and developers will have a consistent rule on the back button.

Download PDF




FEATURED WORKS

UX Training & Researching

User Journey Research Project

ABCmouse.com Child Users

View More

One of my early missions at Age of Learning company was helping them on a user journey research. Combined with the user testing/interviewing, BI data (business intelligence) and feedback from the customer support team, we gathered all user's behavior and experience including onboarding, core playing/learning experience, and post-experience. This was the first time at the Age of Learning that we can globally review the users' journey of using the product and look into where the user most get the frustration. This can help the team to determine the next step of innovating the product.

Download Original PDF

Competitor Book Apps Research

Teardown & Compare Research

View More

When we are developing a new project, that is important to research some of the major competitors' products. By looking at these similar featured apps, we could adopt some of the nice parts they have and avoid some mistakes they made. This document is actually the final report based on four individual teardown research on each book app. It provides a clear comparison of the key features and the best of four major experiences includes content variety, onboarding process, browsing experience, and the reading/playing experience. This can help the developing team setting up the appropriate direction for the new project.

Download Original PDF

Designer Training Presentation

User Testing Approach

View More

At the Age of Learning company, I work with other five junior-mid level UX designers. As a leader, I not only supervise their works but also help them by sharing my knowledge. Routinely, I will arrange team training meetings with presentations that are about new design principles or how to be a better designer. This example presentation was to train our UX designers on doing user tests with an appropriate approach from the beginning of the preparation for the test to analyzing the test data and writing the report after the test.

Download PDF

Competitor Software Teardown Research

Daily Reward System Teardown for Netmarble - Marvel Future Fight

View More

This is teardown research for Marvel Future Fight, a popular mobile game. The main purpose was to study its daily challenges and rewards systems and see how it could improve the users' engagement in revisiting the app and playing more. By looking into some other competitor's products, we could quickly adapt something they are doing good and avoid some mistakes they might have. This is one of the important steps before we really start developing a new concept for a project.

Download PDF

Instructional Presentation

UX designer training for Scrum Process

View More

This PDF document was created for an internal training session to help other UI/UX designers understanding how they should collaborate when joining a Scrum team and what their roles should be as a team player. One of the most important concepts I shared was the value between product owners, programmers, and UI/UX designers. On page 10, you will see how they might affect each other and the perfect solution/result will only when it satisfied by these 3 aspects.

Download PDF

User testing Review/report

ABCmouse children shopping experience redesign

View More

To validate the concept of new user experience, it is important to run the prototype test with the real target users. This is an example PDF document for reviewing the user testing and reporting the key learnings from the test. As a senior UX design Lead, I will conduct user test from beginning to the end includes defining the test goals, preparing the prototype and test-script, observing the test, writing my test review, and present the test result to the team.

Download PDF

Contact Me

You are more than welcome to contact me for any career opportunity, expertise requests, or even just want to share some crazy thoughts with me.

ponywang6393@gmail.com Email preferred, I regularly check my email several times per day to ensure people who contact me will be responded quickly.

Download my Resume