OMFG IS IT OVER YET -...

TREE WORLDProject 2 - Shannon BairdProject Brief - Elements III

May 15, 2016

Problem Statement

With the increase of CO2 into the environment, people do not realize how easy it is to reduce their carbon Footprint and keep the earth healthy and sustainable for generations to come.


Problem Statement

With the increase of CO2 into the environment, people do not realize how easy it is to reduce their carbon footprint and keep the earth healthy and sustainable for generations to come.


1

Create an interactive tablet application that will engage and educate the user to be environmental friendly and Implement CO2 reduction behaviors into different aspects of their lives.

Solution Statement


2

Tree world is an interactive application that lets the user enterlifestyle choices and see visual results based off of their life. The user goes through a series of questions based on their carbon impact on the earth. Through their habits the user creates a tree that represents their carbon footprint. The tree’svisuals change as you progress through the questions resulting in it either being healthy or non healthy in the end. User receives feedback at the end of the process that will help them to be aware of their environment and their lifestyle choices.

Application Concept


3

Trend Research


Graphic heavy layoutsCurrent trends display

Environmental information

in a graphic heavy display.

The use of graphs and

Illustrations depicting

nature is commonly seen

in posters and infographics

1

2 2

6

Persona


ERIN DUFFY - Mother - Age 30

Erin is a 30 - year old stay at home

Mom with a 5 year old girl. Living in

the suburbs, she is always on the

move taking her girl to different

children programs or running errands.

She is a health nut and want to raise

her child in a clean environment

INTERESTS

- the earth

- her family

- saving time

- health

GOALS

- learn how to reduce her impact

- save the earth for her girl

- live a healthier lifestyle

7

User Story

Erin has spent the day running around doing errands. She gets home anis curious how much carbon her daily activities can create. She pulls up Footprint and selects travel on her story pannel. The app takes herthrough different habits her lifestyle has in relation to her day out of thehouse. As she goes through the app she can not believe how much carbon she can create just by not using cruise control.

Once she finished her story the application gives her a summary of heractivities and lists some suggestions on how to reduce her harmfulBehaviors.


8

Persona


TOM BAILEY - Designer - Age 23

Tom is a 23 - year old who just

graduated from college. He recently

just moved to New York for a graphic

design job. He enjoys video games

and reading on his tablet.

INTERESTS

- tech

- design

- friends

- xbox

GOALS

- find new entertainment

- learn about his lifestyle

- find shareable information

9

User Story

Tom is spending the night at home playing video games with his friends.Eariler that night he decided cook a nice dinner for his friends. After spending a few hours on the Xbox one of his radical design friends reconmended he check out Footprint, a environmental awareness pap.

Intrigued he downloaded the app and started it. He saw the option for at home. Selecting the home story the app took him through differentevents he could have done that night. He and his friends were surprised and stunned to see how much carbon is produced just by playing video games for a few hours. Tom liked the app and was excited about usingit again in relation to other parts of his life.


10

Core Features


Select Different Stories: User selects a story to go through.

Time Line of events: Interaction is broken up into three main actions.

Graph: After a selection is made information is displayed based on use choice.

Results: Sum up user’s choices and their affect on the environment.

Share Results: Lets users share results through social media.

11

Content Flow


Splash Screen

Select World

Enter Lifestyle

Results

Home

Travel

Work

Question 1

Question 2

Question 3

Question 4

Question 5

Question 6

Share On Facebook Share On Twitter

Tree World Application logoUser waits forapplication to open

Home, Travel, WorkFlat illustrationsof di�erent worlds

Swipe between worlds

Text questions in the centerof the screen. Informationchanges as you select things

Land with tree incenter, graphs on the side. Optionbar on the left

Touch options

Ref ID: Module Title: Text: Graphics: Interactions:

1

2

3

4

Splash Screen

Select World

Enter Lifestyle

Results

Result paragraph about how your impact on the earth is

Close up onthe tree that you made

Select share onfacebook or shareon twitter to shareyour tree.

1

2

3

4

12

Select Different Stories: User selects a story to go through.

Time Line of events: Interaction is broken up into three main actions.

Graph: After a selection is made information is displayed based on use choice.

Results: Sum up user’s choices and their affect on the environment.

Share Results: Lets users share results through social media.

Preliminary Work


PRELIMINARY

13

Preliminary Sketches


HomeSketch shows original concept for homepage and the look the tree graphic would have.

14



Tree ViewShows the layout of the tree creator. Original lose concept for input information. Was thinking of using banners since the original look was going to be pop up.

15



World ViewConcept before the app was simplified was to have a world view where the user can see everyone’s trees and impact on the environment.

16

Preliminary Styleboard


Paper Cutout

Paper cut out style with heavy texture to show space. This visual uses greens and pastel colors to show light hearted visuals. Paper is used to create 3D forms and give depth to application.

KEY WORDS

- texture

- 3D

- playful

2

17

Preliminary Visual


Paper Cutout

Original idea was to make the interface look like a pop up book. I did not go with this idea for the final application due to the lack of sophistication the visuals had. However I kept the concept of little worlds and used them in my final product.

HOME

YOUR TREE

FRIENDS

SHARE

AWARDS

LEARN

MENU

18

Preliminary Visual


Texture Flat

Style started to become flat. Played with the concept of having an image for the background but did not think it fitted the style of the application. Started to think about how to show the questions the user would answer. Tried a simple approach but disregarded it. Wanted something that would let you user interact with the application more.

How many hours a weekdo you drive a car?

60

35

10

5

19

Final Work


FINAL COMPS

20

Final Sketches


HomeStarted to rethink structure of application. Wanted the worlds to be more organic. Drew from inspiration more with these.

1

2

21

Final Sketches


Enter LifestyleData now floats with the land on the side. The focus isn't on the tree now. Its on the information which is was meets the project goal.

1

2

22

Final Sketches


ReviewReview screen where the user can share their tree on social media. App gives summary of their lifestyle and if its good or bad.

1

2

23

Grid


Grid

My design has a lot of floating free form elements so I used the grid for the type and placement of content but I did not use it for the visuals. In sections as you can see I broke the grid to create the floating look of the application. I used a basic grid with 8 rows to map out the different sections o the screen.

24

Wireframes


Splash Screen

App logo fills in as user waits

1: VECTOR LOGO

Logo of app is in center of screen No interaction is needed on this page.

1

25

Wireframes


Select World

User selects which story they want to interact with by swiping left.

1: WORLDS

Vector floating worlds

2: PROGRESS BARBar stays grounded at the bottom of the screen through full process.

1

2

26

Wireframes


Enter Lifestyle ( Question 1 )

User interacts with this screen to enter data about their life. End goal is to create a healthy tree which is seen center of the land mass.

1: QUESTIONQuestion changes as you go through application

2: DIAGRAMDiagrams show secondary information based on your choices.

3: SLIDE OUT PROGRESS BUBBLES JUST FOR QUESTION ANSWEREDShows how many questions user has answered and lets them go back and change past answers.

1

2

3

27

Wireframes


Results

Result screen shows user their results and a summary of their environmental behaviors.

1: LABEL

Application gives user a fun name based on their input.

2: SHARE ON SOCIAL MEDIALinks to share content with friends on twitter and facebook.

1

2

28

Final Styleboard


Floating Worlds

The final visual direction is illustration heavy with flat images. The interface draws upon natural colors and space. Elements float in midair on the screen so the visual must represent this quality with its space. The world illustrations are simple and work well with the application’s concept.

KEY WORDS

- airy

- natural

- light 1

2

29

Final Comps


Splash Screen


30

Final Comps


Select World


31

Final Comps


Enter Lifestyle ( Question 1)


32

Final Comps


Results


33

Final Comps


Tree Process

Step by step of how a tree will grow in application.

TRAVELTRAVEL TRAVEL TRAVELTRAVEL TRAVEL

34

OMFG IS IT OVER YET -...

Documents

Transcript of OMFG IS IT OVER YET -...