Best UX Portfolio by Bingrui Zong!

Page 1

BACKGROUND Public speaking

Concequences

Trends

The lack of “Express-ability” would do harm not only to themselves, but also the collective they belong to.

Emerging online speaking training

To Company Competition

#Public Speaking #Practice App

Work Report

Productivity would drop Money & Evergy would be wasted

#Product

Type: UI/UX Time:2020.7-2020.9 Introduction: Talko is a portable speech game designed as a solution to public speaking problems of individuals.

64%

Company Culture would be harmed

School Assignment

Self-Intro

Interview

There are too many circumstances that we need to talk in front of people. However, the fear of public speaking, which a large amount of people may have experienced, will more or less affect our work or study. I want to find solutions to help people build their confidence.

24%

Online

Combined

12% Offline

Source: 2020 Report by EDU INSIGHT

To Individual

Hot Topics on speech apps

Misunderstanding among tasks

Reborn

Miss Opportunities in promotions Mistrust between colleagues

Art

Femenism Internet

Experience

Living

Source: 2018 Speech Platform Research

Reasons

Crowds

What makes a presentasion fail ?

The basic information of people who find courses to train their express-ability.

PROBLEMS

Lacking Rehersal

People don’t have easy access to learn.

Unfamiliar Place

The demand for speech training is increasing, but the quality of teacher and teaching varies.

Lacking Interaction

Why people lack “Express-ability” ?

Phone & Internet

Education Style

Illness & Handicap

Age

Gender

Identity

Intention

20-30

Male

Clerk

Career

30-40

Female

Student

Relations

Negative impact on individuals and businesses caused by failed communication.

Many Organizations are seeking ways to improve.

Current online speaking training pattern is limited, while still more people choose to train their eloquence online.

Source: 2019 Chinese Eloquence Couching Industry Research


RESEARCH

PERSONA

Quesqtionnaires

Interviews

To further explore the pain points in public speaking, I conduct an online survey in a forum among 87 samples.

Due to the Covid, I was unable do face-to-face interviews , so I did ask them online by Wechat.

Debra

Q: What are your problems when speak in public?

Public Speaking Survey

24 Employee NANJING “New to workplace, I’m eager to show my ability. But I’m always nervous.”

20 Student

General information 18-25 0-18

Conservative

28% Students

Silent

12% Science

Where

60%

Competition

49% 39%

School Assignment

9% Arts

to prepare for a speech ?

Work Report

71%

Recite All

28 Course Consultant

34%

Read Draft

34%

Q: To what extend does it affect you and your life?

53%

Recite Outline

26%

Impromptu

I would lose clients if not persuasive. It’s how they felt about my word that decide my performance!

60%

are afraid of public speaking

Crowded place Fear to offence Talk to superiors

23 Start up Entrepreneur

What

It’s not until I enter society that I realize it decides how far I can reach in relationships and earnings.

do they do to relieve?

they were afraid to speak ? Unfamiliar place

Andrew

58% 46% 45% 42%

Deep Breath

Bad at show himself

Goals Leave good impression

PREPARING

Confirm theme and concept

PRACTICE

Work on drafts & slides

ACTION Look for tips, videos online

Make progress

Structure

Details

Recite

Needs

PRESENTATION

Repeat content. Rehearsal.

Wait for the turn

Check timing.

55%

Try to Ignore

38%

Confide to others

35%

Summary

thought their speaking ability need enhancement

What Personal Analysis

67%

Finish speech

Review

Revise the content

Work report advise

MOOD

PAIN POINT

Be logical.

No professional feedback.

Be persuasive.

Monotone Memorize

Pre-speech Anxiety

Filler words

Time control Unclear meaning

Not satisfied with last performance

Forget words

Illogical Low efficient practice.

“Preparing for speech competition, it’s hard to make progress...bored with reciting to mirror.”

Silent Beginner

Ambitious Talkative

PROBLEM SCENARIO

Goals Give infectious speech Be confident & courageous

Needs Interesting practice

Experienced

Body & Facial advice

Douch

“Soon it’s my turn to do the presentation, I’m nervous.”

Frastrations

31 Manager HANGZHOU

Accent

“I am invited abroad to a sharing session, it’s my first time speech in English”

Too busy to have lesson

It wasn’t turn out to be as good as her practiced.

“What should I do to be so exellent as him?”

Andrew is practicing a speech with a mirror.

“I really wanna help, but I have something else to do now. ”

“Uh, I really should overcome....”

Goals Good pronounciation

70%

Do the speech

66%

More Practice

75%

are their expectations on help of technology?

END

Stress relief

Frastrations

20 Student SHANGHAI

Conservative

When

Experienced

CONCEIVING

Frastrations

It's too awkward when my hands can’t stop trembling during the work report... Not any logic too.

How

they need to speak ?

Job Interview

34% Management

Ambitious Talkative

Beginner

25 Emloyee 26-35

STAGE

Unfamiliarity of work reports

Even if I want to be hilarious, I just can’t release myself in front of too many people. 18% Service

JOURNEY OF A SPEECH

47%

45%

Game Community Reference Practice to discuss on drafts

Fear of speaking is common-seen among people.

Attention to better speaking ability raised as aged.

Conservative Silent Beginner

Ambitious Talkative Experienced

Make progress in short time

Needs Efficient training Useful feedback

“Could you please listen my speech and give some advice?”

“Any better? Nope! And I’ve practiced thousand times!”

Where can I get suggestions...


MARKETING ANALYSIS

MINDMAP

Competitive Product Analysis

Case Study

Content

Functions

Function

Usefulness

Multi-scene Lively Simulation

Environment

Learn from lectures VR P uvlic Speaking Trainer

Overrun & Fast Pace

Thought inspiration

K Talk

See Good Examples

Visual

Failed Speech

Practicing speech

Content Life-like audiences, training tools and reliable feedback.

Facial expression test

Orai

Practice by Take Video

Key Features Various venues and speaking tools.

Functions

Share playback in VR or video.

Daily lessons

Easy to analyze users’ data.

Warm-up tips

Speeko

Suitable for Organizations

Interest

Easy for beginner

Practice in efficient and convenient way

Proficient Interesting

Illogical & Unpersuasive

Lack Comprehension

Adequate Preparation Content Feedback

Interactive Game

Efficent Eloquent

Unable to Examplify

Perfect Speech

Interaction

Body Language

Conclusion

Unconfident

Ovation have powerful functions, but it cost too high for individuals who don’t have VR equippments. Meanwhile, all these speaking apps have limited functions. There isn’t a balanced solution between them.

Pre-speech Anxiety

Lack Communication

Guesture Feedback

Handy Daily Enhancement

Warm-up

User Debate

Community

Confident

Interactive

Topics Skills

IDEAS

INSIGHTS

Instruction of expressions

Pace & Time

Disorder word

Content

Functions

Unfamiliar

Feedback of professional

Diverse Pattern suit individual needs

Stress-release for upcoming speech

Game-mode practice with screen mirroring surpport

Small device to track and evaluate body language

Gameplay and free topic communication between users

Warm-ups to relieve stress of upcoming speech


STRUCTURE

USER FLOW

WIREFRAME

DESIGN ELEMENTS Logo Design

Install App

Welcome Page

First log in

Y Register Page

2.1 Warm-up

1.0 Home

N

Welcome

Register

Home

Color Choosing

1.0 Home Page

2.0 Practice

2.2 Quick Mode

2.3 Screen Mode

2.21 Feedback

2.32 Choosing

2.33 Game

2.34 Feedback

Practice Speaking

Communicate with other users

Report of personal progress

2.0 Practice Page

3.0 Community Page

4.0 Profile Page

Not Connected

Practice Speech

Release Stress

2.21 Connection

3.1 Post Message

3.2 Category

4.1 Favourites

See favourited posts

Set connection or other

R=0 G=174 B=187 See past feedbacks

Posts Detail Page

Favourites Page

Setting Page

Community

#FFC500

Profile

R=255 G=202 B=0

History Page

#FF7A26 R=255 G=122 B=38

Quick Mode

3.3 Posts Detail Page

Screen Mode

Font Choosing

Game Mode Loading

Record Speaking

Device Connected Y

N Game Home Page

STEP 1:

4.2 Setting

4.3 History

Post a Mesasage Page

Quick or Screen

Feedback Page

4.0 Profile

See more topics

#00A9B6

Practice

Warm-up Game Page

3.0 Community

Share Ideas

The color of interface should be pleasing to relieve speaking pressure, so I choose ocean blue and warm ginger yellow as contrast.

Connection Setting

Warmups

Quick Mode

Posts Detail Connection

Choose Scene Upload Notes

Post a message

Title

SubTitle

Text

Aa Bb Cc

Aa Bb Cc

Aa Bb Cc

Helvetica Bold

Montserrat SemiBold

Game Page

STEP 2:

Do the Speech

Game Home Feedback

Finish game

Y

N

Enough points to next level?

Level up Page

Unlock more scenes

Game

Feedback Page

Try Again or Other Scenes

Quit Game

Game Home Page Feedback

Icon Design

Avenir Book


INTERFACE DESIGN Quick Mode

Profile

Record a short speaking and get instant feedback using fragment time.

Choose Practicing Scene

Log in to Home

Warmups Soothing guiding voice let off your steam every time before a speech.

TV Game-Mode Connect to Talk-Glove and Television Follow Uploaded Notes Follow Gestures Using Talk-Glove

Community Share game experiences by uploading game vedio or discuss any topic.

Receiving Professional Feedback


TALK-GLOVE

USER SCENAIRO

The gesture tracking device was carried out as a single glove. By tracking hand movements, users can get feedback on body language performance during the speech game. In game mode, user's score depends not only on whether they can perfectly keep up with the reference gestures, but also on whether the body language is relaxed and appropriate.

Warm up Debra is going to do work report. She use Talko warm-up to relieve pressure.

4 Sensing Points

Game Mode 1. Connect Talk-Glove and TV to phone with BlueTooth

2. Stand phone at the TV Bench. Swipe to select scenes.

Choose one warm-up, follow the voice instruction to calm breathing, practice speaking pace, etc.

Through observation and research, people’s speaking gestures are mainly expressed through these three fingers.

Quick Mode

One point at the logo on the back of the hand is used to track the position of the hand.

Douch just finished a conference, but he still have work to do. He wants to use this break to practice speaking.

3. Play the game.

4. Finish game and get feedback.

Use quick mode to record an impromptu speech, and get feedback instantly.

There are three points on fingers. By analyzing the relative position of the four sensing points together, the hand movement can be captured.

Gestures

Underline

Introduce

Point out

TALKO PROSPECTS Real Engament

Enriching Gameplay

Under covid-19, Talko game can make real audiences engaged in, holding activities like online lectures. For individual users, audiences can be invited to listen and comment on their practice.

In the future upgrade, more games like multiplayer versus mode can be added, and the method of Talk-Glove can be further explored to increase interest.


BentoCat Type: UI/UX/Product/Service

BACKGROUND

Observation

for cat owners by simplify the whole cooking procedure.

Raw Meat is best for cats

Unsupervised Retailing I’ve been always interested

Fake ingredients

in pet issues since I raise 3 cats myself. Previously, I was shocked by a news that a cat died by a domestic brand cat food. So I started online research about cat diet.

Unspoiled nutrition

Bad raw materials

Sufficient water

Diseases linked to cat food

Time:2020.3-2020.6 Introduction: BentoCat includes a cat food cooker and cat food delivery service, aiming at the

Cat Food

Urinary Syndrome

Cat-Raising Trends

Too Dry

Nowadays, cats are becoming popular home-raised pets for their cuteness, clean habbits. Here are the statistics from cat owners.

Low Protein

Remove allergies High Carb

Diabetes

Digest

Stick on Teeth

Dental Problems

More girls

Younger consumers Wheat

Dairy

More food safety concern More customized choices Less scientific feeding

Beef

Dynamic Prevent diseases Shining fur

Vomit

Allergies More cat as pet

Wild cats eat mice or birds alive. Feeding home-raised cat with raw meat is the imitation of nature.

Hyperthyroidism

Lamb

Seafood

Common used in cat food

Unhealthy cat snacks Addictives

Picky at food

Salts & Sugars

Kidney burden

PROBLEMS Few of cats in families are scientifically raised. Cat owner lacks correct guidance about cat health. Buiscuit cat food just facilitate human, not really concerning cat health. Meat meal should be promoted and made easier. Cat owners have a heart for better feeding method, but the food or service they currently buying is not best for cats.


RESEARCH

USER JOURNEY

Interviews

Questionnaires

I asked some of my friends who have cats and posted questions on forums.

I designed 15 questions about cat feeding, posting it on cat forums. Then I received 248 feedbacks from cat owners from various cities in China, including my friends.

Q: Have there been any problems in feeding cats? Age 18-25 25-35

Crowds?

Making?

One cat

By recording a whole process of making cat meal, I realized the most frastrated part is in the previous preparation.

MY HOMEMADE CAT MEAL EXPERIENCE Home

PLACE

2.How to Prepare?

1.Homemade?

Calculating

ACTIVITY “Vomit occasionally... I feel that my different cats have different appetites. Some are really picky eaters.”

Unfreeze

Slice

Feelings?

65%

“...worrying the nutrition be when I make cat meal, whether raw or cooked.”

Q: Have you ever been confused in buying cat food?

Willing to improve cat diet

5.Have problems in?

Always Often

Blend

Less

3.How to Cook?

18%

9%

98%

71%

Boil

Raw

Freeze

Subpackage

57%

Unbalance Nutrition Complex Making

Smart Control

Parasite Danger

4.How to Store?

73%

72%

Purchase Ingredients

63%

Customized Cooked Meat Recipe

Doing maths

Slicing and weighing. Subpackaging into each meal.

Cooking with steam and waiting it cool. Adding nutrients

Wasting time

Nutrients amount

Fresh & Fair

WENDY

CLYDER

“I’m afraid of being misguided, letting my cat fall victim. But all those feeding suggestions online just varies...”

24 Freelance Nanjing Feeding Exp.

Single cat families are dominant.

stop people from making cat meal.

Cooking

Storing

Feeding

Cleaning

Puting the rest meals into fridge.

PERSONA

Automatic Cooker

“Since I started to study the quality of cat food, I don’t trust it anymore.”

Distinction between different cats

Preparing

KITCHEN

MOOD

Key Points “My cat was in poor health due to bad-quality cat food... After I realized and started making cat meal by myself, she became healthy again.”

Selecting

Dinnig v

Add Nutri

Steam

6.Expect?

Kitchen

Figuring out the nutrients of need.

PAIN SPOT “Concerning the parasites, I wouldn’t feed my cat raw meat even if it is beneficial.”

Supermarket

Cooked Meat being more acceptable

Free Time Paitience

Goal Find scientific feeding way Save her energy

Need Customized recipe Delivery of raw material

Design Requirement

“Sometimes I’m even too busy to cook for myself. I can’t always accompany my kitty ...just want her happy and healthy.”

28 Designer Hangzhou Feeding Exp. Free Time Paitience

Goal Assure his cat’s health Cook cat meal fast & easily

Need Smart control Automatic making

Establish scientific feeding suggestion.

Simplify making progress.

Operation-easy devices to make cat meal.


MARKETING ANALYSIS

Pet & Recipe Apps Analysis

Products Analysis

Like baby meal, cat meal materials need to be carefully selected and smashed. So we can still study baby food machine because of the similarity in processing.

Intellegent BABYCARE model 4520 “Cooking and mixing integrated!”

Baby Food Machine Brand Share

TRENDS

Function

SUPOR

model FP05

Pet Recipe

“High-end automatics save your energy!” Function

PETKIT

“Homemade pet snacks tutorials!”

Smart food calculation & Automatic devices

“Manage your pet’s smart devices!”

Function

Function

Unfreezing

Unfreezing

Upload & View recipe

Record pet health

Blending

Blending

Make shopping list

Advise feeding

Steaming

Steaming

Cons

Timing Size: 230x215mm

Appearance

Volume

Volume

Unreliable advice

Only snacks

Appearance

Function

Meats can be purchased by instant delivery.

Cons

Size: 140x305mm

Disinfecting

Appearance

Function

Convenient

Content

Appearance

Function

Content

Function

Customized Caring different breeds and ages, even peronality and likes.

Convenience

Intelligence

Convenience

Intelligence

Personalize

User Viscosity

3rd

1st

2nd

5nd

Service

Quality

Service

Price

Price

Function

Function

Appearance

Function

Service

Electrolux sous-vide cooker

User Viscosity

Multi-Functioned

Case Study 4rd

Personalize

Combine the actions of preparing & cooking

Petcy App

Restore the natrual taste of meat.

Healthy pet diet recipes.

Remote-control the cooking.

Buy ingredients by delivery. Save energy of preparing. Precise amount reduces food waste.

Healthy & Reliable Make sure the content and food culculation is scientific.


SKETCHES

WIREFRAME

STRUCTURE 1.0 Feeding

Mood Board

1.1 Cat Edit 1.2

2.0 Recipe

2.1 My Bento State 2.11 New Bento

2.12 Food List Confirm

2.2 Snacks Bento

2.3 Shopping Cart

Pay

3.1 My Wallet

3.0 Profile

3.2 My Adresses 3.3 Customer Service

BENTO BOX

(Delivery Package)

USER FLOW 1

2

information

See Subscription

Click“Plus” or “Edit” Icon

Cat Edit Page

Food Bentos Click“Bag” Icon

My Bento Page

1.0 Feeding page

Choose cat, amount

Browse Snacks

Checkout Cart

Shopping Cart Page

Order New Bento

New Bento Page Cat Bento

Click “Delivery State”

Add to cart

N Connect

Put Bento into Cooker

STEP 1:

Choose delivery period and time

Adress & Payment Correct?

STEP 2:

Cooker apply different procedure to each cat Now STEP 3:

Y

Payment & Adress Setting Page Back

Y

Click“Connect”

“Checkout”

Food List Confirm Page

N

Cooker Paired?

Snacks Bento Page

Click “Save” Icon 1.0 Cooking page

Make Cat Meal

2.0 Recipe Page

1.0 Feeding page

Add or Edit Cat

3

Order Bentos

Click “Start”

Later

Set time

See Deliver State Here

BENTO COOKER

STEP 5:

#FFD800

Font Choosing Aa Bb Cc

Title

Sound & Text notification when done

Aa Bb Cc

SubTitle

Bowl Pop Out

Aa Bb Cc

Text

Wait Cooker to Make Meal

Order Delivering

Received Order

R=87 G=163 B=217 1

Bento

R=255 G=216 B=0

Select adress and pay bill

My Bento Page

Cat Illustrations

Click “Scedule”

Add or Make Correction

STEP 4:

Logo & Color

#5792C8

Choose Cat in the Page

Cook now or Later?

DESIGN ELEMENTS

Poppins Semibold

Open sans SemiBold

Helvetica Neue

British

Orange

Kitten

Maine

Sphynx

Li Hua

Siamese


BENTO BOX

Inspired from Asian traditional lunchbox, the bento box is designed as the package of meat delivery. Also It can be recycled and cleaned every next delivery time.

INTERFACE

Different cat head stickers from user’s cat image to tell different cats’ bento.

Rubber band to bind the box

Subscribing bento diet

How’s your cat like?

BENTO COOKER

Ordering Bentos

Self-processing cooker which can be remote-controled by matching to the BentoCat app.

Cook now or later Water tank for steaming

The drawer functions as a bowl, popping out when meal done. Cat can eat by itself.

Adding Snacks to Cart


STORTY BOARD Wendy just bought BentoCat Cooker.

Looks nice! Let’s learn how it works.

Download the app... Well, I should enter your info first.

Chubby grey hairball,

Now let’s order your bentos, nono.

These boxes are recyclable. You can return them at next delivery time.

That’s great!

The subscription is so convenient!

...you're really a beef lover.

RECEIVE COOKER

CAT ENTRY

SUBSCRIBE

RECEIVE BENTOS

Wendy is hurring to work. Now all I should do is schedule nono’s meal time! Thanks to the notifucations.

Just put the bento into cooker... It will keep meat fresh.

Almost forget to prepare your lunch!

NOTIFICATION

PUT IN BENTO

SCHEDULING

HAVE MEAL


ARTEEN

BACKGROUND My Experience

Bad Influences

When I was majoring in oil painting at college, I found that all of us students was so unfamiliar with art at the start, even if we are all art students in junior high school. So I assume a serious problem in the art education in China.

Type: UI/UX Time:2020.3-2020.6 Introduction: Arteen is an app which was designed for teenagers to cultivate the appreciation of art and beauty.

RESEARCH In order to study the current situation of art education of teenagers, I conducted a survey on 137 art and non-art students aged from 12 to 22 in Nanjing. Results are as follows:

ART STUDENTS High Mid

University

Blind Consumtion Be misguided when they can’t judge. Exhausted for lawn of shopping

Plasic Surgery Following trend.Mental Problems caused by excessive plastic.

92.7%

Show interest in art

Art Education Under Exams

Exhibition

Seen as Shortcut To Colleges

Filled with Fixed Criteria

Hobbies main visit reason.

Robot Explain highly accepted.

Lacking Info main problem.

Visiting Museum becoming a trend. —— Cheetah Mobile: China Museum Visit 2019

Realism Lacking Creativity

Visit Frequency?

PROBLEMS

*per year

Problems?

Interest Point?

Be Occupied Boring

Crowded

Friend

Phone Usage?

like art lessons

Often Seldom

*per year

Problems?

Problems?

Interest Point?

Be Occupied Boring

Less Info Crowded

Artwork Art

Expectations?

61.1%

Frequently

1-2 3-4 ≧5

Tutorial

Incomprehension

60.2%

Visit Frequency?

Often Seldom

feel unimpressed about any exhibition

Mixed information online

Phone Usage? Frequently

Less Info

Internet

Course

1-2

Problems?

Our Society Lacks Aesthetic

Source Of Art Knowledge?

Friend

like art lessons 3-4 ≧5

55.7%

Show interest in art

Exhibition

93.7%

High

Senior high

Internet Course

Mid No

Junior high

Source Of Art Knowledge?

About Art Museum A pre-test studio in Hangzhou

University No

Junior high

Senior high

Phenomenon

NON-ART STUDENTS

Tutorial

Artwork Story Art History

Incomprehension

94.7%

feel unimpressed about any exhibition

Expectations?

Non-nutritive information in Internet .

occupy the time of teens, which is negative to their values.

Recommend

Tutorial

Art History AR Explore

Recommend

Tutorial

Art History AR Explore

——Teens imitating a kind of spoof.

Exhibition introduction is less and not vivid, though visiting museums is becoming Textbooks without design

Packaging too garish

popular, teens cannot understand it well.

Limited teaching methods of Chinese art Wall Painting improper color

Uniforms bury personality

courses block teens from contacting real art even if they are interested.

Conclusion ART STUDENTS

NON-ART STUDENTS

BOTH STUDENTS

Shown Problem:

Shown Problem:

Common Place

limitation of school teaching

Expect:

less attraction of exhibitions

Expect:

Show interest in art. Use phones often Knowing art largely from Internet.


INTERVIEW Art Student

PERSONA

A student of my previous art teacher. Art Student

CLARE

Ambitious

18

Nanjing

Art student

Interest

Personality Introvert

Outgoing

Impatient

Patient

Passive

Creative

A friend of mine-—Zhu. Artist/Art Student

Goal

Learn Creative Methods

Useful

Get Inspired

Referable

Pain Spot Can’t learn what she wants from school

Need

Tutorial Resources

Diligent

“It is too unconvenient for young artists to find some information about the creative methods of art.”

Non-art Student

A high school girl who is not good at basic painting skill. But she loves fine art,especially contemporary art...

Motivation

Familiarity

“My paintings are usually expressionist, but school is teaching everyone draw the same ... We can't lose our original inspiration!”

21

ENOKI

(Offline)

Interest

A middle school girl who likes bright colors. Once studying painting in childhood, she feel impressed with some artworks...

Familiarity

Motivation

15

Nanjing

Non-art student

Enhace Appreciative Ability

Personality Introvert

Q: What do you think art can bring to your life?

Outgoing

Impatient

Patient

Passive

Creative

Learn Easy Creative Methods

Pain Spot

Worldwide art works, mainly paintings, artists. Detailed Introduction.

Provide Information of selected art works, artists and museums.

App Features

App Features

Cannot Understand Artworks Have No Enough Time

Two ways to explore: Huge illustration map of the museum covering all the collections. Time machine filtering works according to time, place and type.

User Experience

User Experience

Practical for art majors, but hard for beginners and enthusiasts to find interesting content.

Readable text is suitable for daily accumulation. But the lengthy text might be considered boring,let alone the same page User Viscosity layout .

User Viscosity 80

Google Arts & Cluture Multiple ways to explore: Art Camera (AR) Experience culture in

80

60

Appearance

60

40

Interest

20

40

Appearance

Interest

20 0

Artwork Story Tutorial

MetKids (web)

Recommend one work daily. Mainly in text form. Article for intensive reading.

Recommend random works. Rich in content. Categorized perfectly.

Need

Education

Function

Education

Museum in virtual reality tours Famous sites street view.

Function

INSIGHTS JACOB

Interest

Two undergraduates.

Familiarity

Motivation

21

Personality

“I once attended fff-campus painting classes, it really can calm me down. But I don’t have time to go there often.”

App Content

0

A key university student majoring mathematics. He grows interested in culture and history recently...

Shy

App Content

Interesting Lucid

DailyArt

WikiArt

Goal

A girl in bookstore. 15 Outgoing “Knowing art makes me appreciate beauty better than others and more sensitive to color matching!”

Case Study

Competitive Product Analysis

(Online)

Q: Do you have any problems with your current art learning? 17

MARKETING ANALYSIS

21

Nanjing

Non-art student

Introvert Impatient Passive

Outgoing Patient Creative

Goal

Gain Knowledge Of Art History

Helpful

Relieve Acedemic Pressure.

Easy

Pain Spot Knowing Little About Art.

Need

Recommend

Understand the value of artworks at ease.

Recommend art works according to personal interest.

Provide useful tutorial of creative methods.

Interesting way to introduce the artworks.

Easy and vivid way to explore art history.


MINDMAP

CONCEPT PERSONALIZE

Various Genre Realism Technique Playful

With random works displayed, user can choose to make personal preference setting like color, mood or included object.

Practical

Tutorial

Genre

STRUCTURE

Assessment

USER FLOW

1.0 Home Random Displays

Browse Welcome Page

2.1Personalize

2.0 Discover

Want More Interesting

Artworks

2.21 Artwork

2.01Artwork 2.02 Artist

Motif

Browse Randomly

Install The App

2.22 Artist

Discover

Click Go Personal

Search Interest Point

No

Recommend

Visual Likes

3.0 Create

User Needs

Included Object

Login Page

4.1 Record

Comprehension

Characteristic Atmosphere

Artwork

Try Sth. New Less-known works

3.3 Assessment

Art History

Interpretation

4.311 Art Movement 4.3 Special

4.31 History Line

4.322 AR

4.32 Location

4.321 Exhibition

In artwork pages, artist will introduce his or her work in person, with the courses of this style and its location in history.

Recommendation can be set according to personalized options or some interesting character quizzes.

In stead of common-seen biography, the introduction of artworks or artists can be presented as artist self-narration.

RateTutorial or Not?

Assessment Page

Favorites

Artwork Page / Tutorial Page

Profile

Rate and Comment Page

Exhibition Page

AR Program

Select One Point

Art Movement Page

Locating Museums Special History Line

WIREFRAME

Slide

Welcome

Login

Home

Discover

Personalize

Quiz

Option

Discover (Filtered)

Artwork

Artist

Favorite

Records

Make associations with relative museums to provide AR program that makes exhibitons vivid and understandable.

Link artworks with tutorials, making it easy for user to learn styles they like.

Assessment Page

ART STORY Stories in artwork pages are based on artwork.

AR PROGRAM allows viewers to see information of local exhibition in vivid 2d animation.

Art Movement

Create

Tutorial

Assessing

Assessment

Rating

See Related Materpiece

No

Yes Review

Overall Timeline Visualization

VIEW ARTWORKS

AI Assess

Record

Artist Information

Ideas

Learn How to Paint This

Search Upload Finished Work

Decide What To Do

Art Movements

Tutorial Page

Create

4.2 Favorites

With the preference, there will be filtered artworks that may meet the users’ interest.

Artist Page

Choose Genre

Yes

Home Page

RECOMMEND

Associated

Comment Favourite

Learn

Exhibiton

Personal Options

Yes

Search

Login for First Time?

3.2 Tutorial

AR Program

4.0 Profile

Color

3.1 Search

Artwork Page

Like The Selections?

No

Want More Accurate

Artists

Characteristic Quizzes

Locating

Exhibition

Exhibit

AR Program

History Line

Homepage


DESIGN ELEMENTS Logo Design

Login to Homepage

Icon Design

Color Choosing

Discover Separated lists of artwork and artist

Illustration

Art is Colorful, Free and Vivid. Teenagers are Vigorous. So I choose an Expressionism painting as color reference.

#4630d9 R=70 G=48 B=217

The illustrations are based on well-known works of art.

Go Personal

#32997c R=50 G=153 B=124

#bfd0ff R=191 G=208 B=225

Quiz or Option ?

#f24c27 R=242 G=76 B=39

The Dance II

Henri Matisse

#f2a341

1932

R=242 G=163 B=65

Font Choosing Title

Avenir Black

Aa Bb Cc Dd Ee Ff Subtitle

Futura Medium

Text

Avenir Roman

Aa Bb Cc Dd Ee Ff

Aa Bb Cc Dd Ee Ff

Welcome Page


Art Movement

View Artworks

Tutorials

Artwork introduction is carried out as interesting story in first person.

Home

Tutorials are catagorized in Create

Locating

Exhibition

Exhibit

AR Program

History Line

AR Exhibition

AR+History

Choose column Click to find related tutorial

Locate the museum and enjoy the exhibition in 2D animated interpretation

Click to exolore directly or view certain exhibits

Show more

View Artists

Learn and Assess

History Line Gain knowlege with fun. Each element of the illustration interprets an ecellent artwork of the era

Find in Discover or click the portrait in artwork page to see artist.

Click to see detailed introduction Click to assess work

Click to see corresponding artwork


EVALUATION Feasibility Test User 1

Aaron

19

Task Place

Do personalized setting and browse artwork

STORY BOARD Amy wants to find inspiration of art. What a romantic but depressed story!

Adding these tags...

Non-Art Student

Maybe his experience transformed into inspiration.

Cafe

Or...I’m curious as cat? She opens Arteen to find some pictures.

Amy wants to accurately find favorite artworks.

After browsing, Amy clicks into one artwork.

She clicks into artist page for further information of the artist.

Lucy wants to have glimpse over art history. Hm...Expressionism? That’s Cool!

Sliding

User 2 Task Place

Lavigne

21

How could Expressionists be that gifted!

Art Student

Use AR program to interact with artworks Nanjing Museum

Lucy loves cultrue and history. She found “History Line” in Special.

She click into each part to see the art movement.

Reading and interacting with artwork illustration.

She clicks into each trigger point to see these artworks.

Mike wants to learn drawing. Let’s see...Sure to be masterpiece!

He opens Arteen, soon finding a style of artwork that he prefers.

Improvement

When done, he uploads his finished work.

Mike gets his assessment of work, feeling proud.

Andy wants to learn more about one exhibition. Locating Andy near museum.

Clear than ever!

Ok, This one is close. Displays

“There might be more types of interaction like sketching games to add fun.” “Outstanding works of contemporary young artists can also be included to promote the art industry.”

Seeing tutorial videos and following step by step.

Better than I thought!

Sunday, Andy is about to see one exhibition.

Andy views the list of displays in the museum.

AR content gives Andy more extended information than tag.

Andy is so satisfied with the exhibition and AR.


BACKGROUND

RESEARCH

INSPIRATION

DATA ARCHAEOLOGY

PHENOMENON Global E-waste Surging: Up 21% in 5 Years

Horizon:Zero Dawn Release: 2017.2

Asia

Leading Role: Aloy the Future Warrior

Genre: Role-Playing Game Developer: Guerrilla Games Publisher: Sony Entertainment

#Future Civilization #Tracing the Past

Data from: Global E-waste Monitoring 2020

America

Europe

13.1

12

Mt

Mt

Small IT Devices

Laptop, Cell phone, USB, Hard Drives

Mt

Africa

Mt

+Since22014%

Oceania 0.7

Viewing Holographic Records

Checking

2020.10-2020.12

We are going through an era of information explosion. I made this installation to discuss the way our virtual relics today being mined after thousand years. through the roleplay of future people, audiences may use the robot arms to dig the ancient data and try to regroup them.

Video Link: https://youtu.be/EG43GukFupY

Missing Data: “Dark Age” of NASA ? ?

Mt

The Internet is stored in data centers where discarding hard drives is common.

Data

These scenes make me wonder how people in the future will view our current electronic devices and the data inside.

27.5” * 27.5” * 23.6” Plaster, Building Block, Metal, Motor, Arduino

Mt

24.9

2.9

INTERACTIVE ART INSTALLATION

4.7

FURTHER DISCOVERY Unintentional Waste Data Side effects or by-products of process.

“Delete” Process

Data Waste in Systems Delete

Empty

Used Data Served its purposes and is no longer useful.

?

Degraded Data Deteriorated to a point where it is no longer useful. Source: "Lost on Earth: Wealth of Data Found in Space" The New York Times.

For over a decade, NASA’s magnetic tapes from the 1976 Viking Mars landing were unprocessed. When later analyzed, the data was unreadable as it was in an unknown format.

Unwanted Data Never useful to computer user in the first place.

Covered partly by new file

Still exist but unable to find

FINDINGS We didn’t actually remove files from devices. Increasing e-waste means

the growth of data waste.


MINDMAP

REFERENCE

SKETCHES

Out-of-Order Hexadecimal Binary

“Data Block”

Untitled-drawing

Write & Delete

1. Orderly arrange building blocks to simulate disk sequence.

IT Emission

Number Systems

Man-Machine

2. Data is random and may be anything, so I choose my project substance as the content to represent every possibilities.

Artist: Daniel Canogar Time: 2014 Genre: Ready-made, Media Art

DATA

DEVICE

Storage Medium

Small Data

DATA RECOVERY

Exploring memory and identity, and the life and death of consumer electronics, and how a small part of ourselves is disposed when we throw away our technological devices.

To hexadecimal code

44617 46120 72656 36f76 657279 3. Put the number onto “disk block”, simulating our daily data writing-in.

Plaster

Sequence “Scrolling Data”

ARCHEOLOGY Building Blocks

A nixie tube screen looping the original number as hint. It is just a emotionless

Read Recovery

Fragment

Mining

“Keyboard”

Artist: Daniel Arsham

Robot Arm

Digital Dark Age Excavator

I chose 3 from words related to data analysis.

Time: 2019 Genre: Sculpture, Performance Through the plaster, he creating the ambiguous areas between space and context, and proposed the concept of the present as a relic of the future.

display, dosen’t matter whether it really helps.

READ

Fictional Archeology

Critical thingking

LOAD

HOW IT WORKS

SCAN

INTERACTION Press the button

As storing techenology evolve, It’ll be harder to access old data in outdated media. The storing medium as substance will exist for a long time, and the physical change of them will also change the data it carries.

Hammer fall

Plaster cracked

Artist: Tatsuo Miyajima

I want to visualize this process and want people to know that, the data once being precious to us will be deconstructed and become meaningless in the flow of time.

Time: 2008 Genre: Installation

HOTO

In Buddahism, HOTO -"treasure pagoda" refers to a gigantic tower half as big as the earth, and signifies a person’s life.

The abnormal light and fictitious date will bring visitors into a place between future and reality.

The audience’s curiosity will prompt them to use the robotic arm to excavates the digital ruins.

Viewers can pick up and restore the data fragements. But they will never get readable information.


Material Testing PLASTER

BUILDING BLOCKS A.

A. Plaster for Archeology Toy

B. Plaster for Ceramic Molding

Fragility

Fragility

Color

Color

Big Blocks

B.

Working Process 1.

DATA BLOCK

Small Blocks

Selected

Selected

HAMMERS AND STANDS Mechanical Diagram

Making digital number Weight Choosing

2. ROBOTIC

ARMS

Making small parts of whole

3.

Pouring together

TEXT SCROLLING & BUTTONS

#include "Arduino.h" #include <TM1638.h>

Material Choosing

unsigned char DIO=2; //for ATMEGA8/168P/328P unsigned char CLK=3; unsigned char STB=4; TM1638 module(2,3,4); long interval=100; String textScroll="4461746120727461207265636F76657279"; String bckp; unsigned long previousMillis = 0; unsigned char num[8]; void IO_init() { pinMode(DIO,OUTPUT); pinMode(STB,OUTPUT); pinMode(CLK,OUTPUT); } void TM1638_Write(unsigned char DATA) { unsigned char i; pinMode(DIO,OUTPUT); for(i=0;i<8;i++) { digitalWrite(CLK, LOW); if(DATA&0X01) digitalWrite(DIO,HIGH); else digitalWrite(DIO, LOW); DATA>>=1; digitalWrite(CLK,HIGH); // delay(1); } }

void Write_COM(unsigned char cmd) { digitalWrite(STB,LOW); TM1638_Write(cmd); digitalWrite(STB,HIGH); } void setup() { bckp = textScroll; Write_COM(0x88); }

++

M

+

M

+

M

void loop() { module.setDisplayToString(textScroll); unsigned long currentMillis = millis(); if (currentMillis - previousMillis >= interval) { previousMillis = currentMillis; if(textScroll.length()>0){ textScroll.remove(0, 1); if(textScroll.length()<9){ textScroll.remove(0, -1); } } else { textScroll = bckp; }} }

-


OUTCOME AUDIENCE BEHAVIOR Details LOAD, READ or SCAN to access the data.

Press and hold to send instructions to start the robotic arms.

Linkage

Scrolling Data

Pick up the block, smash

44617 46120 72656 36f76 657279 = DATA RECOVERY

to get the data.

Record of Interaction

Video Link (1:54 min): https://youtu.be/EG43GukFupY

Audiences may assemble the pieces according to own ideas.

Information didn't alter in substance, but they no

longer have the chance to regroup correctly.

00:34

00:36

00:49

00:59

00:60

01:23

01:39


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.