HUAN WANG

AniVIsion
THE WORLD THROUGH ANIMAL’S EYES
HUAN WANG
ID: 03647029
(415) 297-4462
[email protected]
ACADEMY OF ART UNIVERSITY
GRADUATE SCHOOL OF WEB DESIGN & NEW MEDIA
FINAL PROJECT THESIS BOOK
July 29, 2014 10:00AM
Table of Content
Biography
01
User Testing
64
Resume
03
Technology Used
70
Elevator Pitch
06
Technical Specifications
71
Abstract
07
Conclusion
74
Statenent of Interest
08
Portfolio
75
Unique Position Statement
10
Bibliography
89
Competitor Analysis
11
Competitor’s Matrix
14
Researchs
15
Content of Animal’s Vision
17
Inspiration
32
Moodboard
33
Branding
35
Progression of Animals’ Design
37
Progression of Logo Design
39
Progression of Scenes Design
40
Mock-Ups
43
Target Audience
54
Personas
55
Wireframes
61
Sitemap
63
Biography
While I was studying in college, I had a chance to intern at a company to practice what I had
learned. I worked there 4 months until I graduated. I was mainly responsible for the interface
design, interactive design and redesigned the company website. I got a lot of inspiration from my
work field and clients’ demand. After the work, I knew I should improve myself. I liked interactive
design and creative ideas, and I knew most of the famous developer companies were located in
California. Therefore, I decided to further my study and planned to get a master degree in U.S.
My name is Huan Wang. I was born and
raised up in Beijing, China. I graduated with a
bachelor degree in Beijing Institute of Graphic
Communication in 2011. I have background of
drawing, and I learned Multimedia Design in
my undergraduate school.
PAGE 01
I started to study in major New Media and Web design at Academy of Art in spring, 2012. I
chose this major because it is relating to interactive and creative design. In the future, I would
like to focus on the mobile application. I think it is very popular in this day and age, and the
technology will grow very fast. I want to learn many more new techniques and design methods.
Besides, I’m also interested in the user experience design.
I would say I spent a very full life at Academy of Art. As my study draws to a close, I have
pleasure in recollecting how much I have learned from here, and I am looking forward to using
these skill in my futher work.
Resume
Huan Wang
[email protected]
(415) 297- 4462
2110 26th Ave, San Francisco, CA 94501
http://www.wanghuan.org
Objective
To obtain a position that will enable me to use my creative skill with specialization in user experience
and interactive designing and to become familiar with the working environment of the company.
Work Experience
Innovative Management 360, Santa Clara
June 2014 - Present
- Application Interface design
- Design the concept video for company product
Wally, Beijing
June 2010 - September 2010
- Re-design Wally’s website and complete the web front-end coding.
- Design advertisement, navigation, logo, icon for the touchscreen of media platform.
PAGE 03
Education
2012 - 2014
Academy of Art University
MFA of Web Design & New Media
2007- 2011
Beijing Institute of Graphic Communication
BFA of Art Design
Awards
2007
The Third Prize of Hectometre Scroll Drawing Contest / Beijing
2008
The First Prize of Chunlei Calligraphy Contest / Beijing
Skills
Photoshop, Illustrator, After Effects, InDesign, Dreamweaver, Flash, Fireworks, HTML5, CSS,
JavaScript, JQuery & JQuery Mobile.
User-Experience Development including Field Research, SSNiFs, Card Sorting, Paper-Prototyping,
Wireframes, Formal Usability Testing, Front-End Web Development
ELEVATOR PITCH
AniVision is a creative visualization tool for children, designed for iPad.
By using this mobile application, children can experience some of the
many ways different animals see the world without having to read a lot
of professional books.
PAGE 06
Abstract
Due to the different parts forming the eye, many animals observe their environment differently than
we do. AniVision intends to use a simple, visual interface to show animals’ different perspectives in
the objective world.
This project is targeted at children aged 6-8 years and their parents. Animals’ vision is an uncommon
area, which is usually only published in zoology books, but those books are very technical professionaland difficult for children to understand. With this application, children can see various views of the
world just by switching animals. They will think of the mobile camera as the animals’ eyes and see
filtered effects through the screen. Since it is designed for tablet devices, AniVision can take advantage of mobility, unlike desktop applications, which are not portable. Additionally, this project has
photographic capabilities. Even though there are many camera applications, this one can provide the
unique experience of animal’ vision for its users. Anivision also features an educational game to help
kids remember what they’ve learned.
Statenent of Interest
I’ve loved animals since I was a child, and I always enjoyed watching TV shows about animals. Once
upon a time, I watched a Japanese film called “Hachiko.” This film represented a dog’s perspective of
the world. At that moment, I realized that different animals have different perspectives. This idea lingered in my mind for many years. When I was in primary school, I learned that frogs only eat living
things because they are totally unable to detect static things. My curiosity about animal vision became
even more acute; I wanted to know much more.
This project belongs and relates to science programs. Through my previous research, I know the documents relating to this topic are rare and difficult to find. The majority of these research documents are
primarily concerned with animal behavior and anatomy but rarely any relating to animals vision. Therefore, in the future, I wish to use an application as a basis to explore this topic and share this information with a wider audience. I think interaction is worth thinking about. It will be the key point to grab
the audience’s attention. This project would help me to further study interaction and user experience
and train my spirit of constant pursuit and exploration of technological skills.
This is the era of information technology with rapid development in computer technology. In order to
stay relevant, modern designers must combine creativity with technical skill. With AniVision, I wish to
demonstrate my creative thinking to potential employers by showing the combination of concept and
technology. I haven’t found any similar projects to this.
I wanted to create AniVision for children and their parents because animals’ perspectives have always
been really fascinating to me. I hope my users can learn from it while having fun .
PAGE 07
PAGE 08
Unique Position Statement
STRATEGIC PROCESS
For children who are interested in animals and want to use a simple way to
learn more knowledge of animals; the AniVision is an educational application
that will display and explain the unexpected knowledge about various animals
perspectives in the way of visualization.
PAGE 10
Competitor Analysis
Strengths
Strengths
InstaFisheye is simple to understand and operate because it has a clean interface
and just a few icons. It also provides a view in a 170-degree wide-angle; the
simulated fisheye lens effect is good.
InstaFisheye
Weaknesses
It only has three built-in fisheye lenses, which are inadequate for a photography
application. Even though it provides ten filter effects, they aren’t typically attractive.
Opportunities
Animal Eyes
Weaknesses
As an educational application, Animal Eyes only provides animals’ photos.
It doesn’t include any knowledge about animals’ eyes. Moreover, it doesn’t
provide attractive interaction.
InstaFisheye has two versions, free and premium version. User allows downloading a
free version that only provides 3 fisheye effects. In the free vision, there is a random
pop-up advertising in the home page. When user wants to try different effects of
fisheyes, this app will provide an alert to let user pay. Premium version sells $2.99
that supports 14 different fisheye effects.
Opportunities
Threats
Threats
Target customers of InstaFisheye are people who want various creative lens effects.
As a photography application, InstaFisheye only provides fisheye effects. It has some
competitors such as Camera360 and MegaPhoto, which not only provide fisheye
effects but also include plenty of other camera effects. Customers will have more
choice. It easy to transfer from InstaFisheye to other applications.
PAGE 11
The content of Animal Eyes - LAZ Reader has some basis in science. It provides
some pictures to match images that arouse users’ interests. It provides simple
texts to explain the content, which makes the knowledge easier to understand.
Animal Eyes - LAZ Reader is still plenty of room for improvement. In the area
of animal’s vision, there are few competitors because this is uncommon area.
There are always kids finding their interests from animals. The topic is timeless
in a childs world.
Target customers of Animal Eyes - LAZ Reader are younger children. It needs
to redesign the whole application in order to suit kids(which includes User
Experience design and User Interface design). It also needs to consider how to
attract users and to make users reuse it. Otherwise, any application which provides the knowledge of animal’s vision and has a good UI and UX can beat it.
Competitor’s Matrix
Strengths
Animal Eyes is an educational application, which displays a slideshow of beautifully
unique eyes from a variety of animals by leading photographers. All of the photos can be
used as Wallpaper. It provides hundreds of stunning images to keep users entertained.
Animal Eyes
Weaknesses
It only has three built-in fisheye lenses, which are inadequate for a photography application. Even though it provides ten filter effects, they aren’t typically attractive.
Opportunities
Pictures in Animal Eyes can be extended easily. Along with the photos unceasing renewal, users may use it repeatedly. As an educational application, it would probably develop
some new feature such as introducing animals’ eyes.
Threats
It has a lot of rivals. There are many application not only provides photos about animals’
eyes but also includes whole body will beat it. In addition, this application is not free. It
sells $2.99. As an educational application without any knowledge teaching, those users
who is seeking educational applications may not purchase it.
PAGE 13
PAGE 14
Researchs
Other Researchs:
http://edudemic.com/2012/08/best-infographics/
http://www.statisticbrain.com/
http://www.nielsen.com/us/en/newswire/2012/u-s-kids-continue-tolook-forward-to-iholiday.html
http://www.companionanimalpsychology.com/2013/02/are-youngchildren-more-interested-in.html
PAGE 15
Content of Dog’s Vision
Human’s Vision
Dog’s Vision
How dogs and human see color
Human eyes contain three kinds of color-detecting
cells called cones, and by comparing the way these
cones are each stimulated by incoming light, our
brains distinguish red wavelengths from greenand
blue wavelengths from yellow.
Kingdom: Animalia
Class: Mammalia
PAGE 17
The colors they see are much more dull than those
we sense. Dogs’ eyes, like those of most other
mammals, contain just two kinds of cones. These
enable their brains to distinguish blue from yellow,
but not red from green.
Resources:
Alexandra Horowitz. Inside of a Dog: What Dogs See, Smell, and Know Paperback. Scribner, 2010.
http://www.livescience.com/34029-dog-color-vision.html
http://www.huffingtonpost.com/2013/07/22/dogs-see-color-study-canines-perception_n_3618089.html
Content of Horse’s Vision
Human’s Vision
Horse’s Vision
How horses and human see color
People can see four basic unique colors: red, green, blue, and
yellow, as well as a range of intermediate hues. Horses with
their dichromatic vision have inherited red-green color vision
defects. They don’t have four basic colors; they have only
two hues, the ones most similar to blue and yellow.
Kingdom: Animalia
Class: Mammalia
PAGE 19
Horses’ eyes point sideways instead of straight ahead like
humans. Horse’s range of vision supports 270 degrees. This
gives them amazing peripheral vision that allows them to see
almost all the way behind them. But it does mean they have
a blind spot right in front of their noses.
Resources:
Michael F.Land & Dan-Eric Nilsson. Animal Eyes. Croydon: CPI Group (UK) Ltd, 2012.
http://www.horsewyse.com.au/howhorsessee.html
http://horsetalk.co.nz/2012/11/21/vision-horses-more-than-meets-the-eye/#axzz2gqOuycXK
Content of Fish’s Vision
A diagrammatic representadon of a Teleost Eye
Kingdom: Animalia
Class: Osteichthyes
PAGE 21
For a fish, vision of objects above
the water is highly limited, but
vision of underwater objects is a
different story. In most fishes, the
maximum field of view is achieved
by placement of the lens so that
it bulges through the opening of
the pupil and nearly touches the
cornea. The lens can thus gather
light practically from an entire
hemisphere.
Human’s Vision
Fish’s Vision
Fish has a convex eye-spot, which gathers more light than a flat or concave one. Unlike
humans, fish normally adjust focus by moving the lens closer to or further from the retina.
The refractive index of a transparent substance is a measure of the relative speed of light in
that medium. When light travels from one medium to another, such as passing from air into
water, it slows down and changes direction. Everyone knows that objects in the water, when
viewed from above the water, are not the same size or in the same place as they appear.
Resources:
Michael F.Land & Dan-Eric Nilsson. Animal Eyes. Croydon: CPI Group (UK) Ltd, 2012.
https://www.ebiomedia.com/how-do-animals-see-underwater.html
http://www.advancedaquarist.com/2007/1/aafeature2
Content of Dragonfly’s Vision
Models of the compound eye
Human’s Vision
Dragonfly’s Vision
Dragonflies have the most
with up to
30,000
lenses
All dragonfly species have excellent vision. Each compound
eye is comprised of several thousand elements known as
facets or ommatidia. These ommatidia contain light sensitive
opsin proteins, thereby functioning as the visual sensing
element in the compound eye.
Kingdom: Animalia
Class: Insecta
PAGE 23
Unlike humans, day-flying dragonfly species have four or five
different opsins, allowing them to see colors that are beyond
human visual capabilities. Together, these thousands of
ommatidia produce a mosaic of “pictures”.
Resources:
Michael F.Land & Dan-Eric Nilsson. Animal Eyes. Croydon: CPI Group (UK) Ltd, 2012.
http://www.horsewyse.com.au/howhorsessee.html
http://horsetalk.co.nz/2012/11/21/vision-horses-more-than-meets-the-eye/#axzz2gqOuycXK
Content of Eagle’s Vision
Human’s Vision
Eagle’s Vision
The human retina has three kinds of cone cells: red, green and blue. By contrast, birds active
during the day have four kinds, including one that’s specifically sensitive to UV wavelengths.
There’s another difference: In birds, each cone cell contains a tiny drop of colored oil that
human cells lack. The result is that birds not only see UV light, they are much better than
humans at detecting differences between two similar colors.
Kingdom: Animalia
Class: Aves
PAGE 25
Eagle has binocular vision. Its eyes point forward and are close together. Each eye sees a
slightly different view of the same object, which creates a slightly overlapping image in the
brain. The brain interprets the overlap as depth.
Resources:
http://www.livescience.com/18658-humans-eagle-vision.html
https://www.ebiomedia.com/what-animal-has-the-sharpest-eyesight.html
http://www.journalofvision.org/content/9/11/14.full
Content of Snake’s Vision
Human’s Vision
Snake’s Vision
Daytime and night-time vision
Snakes do not see colors, but their eyes are equipped with a combination of light receptors:
rods that provide low-light but fuzzy vision, and cones that produce clear images.They have
both a daytime and night time set of eyes.The daytime eyes primarily sense movement,
sometimes completely missing motionless prey. A snake’s nighttime eyes, which are actually
pit organs near the nose, can detect more of the infrared heat spectrum. This enables them
to “see” prey by their heat signature.
Kingdom: Animalia
Class: Reptilia
PAGE 27
Resources:
Alexandra Horowitz. Inside of a Dog: What Dogs See, Smell, and Know Paperback. Scribner, 2010.
http://www.livescience.com/34029-dog-color-vision.html
http://www.huffingtonpost.com/2013/07/22/dogs-see-color-study-canines-perception_n_3618089.html
Content of Frog’s Vision
Human’s Vision
Most frogs have large protruding eyes, giving them almost 360’ vision. This
is needed as they don’t have very flexible necks. They can see in color and
can have good vision for movement, even if far away.
Frog’s Vision
Frogs do not seem to see or are not concerned with the detail of stationary parts of the world around them. They will starve to death surrounded
by food if it is not moving. Their choice of food is determined only by size
and movement. Frogs will leap to capture any object the size of an insect or
worm, providing it moves like one.
Kingdom: Animalia
Class: Amphibia
Resources:
http://www.thefrog.org/biology/vision/vision.htm
http://www.neurocomputing.org/FrogEye.aspx
William C. Corning & Martin Balaban. The Mind: Biological Approaches to its Functions. 1968, pp 233-258.
PAGE 29
Inspiration
VISUAL PROCESS
PAGE 01
PAGE 32
Moodboard
PAGE 33
Branding
Mindmap
Font: KB Planet Earth
PAGE 35
PAGE 36
Progression of Animals’ Design
Sketch
PAGE 37
Version 1
Modification
Final Version
Progression of Logo Design
Progression of Scenes Design
Farm
PAGE 39
Forest
PAGE 40
Progression of Scenes Design
Valley
PAGE 41
Zoo
Horse’s game
Dog’s game
Mock-Ups
PAGE 43
Mock-Ups
PAGE 45
Mock-Ups
PAGE 47
Mock-Ups
PAGE 49
Mock-Ups
PAGE 51
Target Audience
Primary
Children (ages 6-7) who are interest in animals.
USER EXPERIENCE PROCESS
PAGE 01
Secondary
Parents who want to help their child to explore their child’s interests.
PAGE 54
Personas
Brendon
Age: 6
Gender: Male
Background:
• A primary school student
in grade one
• Can read simple articles
• Has plenty of curiosity
“It looks interesting! Iwant to try!”
PAGE 55
Purposes:
• Wants to know how animals see
the world through their eyes
• Desires to try out new thing.
• Mom’s encouragement
Challenges and pain points:
• It’s hard to imagine horses’
vision by text
Tasks:
• Checks dog’s vision from mobile phone
Story:
Brendon is a primary school student in grade one. One day he
is reading ascientific book about dog’s habitat in the school.
The book mentions that dog is almost color-blind. Brendon
wants to know why the dog only cannot see the yellow and
blue color and what exactly dog’s vision looks like. So, he
opens the app AniVision.
Personas
Caroline
Age: 10
Gender: Female
Background:
• A primary school student
• Interested in animals
• Likes playing Games
“I love animals and want to learn
more about that, but I cannot
concentrate my mind on books.”
PAGE 57
Purposes:
• Find a challenging game
Challenges and pain points:
• Didn’t find an interesting animal game
Tasks
• Sees animals’ vision by real-time viewing
and plays the game
Story:
Caroline is a 8-years-old girl who is a primary
school student in grade 3. Sheenjoys animals
and has a strong passion for playing iPhone
Games. Carolineis playing a game about animal
farm at home on a weekend. After a while,she
feels the game is very flat, and she wants to find
some newchallenginganimal games. Therefore,
she downloads AniVision from App Store.
Personas
Shelley
Age: 36
Gender: Female
Background:
• Mirried
• Teaching Assistant (TA) of
an introductory course
• Has a 8-years-old child
“I’d love my daughter to use an
application which has animal themes
so that she can learn animal science.”
PAGE 59
Purposes:
• Finds such application that helps her daughter learn
zoology in a fun and interactive way
Tasks
• Show her daughter dog’s vision by real-time viewing
Story:
Shelley is 36-year-old mother living in San Diego
who has an eight-year-old daughter. Her daughter
doesn’t like read book, she is really worried about
that because she hopes her girl could learn more.
Shelley has a dog. Oneday she sees her daughter
playing with that dog, and she considers finding an
animal educational application to let her daughter
learn some knowledgethat the area she interests.
So she finds the app AniVision and shows herdaughter
the comparison of human’s vision and dog’s vision.
Wireframes
PAGE 61
Sitemap
User Testing Process Phase 1
Test if kids are capable of using tablets
FINDINGS:
• Children from 6-8 respond to sounds and images way more better than the text.
• They are capable of using tablets, but they needs instruction. Due to the target ground are
younger, so that they should avoid too complicated operations.
WHAT DID I MODIFY?
• I added the instuction page after the start page to teach kids how to use this application.
• I tried to increase the voiceover so that children can understand each step.
PAGE 63
PAGE 64
User Testing Process Phase 2
Test if children can identify animals
FINDINGS:
• I showed kids the animals’ wheel in the main page.
Childeren can recognize animals.
• A mom said she wanted to see bigger animal before
she using this wheel navigation.
WHAT DID I MODIFY?
• I added the animals’ feature in the start page, thus
childern can see the animals in detail before they start
using this application.
PAGE 65
PAGE 66
User Testing Process Phase 3
Test if children can identify animals in game
FINDINGS:
• Children cannot memorize all of the animals included in this application.
•
Some older kids can identify the animals without detail, but some younger child were confused
about the animals that only have outline.
WHAT DID I MODIFY?
• I added the details to each animal. So that children can understand that is unfilled animal and
they know what is it.
PAGE 67
PAGE 68
Technology Used
Coding Used
TECHNICAL PROCESS
•
•
•
•
HTML5
CSS3
JavaScript
jQuery
Software Used
•
•
•
•
PAGE 01
Coda 2
Adobe Photoshop CS6
Adobe After Effects CS6
Adobe Illustrator CS6
PAGE 70
Technical Specifications
Interaction Model
• iPad application
App Category
• Educational
PAGE 71
Conclusion
Next Step:
CONCLUSION
•
•
•
•
•
•
•
Create more animal’s game to make the prototype more completed
Find a partnership to continue the realization of this app
Find a developer and build a functional native prototype
Developing more animal’s vision
Keep testing with kids ages six to eight
Find a digital publishing company to sell the concept
Publish this application
PAGE 74
Portfolio
Hawaii Responsive Web Design
Web Standard
WNM608 Web Tech 1
2014 Spring Wilde, Ethan
http://www.wanghuan.org/final/index.php
PORTFOLIO
PAGE 76
Portfolio
PAGE 77
Typography Website Redesign
Adobe Illustrator
WNM 605 Typography for Digital Masters
2012 Summer Richards, Denise
Portfolio
PAGE 79
“Dream”
Adobe Photshop
WNM619 Advanced Digital Imaging
2012 Fall Brunsfeld, Michael
Portfolio
Cubist Distort
Adobe Photoshop
WNM619 Advanced Digital Imaging
2012 Fall Brunsfeld, Michael
Magazine Cover
Adobe Photoshop
WNM619 Advanced Digital Imaging
2012 Fall Brunsfeld, Michael
PAGE 81
Portfolio
Logo Animation
Adobe After Effects
WNM 613: MS: Topics in Motion Graphics
2012 Fall Rice, Tim
https://vimeo.com/62981628
PAGE 83
Logo Animation
Adobe After Effects
WNM 613: MS: Topics in Motion Graphics
2012 Fall Rice, Tim
https://vimeo.com/62981628
Portfolio
LensCrafters Mobile App Design
Web Standard
WNM 617: MS: Mobile Technology
2013 Fall Kanter, David
http://wanghuan.org/wnm617/final617/index.html
PAGE 85
Chili House Mobile App Design
Web Standard
WNM 617: MS: Mobile Technology
2013 Fall Kanter, David
http://wanghuan.org/wnm617/ChiliHouse/index.html
Portfolio
Animation “Hippo’s Dream”
Adobe Flash
WNM 642: MS: Time Based Media
2012 Fall Ritchie, Michael
http://www.myhuanwang.com/hippo.swf
PAGE 87
Bibliography
“Differential Intrinsic Response Dynamics Determine Synaptic Signal Processing in Frog Vestibular Neurons”
http://www.jneurosci.org/content/27/16/4283.short
“How animals see the world”
http://amazing-creature.blogspot.com/2012/04/how-animals-see-world-infographic.html#.UZWD2TAQ1Ld
“10 Animals With Incredible Eyes”
http://listverse.com/2010/12/12/10-animals-with-incredible-eyes/
“Can Dogs See in Color?”
http://www.discountpetmedicines.com/dog-health-blindness-color-dog.htm
“How Do they See? Views Through the Eyes of 7 Animals”
http://webecoist.momtastic.com/2009/01/14/animal-vision-color-detection-and-color-blindness/
“The Best Way to Learn and Memorize”
http://www.wikihow.com/Memorize
“Age range of children who interested in animals”
http://www.aspca.org/pet-care/kids-and-pets/the-right-pet-for-your-childs-age.aspx
“ Inside of a Dog: What Dogs See, Smell, and Know Paperback”
Alexandra Horowitz. Scribner, 2010.
“How Snakes Work”
http://science.howstuffworks.com/zoology/reptiles-amphibians/snake1.htm
“Do Dogs See In Color? New Study Shows Canines Do Depend On Color Perception”
http://www.huffingtonpost.com/2013/07/22/dogs-see-color-study-canines-perception_n_3618089.html
“Vision in horses: More than meets the eye”
http://horsetalk.co.nz/2012/11/21/vision-horses-more-than-meets-the-eye/#axzz2gqOuycXK
“Animal Eyes (Oxford Animal Biology)”
Author: Michael F. Land , Dan-Eric Nilsson
ISBN-10: 0199581142 | ISBN-13: 978-0199581146
“How do animals see underwater?”
https://www.ebiomedia.com/how-do-animals-see-underwater.html
“Frog and Toad Eyes”
http://www.neurocomputing.org/FrogEye.aspx
“Feature Article: Fish Eyes”
http://www.advancedaquarist.com/2007/1/aafeature2
The Mind: Biological Approaches to its Functions.
William C. Corning & Martin Balaban. 1968, pp 233-258.
“ How Animals See the World: Comparative Behavior”
Olga F. Lazareva, Toru Shimizu, and Edward A. Wasserman.,
Biology, and Evolution of Vision. Oxford Scholarship: 2012
“What is binocular vision for? A birds’ eye view”
http://www.journalofvision.org/content/9/11/14.full
PAGE 89
“What If Humans Had Eagle Vision?”
http://www.livescience.com/18658-humans-eagle-vision.html
Thank You