PENCIL’S SECRET – HOBBY FOR FUN

What is Pencil’s Secret?

Pencil’s Secret is a pencil stop motion animation I created. I got the inspiration from Hudson and Troop’s music video Against The Grain, whose director arranged pencils in different patterns, and let them change and dance to the music rhythm. When I watched the video, I just earned my first digital camera, so I decided to use my camera to make a fun stuff like that. But I also wanted to incorporate my storytelling skill into my animation. Thus, I set up a plot about how these color pencils get their colors. Now, let’s watch Pencil’s Secret and have fun!

 

GRAPHIC DESIGN

OAKSPOUT

The following image includes some of my work when I worked for OAKSPROUT company as a graphic designer. These illustrations are for a CSR book that they are going to publish. My job was understanding concepts they sent me and visualizing the concepts by designing layouts, selecting colors, images and typefaces, and creating logos and figures.

 

Click to See Details

Infographic Course

The following graphics are created for infographic courses.

 

 

 

 

BARTON ASSOCIATES – HTML/CSS

What Does Barton Associates Do?

Barton Associates is a website that help locum tenens (one filling an office for a time or temporarily taking the place of another —used especially of a doctor or clergyman) find a position, and also help hospitals and other institutions recruit locum tenentes.

Target User

Not only Locum tenens physician, dentists, physician assistant, nurse practitioner, but also some hospitals and health institutions.

Design Process and My Role

  • Brand Discovery, Site Map, Visual Design, Code
  • It’s a final project of re-design a website for Interactive Design Course.  It’s a team project. I did the Brand Discovery research, and visual design of Blog page and My Account page with my team, and used HTML/CSS to code Blog page and My Account page by myself.

Brand Discovery

 

Click picture to see the entire brand discovery

Site Map

 

Click to see the whole site map

Visual Design

Homepage

 

 

Job Filter

 

 

Resources

 

 

Blog

 

 

My Account

 

HAVE A LOOK AT THE WEBSITE

Click “Blog” in the navigation and “My Account” on the right top of the head to check the pages I coded.

 

WEATHER ON ROAD- CAR PANEL APP DESIGN

What Does Weather On Road App do?

Weather On Road is a car panel weather app. With it the driver can know the weather of their trip in real time. It offers information about current weather in drivers’ current location, 12 hour weather forecast of any city, and a map view that can display current conditions within 50 miles. Moreover, it can alert the driver of potentially hazardous conditions to keep them driving safely.

Target User

Vehicle drivers.

My Role

It is the personal project for Usability & Human Interaction Course. I designed it all by myself.

The Story Behind

today’s automobile includes increasing levels of digital technology, including in-dashboard touch screens that can support a variety of applications.  In order to combine this technology into a way that can reduce car accidents caused by dangerous road conditions and other weather events, I decided to design a real-time weather app that can keep drivers driving safely.

Goal

  • The current weather (based on the car’s current location).
  • The 12-hour forecast for the current location and up to five other locations entered and saved by the user.
  • A map view that can display current conditions within a 50 or 100 mile radius of the car’s current location.
  • The ability to display weather alerts that can alert the driver of potentially hazardous conditions such as icy roads, flash flooding, or other weather events within the area.

Design Prototype

 

The Current Weather Screen

 

 

The 12-h Forecast Screen

 

 

The Weather Map Screen

 

 

The Alert Screen

 

I decided to make it tap screen rather than scroll screen because when users are driving, scrolling is more distracting than tapping and it can cause more false operation.

 

Sunny

 

Cloudy

 

 

 

 

 

 

 

 

 

Rainy

 

 

Snowy

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

I use different images with the weather feature as background, so that drivers can intuitively know the weather by background color and brightness. Also there is a radio like button on the right of the bottom. Users can hear the weather report by tapping it. I set up this button because I think watching the screen is more distracting while users are driving than listening.

Typography and Color

 

 

 

 

GOOD2GO – APP DESIGN

What Does Good2Go do?

Good2Go is a food delivery app which offers all kinds of delicious and healthy homemade food for college students. It saves students’ time from cooking and gives them multiple choices rather than high-calorie fast food served in campus cafeterias. With this app, students can read detailed information about food ingredients, pre-order their food, track them after they are delivered, and also give feed back and share photos about the food they have tried.

Target User

College students who do not have much time to cook but want to eat healthy.

Design Process and My Role
  • Research, Persona, Scenario, Wireframe, User Flow, Prototype
  • Originally it’s a team project for mobile design course, but I re-design it by myself. Research, Persona, and Scenario are team work, while User Flow Sketch, Wireframe and Prototype are my individual work.

 

The Research and The Story Behind

Today’s college students want more lifestyle choices available to them to enhance traditional on-campus life, a diverse and healthier diet is one of them.  They are not satisfied with foods from school cafeterias, most of which are greasy, high-calorie and not tasty, and also they do not have too much time for cooking because they have tight schedules. Thus, we attempt to provide a mobile app which offer all kinds of homemade delicious healthy food. Students can pre-order, track and review their food with only a few steps of tapping.

Persona and Scenario

 

Tracy Miller

Northeastern University student
Fourth year at the college
Comes from a multiracial family with Chinese,Thai, and American descent
Lives on campus now
Does not have meal plan in college
Likes using social app to share her life with others.

 

Tracy usually cooks by herself. But since now she is in her fourth year the college and on a very tight schedule, and besides there is no kitchen in her dorm, she eats out a lot.Today Tracy has a math class from 11:45 am to 1:15 pm, after that there is a recruit meeting waiting for her from 2:00pm to 5:00pm, which means she only have 45 minutes to have lunch.

However, she gets bored with unhealthy food that offered around the school, and really misses Thai food that her Mom usually cooked for her at home.Thus she downloads the APP, opens it as a guest. Pin the location where she will pick up her delivery in the map, and then menu comes up which shows categories of food. She opts for Thai food. The Thai food menu pops up with the image. She taps images into the detail page to check the foods’ ingredients, calories, rating and reviews, and then adds Tom Yum Kung and Red Curry Crab to the cart. When she checks out, the page shows that she has to sign up. So she signs up for account and chooses the delivery time to be 1:20pm and then pay the bills through the app.

After Tracy tries the Tom Yum Kung and Red Curry Crab, she thought the Tom Yum Kung is tasty but the Red Curry Crab is not as good as she expected. She wants to share her experience to others who might order them. She opens the Good2Go app, and sees a notification that says she can go to Account History Order page to write a review about what she ordered. The History Order page shows what she ordered with two action buttons Write a Review and “Camera” button, she taps a Write a Review button to rate the food and give her opinions and then taps the Camera to upload the food picture she takes.

Wireframe and User Flow

Icon and Color

 

Prototype

Click to see a high quality graph

Try the Prototype

DREAM STAGE – WEBSITE DESIGN

What Does Dream Stage Do?

Dream Stage is a responsive website designed for people in Massachusetts who dream to be actors, actresses, directors, screenwriters or others related to the film and theater industry, especially for those beginners who cannot afford fancy education in drama schools or universities and feel hard to take their first step into the field. It establishes a social network for film and theater creatives in Massachusetts, offers a platform that collects all kind of film and theater information, and encourages beginners to join, start, as well as pitch their projects by having a separated project page.

Target User

People, especially beginners, in Massachusetts who pursue dream in the film and theater industry.

Design Process and My Role
  •  Research, Persona, Scenario, User Flow Sketch, Wireframe, User Testing, Prototype.
  • It’s a personal thesis project. I am in charge of the whole design process.

 

HAVE A LOOK AT DREAM STAGE FIRST

 

The Research and Story Behind

The research results above reveals that the film and theater industry is all about network. beginners need to find their introducer in the field. It might easy for some people who can afford education in drama schools or universities. However, for those who cannot afford this, they have to go through tons of websites to look for classes, events, or jobs that suit them, and work their heart out to have someone who would like to lead them into this field.

Aside from  introducer, beginners also need projects as their stepping-stones. Many creatives are lucky to have school class projects with their classmates’ help. But still some of them do not have chance like this, they have to look for projects that they can join or get new ideas, find partners, and create their own projects. No matter in what way, it is going to be a very long and hard time before they finish their very first projects, since there is not a platform only for advertising this kind of nonprofit projects.

Therefore, in order to make it easier for beginners in Massachusetts to enter the film and theater industry, I decided to design a responsive website which collects all the film and theater information about jobs, classes, events and other problem solutions in this state, build a network for people here in this field and help them get their own projects done.

Goals

  • Establish a social network for film and theater creatives in Massachusetts, especially for beginners who feel hard to enter this fields.
  • Offer a platform for beginners to join projects or start their own projects.
  • Collect all the information in Massachusetts like jobs, classes, events and others about film and theater for beginners, and also offer a place for them to discuss their problems and work.

Persona, Scenario, and User Flow

Taylor Owens

Age: 25
University: Bunker Hill community college
Education: Bachelor’s degree in Accounting
Occupation: Waitress; $3k/month
Location: Boston, MA

 

Scenario
After Taylor graduate from college, she does not know what to do for a while, because no jobs can attract her eyes. But recently, she finds her interest in acting while playing a role for her church event. She does not have any friends in the film industry or theater, and feels hard to enter this field,and she cannot afford to study in drama school, so she wants to have acting classes that she can afford in Boston, know more people in this field and finally starts acting somewhere.

User Flow Sketch

  • Get to know creatives in the film and theater industry.
  • Find all kinds of acting classes that she can afford in Boston.
  • Start auditioning and find a movie or theater to act.


Antonio Francesco

Age: 32
University: Holyoke Community College
Education: Certificates in Sports Management
Occupation: Fitness Trainer; $3.6K/month
Location: Boston, MA

 

Scenario

Antonio is a fitness trainer. He builds good relationships with his customers before and after training classes by telling them interesting stories that he makes up. All of his customers recommend him to try writing them down. Thus, he decides to learn screenwriting in a class and to write a script. Recently he finds hard in writing an important part. He can ask his instructor and classmate for help in class on next Wednesday, which means he has to wait for three days to get the answer. He wants to find a way to get help as soon as possible and get answers from as many people as possible, and he also wants to know where he can pitch his script after finishing it.

User Flow Sketch

  • Look for a place where creatives can discuss their problems and get answers as soon as possible.
  • Look for a platform where people can pitch his script.
Pitch Event


Derek Avila
Age: 30
University: Northeastern University
Education: Master’s Degree in Computer Science
Occupation: Database Programmer; $8K/month
Location: Boston, MA

 

Scenario

Derek has a movie dream since he was a child, but his parents do not support him, so that he decides to make his dream come true on his own. Recently he has saved enough money for shooting a movie and had three friends would like to do this with him, but he does not have a story. He wants to find a group of people in Boston who would like to come up a movie script and shoot a movie together. He also wants some advice to remind him of what he should notice before or during shooting.

User Flow Sketch

  • Find enough members to start a team project.
Start a Project
  • Get advice and information about what they should notice when they shoot a movie in Boston.

Wireframe

HAVE A LOOK AT THE WIREFRAME

User Test Based on Wireframe

  • Need to make ‘Find People’ button more stand out on Network page.
  • Add comment, like and share button under every discussion topic.
  • Make comment hierarchy more clear to read.

Visual Design

Logo

  • I name the website “Dream Stage” because I hope it can help dreamers make their stage dream come true.
  • The logo is composed of a pair of wings and a piece of film. The film stands for the film and theater industry, and the wings stand for flying dreams.

 

Typography

Colors

HAVE A LOOK AT DREAM STAGE AGAIN