Garden Light Process

16
change the way you see the fenway take a look at the neighborhood in a different light by kimberlie sanders info architecture 2 joe quackenbush t.a. meredith lambert spring 2009

description

Process for Garden Light Interface

Transcript of Garden Light Process

Page 1: Garden Light Process

change the way you see the fenwaytake a look at the neighborhood in a different light by kimberlie sanders

info architecture 2

joe quackenbush

t.a. meredith lambert

spring 2009

Page 2: Garden Light Process

contents

course syllabus

group research

proposals & scripts

personas

wireframes

sketches

developed concepts

1

2

3

4

5

6

7

Page 3: Garden Light Process

course syllabus

research

information architecture

1

2

the neighborhoodsYou’ll be working in four Boston neighborhoods this semester:1. Downtown2. The North End3. Beacon Hill4. The Fenway

Your objective is to reveal the neighborhood to us in unusual ways.

a word about the final prototypeThe final interactive prototype you design and build will be a direct result of the research you do now. In other words, the most important part of this project will be your research.

Empty your mind of any preconceptions about what the final product might be. I’ll help you define certain elements of your final prototype as we go. But you’ll also have lots of space to develop your own ideas about the prototype.

starting your researchItems show in italics are keywords you should research online and in the library.Before you set out on your explorations and fact finding draw your own mental map of what you know of the neighborhood already, then set it aside. Write a list of what you would want in a neighborhood to entice you to live there for at least 5 years.

In your group, list the characteristics that you feel are important to make a resilient neighborhood – one that can survive periods of social and economic volatility.

action research to explorethe neighborhoodNow it’s your chance to go on an exploration or a fact finding mission in the neighborhoods you have been assigned. You can approach this in any way you wish. We would recommend that you do not take a street map with you. Just use your intuition and the cues of the neighborhood to explore it. Here are some models that others have used (the majority of these have been done on foot or cycle – but there is nor reason you can’t use them when riding the transit or in an automobile / motorbike).These ideas are just a real rush through a number of urban planning analysis techniques (there are many others) – by the end of this you will be well on the way to bluff your way in town planning and urban design – in fact, you will be more knowledgeable than many of the people who work in these sectors.map rambles (a derive / drift)Take a sketch book, a still or video camera if you wish, a digital voice recorder can come in handy too. A big piece or roll of paper will be needed too. As a group ramble or trek through a neighborhood absorbing everything around you – maybe you want to concentrate on using only a selection of your senses (sensory urbanism), or you may want to use social

or environmental cues to trigger your investigations. Even in the newest development, there are layers of history, can you feel or experience those without do prior desk research? Do certain areas cause you to have an uplifting moment, or are there ones that make you shiver?(psycho-geography / emotion mapping)think about themesIt may help you to choose a theme to investigate as you ramble through the neighborhood – themes could be of your own choosing, but some examples include: what time is this place? / who is watching whom? / ages of life / would you want to live here? / who fell in love here? / who owns this place? / where is my nearest store selling affordable fresh food? / who lives upstairs, across the street or behind the wall? / children-friendly public transportationThink about using public transportation, get on at one stop, get off at another, what changes, etc. What changes between stops? How is the underground experience different from the street-level experience? How does a static map of the transportation system in a neighborhood differ from the actual route itself?After a couple of hours find a place to lay out the big piece of paper, and together draw a collated map of what you have discovered.

other things to think aboutThe most important thing is to have fun in what you do, and to keep focussed on what you are trying to achieve. So I am just going to list some

more fun elements that you might like to consider, and also give you some issues to focus on. Some fun(damental) things to consider:+ Narrative overlays/oral histories of place+ Psychogeography, how it’s interpreted+ Animating public space+ The language of urbanism+ Locative media+ Media scapes+ Social interaction in neighborhoodsWhat has become all too apparent is that developmental property has been used as a financial instrument rather than a process to house people and give them civilised places to live. One third of kitchens installed in Britain in the last five years have never been used. The development and economic models for the much-heralded “urban renaissance” and “suburban nirvana” are dismantling before our eyes. We need to think long and hard about the social impacts of recent development. We may need to jettison the “lifestyle marketing” of the last ten years, and reframe what is often described as destination marketing.

Some neighborhoods and places appear more resilient than others to social and economic volatility – why might that be? How can you interpret these surroundings and communicate their values effectively to the public and to those in charge of development in our cities? It’s a tough call but it’s one I think you can achieve, and their will many people who will welcome your ‘fresh eyes’ in these troubled times.

some research approaches+ Spend time in the neighborhood just wandering around, getting the feel of the place. Meditate on your reactions.+ Visit your neighborhood on different days at different times. What changes?+ Take notes as you travel.+ Visit the neighborhood during different times of the day and night. How does it change your perception?+ Take lots of digital images.+ Take lots of video footage.+ Make as many sketches as possible.+ Record sounds in the neighborhood.

‘While many cities are defined by their skylines, Boston is distinguished by its vibrant neighborhoods. Indeed, Boston’s strength, diversity and vitality are all rooted in her 21 neighborhoods, where neighborhood pride and cultures from all over the world are cherished and celebrated. Although each neighborhood has its own personality and distinct appeal, all of the neighborhoods demonstrate Boston’s changing face, as this historic capital has become a magnet for all of the world’s citizens. These new immigrants have joined native Bostonians and transplants from across the country to make Boston the world-class city it is today.’From the City of Boston Web Site

Page 4: Garden Light Process

course syllabus

research

information architecture

1

2

overviewNow that you’ve completed your research and developed a rough idea of your project, it’s time to focus on the particulars. During this phase you’ll be doing four things:1. Revising your proposal.2. Developing three detailed personas.3. Developing a detailed feature list that not only show what users can do, but clarifies what specific features you will actually show in your prototype.4. Finally you’ll be developing wireframes for your project.project specificationsAt a minimum, your proposal must address the following issues:+ Project must be developed in Flash CS3.+ Screen dimensions: 1024 (horizontal)x 768 (vertical) pixels; unless you have specific display needs (e.g. phone).+ Mouse-driven interaction.+ RGB color (do not use CMYK)feature specificationsAt a minimum, your project must include the following elements: a map with interactive features; menus, filters, and rollovers; sound; video; animations; and photographs.How you choose to implement these elements is entirely up to you. Meredith and I can help you develop them in ways that make sense to your specific project.

feature list and script - overviewDetermining the scope of an interactive project can be difficult. Clients frequently want an interactive system that can do absolutely everything, as long as it doesn’t require anything from them. They also have very hazy ideas about what it takes to accomplish different interactive tasks whether its design, coding, or testing.developing your features+ The feature list should reflect the unique point-of-view of your project subject. What can people do with this that they cannot do with any other application?+ What is the data that you will provide to the user? Data is the most basic feature of your site so make sure to include it.+ Perhaps the second most important feature of your prototype is the filters to the data that you’ll offer. What are they?+ Consider developing your personas further before completing the feature list? What do your personas require from your project? Do they each have slightly different needs? How could those differences be reflected in the interface?+ Since a map is a required feature for everyone’s project, think about how you can best make the map component relate to your subject. Please don’t fixate on google or Yahoo maps for your interface controls. These are very limited. Develop a map that give access to your specific data. Also, think

about the best way to render the map. Should it be hand drawn? Should it be illustrated? Will it require specific types of icons or tools that should fit together visually?+ Look to other web sites, Flash programs, and software applications for inspiration. Many are shown in the “Course Links” page of the class wiki.turning features into a scriptThere’s a big difference between the features you will have in your project and what you decide to actually show in your prototype. For example, you’ll probably want some search functionality in your project. But unlike your iPhone assignment last semester, how you search in this project probably isn’t that important. You might not want to take time to demonstrate it in your prototype. Consider these:+ What are the five most important things a user can do with your project?+ What are the most important filters that your user will require? How will they help the user access and manipulate data? Which filters should you demonstrate in your prototype?+ At what point should your user getaccess to the map?+ Once on the map, what can the user do/see there?Once you’ve developed your feature list and answered these questions for yourselves, create a draft script that describes, step-by-step, what the user does. I suspect you’ll have between 15 and 20 steps for your first draft.

personas -refining your personasOne of the unfortunate problems of software development is the desire to provide all features to all users. Developers think its what we users want. Users also think its what we users want. But capitalism’s “more is better” maxim doesn’t always make for a better experience.Too often, software is developed to solve a particular task, not to solve the needs of a particular user. The difference is subtle but important. There’s nothing to stop you from opening an investment account on Fidelity right now for example. That doesn’t mean that what Fidelity can offer you right now is particularly useful given your financial needs at this point in your life.There’s a growing trend toward using personas in software development rather than a wide ranging group of users. A persona represents just one specific person with a set of specific problems. Using personas helps developers visualize individual users and better understand what they’re likely to need from a particular program, and more importantly, what they are not going to need.developing personasBased on your understanding of the project deliverables and expectations, develop three personas upon which to base your design decisions.What do we want to know about each persona? As much as possible. Try to identify each group‘s wants and needs in relationship to their age, culture, education, interests, hobbies, physical abilities, and of course, financial situation to make the characters as accurate and believable as possible.+ Start this process by analyzing the audience for each of your three research areas. Who are they? What do they do? Should they be broken up by age?

Life decisions? Career paths? What are their primary financial concerns? What will they be in one year? In five?+ Develop a single representative persona for each of your three most prominent or interesting groups.+ These representative characters can be based upon real people that you know or fictionalized hybrids of different needs.+ Give them names and find photographs for them (try to avoid really cheesy stock photos).+ Make sure that your three users are not too similar—they should reflect the diverse interests and needs of users.+ Create an 11” x 17” bio-sheet poster for each of these characters.+ Mount your posters carefully on board or foam core.

wireframes - overviewYou’ve researched your topic, developed map sketches, and created a feature list. This week, you’ll develop this into the information architecture of your interactive project.Wireframes are essentially the blueprint of your interactive experience. They help you to identify, plan, and develop the way data will be displayed, selected, and manipulated. In the development world, you’d be sharing your wireframes with programmers so that they could start coding the project. The most important thing to remember about wireframes is that they in no way are meant to resemble the design of your project. They are simply highly-functional diagrams, more or less to scale, of the interativity of your project. Wireframes allow you to work quickly to refine and develop the information architecture of your project before beginning the time-consuming design and programming phase.

developing your wireframesUsing your features list as a guide, develop wireframe diagrams of each page of your interactive project. Some things to consider:+ Your wireframes are a working document. Expect that they will change several time before you begin the actual design process. Don’t be frustrated.+ Work at actual size, set up your InDesign document to be 1024 pixels wide by 768 pixels deep. To InDesign, points are the same as picas so use points as your measurement unit.+ The wireframes should show all the tools — navigational and functional — that the user needs to interact with the data.+ The wireframes should show exactly what the user will see on each screen of the project.+ The wireframes should also show the placement of buttons and the correct text for each button.+ Be comprehensive, but practical. For example, it’s not practical to show every iteration of every rollover effect in your project in the wireframes. The point is to show enough so that we can understand what happens.+ Do not use color for this first version of the wireframes.+ Limit yourself to one neutral font. Remember, this is not meant to be the design of your project.+ Consider how transparent or how opaque your interface will be. For example, will you give the user access to lots of choices? Or will you hide some choices to the user, revealing them only when they do something like select a category or rollover a button.

‘Whether our communication tools are traditional print products, electronic products, broadcast programming, interactive experiences, or live performances makes little difference…the processes involved in solving problems, responding to audiences, and communicating to others are similar enough to consider them identical…These issues apply across all types of media and experiences, because they directly address the phenomena of information overload, information anxiety, media literacy, media immersion, and technological overload—all which need better solutions.’ Nathan Shedroff

Page 5: Garden Light Process

rout

e of

nei

ghbo

rhoo

d w

alk

group research

route

walking timages

interviews

video stills

1

2

3

4

Page 6: Garden Light Process

group walking im

ages

Page 7: Garden Light Process
Page 8: Garden Light Process

inte

rvie

w tr

ansc

ripts

CASK n’ FLAGON-21-22 year old female waitress-Has worked at Cask since September 2008-likes working at this place during baseball seasons, “it is crazy and busy”

-Simmons senior, hoping to graduate in the summer of 2009

-Originally from Amherst, Massachusetts-Mutual friend from my hometown-Aspires to attend Grad school in San Diego-Graphic Design/Marketing double major-Lives in the Fenway area, and loves living there.‘It’s close to everything, people love coming here’

She also told us about some confidential information about a stabbing in the back of Cask, but other than that claimed it as a place she felt safe working. She claimed that there are not too many fights because of a good door staff.

-22 year old female waitress-Has worked at Cask since May of 2008-Loves working during Baseball season, huge baseball fan

-Northeastern Junior – Criminal Justice Major-Originally from a military upbringing-Born in Oklahoma, went to high school in New York, favorite place to live was Korea

-Aspires to attend law school, possibly B.U. B.C. or -California somewhere-Claims she feels safe in the Fenway area, she lives

in Mission hill, and feels much safer at work than at home.

-35 year old male D.J./ musician-Plays every Friday night from 5-8 for about a year now

-He also plays at Ned Devines, and Harp, Green Briar-He also Paints houses, in the summer he works on the vineyard painting

-Self taught musician-Originally from Hull, lives on A Street.-Plays guitar, and African percussion, and Cuban drums

-Earns appx. $100 an hour working at the Cask

BOSTON BEER WORKS-Different Vibe, more corporate than the Cask, a more young working class group at Cask. Beer works has a more family friendly vibe. Live music 10pm Th. Fr. Sat

-21 year old door man-Wentworth Architecture junior-Attending Wentworth for another year and one half and will achieve a masters at wentworth

-Originally from Maine-Fenway Park was a big deciding factor in choosing to go to school in boston

-Lives in Mission Hill, feels very unsafe there, his roommate was just robbed.

-Has worked at Beer Works for one month, likes it.

-Feels safe in the Fenway area, and ok to walk home alone at night.

-Claims the average clientele is students 18-24, young professionals and family on slow nights.

-25 year old Male waiter-Went to Westfield State College, finished in 07 with -Business and marketing-Attempting to get his MBA at BU,BC, or Northeastern

-Started the last day of the last baseball season-He moved to Boston on a Sunday, started at Beer -Works that next week for 40 hours-Red Sox fan, -Lives in Back Bay-Doesn’t always feel safe in Fenway

-2 Female Customers sitting beside us 23, and 24 years old

-Students at Suffolk Law-First, in her second year getting her masters at Suffolk Law

-She went for undergrad at Providence-Originally from Ludlow MA

-Second, Worked in Waltham, was laid off-economy related

-Also from Ludlow-Her undergrad is from Johnson and Wales-Has lived in Boston for 2 years-They both went to see a movie tonight, “Confessions

of a shopaholic” – ‘it was good.’-They both like Beer Worksand the Red Sox

-They live in Brookline, and Waltham. -They feel there are lower crime rates here rather than other places, and do not feel threatened at all by the fens.

-The transportation they use is the T for school

GAME ON-21 year old Male Doorguy-Originally from Southie-Likes working at Game On, has been there for 1 and a half year

-Feels safe in the fenway area-German-Irish Heritage-Didn’t like the movie “Gone baby gone”-Drives as his form of transportation

HOUSE OF BLUES-First pair, not too interested in talking to us-From Boston, lives currently in JP-Waited a long time to see the show, lots of confusion with the opening

-Has lived in Boston for 5 years-Northeastern student-Drives as transportation-Always feels safe-27 and 30 years old

Group exiting the show-From Boston, also from Minnesota – been in Boston for 1 year

-Undergrad at Umass-Doesn’t generally like hanging out in this part of boston, too “ritzy” and “upperclass” for them.

-Feels safe here

-Areas changed a lot, angry about the architecture being so bad

BLEACHER BAR-Only bar that is inside the stadium with access from the outside in rather than from the inside out. Male

-Door guy 24 years old-Worked in Las Vegas before this at Jet Nightclub-From Boston Originally-Went to Johnson and Wales then Umass Boston then BU

-for 3D animation and video game design-Didn’t like working in that field – “overworked, and underpaid”

-Worked at E.A. Sports in Miami-Business hes in now, huge difference-Crime_ depends, the crime rate varies-FSU kids, and when he as younger it was bad, and crime is on the rise with everyone loosing their jobs.

JILLIANS-Kim can wear a hat in, Doug demanded to remove his. Rave-esq feel

-Couple bowling-Female- Lives in Boston, from Venezuela originally-Both Harvard Students-Male- From Upstate NY, grew up in italyin the Med and Business School

-MFA Frequenter, ‘likes Massart” Likes “art,” “What kind?’ ‘to draw’

-Uses the T for transportation-‘Fenway Area needs work’not enough nightlife, everything closes too early

-Lives in Harvard Square, at Jillians for a job offer dinner.

-Fens- ‘sketchy’

MACHINE-Funny smell- Sweet, Mothy, Musky.

-Male 26ish looking bartender-Lives in JP -From Centeral NYC-Came to go to Berklee, never went-Worked and went to AI for audio production/engineering for awhile

-Has been working there since Aug. 2008-Summer busier-Likes Fenway -Mixed Vibes from the people -More locals at his bar than tourists-Crime- Up and coming with the economy hitting

-Micheal and Steveninteresting pair, that talked to us for a long while. Very comical, sweet individuals.

-Came to the Machine to show off their winter clothes-They are from Atlanta Georgia, up just for the weekend

-Would not like to live in Boston, but loves the winter attire

-Had flown in on Thursday.-Best lobster roll and first lobster roll they ever had was at the Summer Shack in Back Bay

-Initially thought it was Sushi-Enjoys the Red Sox-Never really been to Boston before-Cab transported them from the airport-Much different culture from the south, Atlanta does not have historical buildings like Boston

-Leaving Sunday -These two have been together for 14 years

Page 9: Garden Light Process

vide

o st

ills

Page 10: Garden Light Process

5 Most Important Things A User Can Do

1. Navigate between the three home pages2. Navigate between day or night3. Navigate between 1 and 10 minutes4. Navigate between the Days of the week 1-75. Navigate between the home pages and the map page

MOST IMPORTANT FILTERSNavigating between time in minutes and day with the scroll at the bottom of the page

-This will be the easiest way to show the purpose of this page in being the most direct way to change the way of viewing. In a prototype of this project the manipulation of the time of the day between the drastic changes between day and night will be the most effective. Map-The user gains access to the map from either the main directory, or through the detail shot depicted from the selected image on one of the main pages. Once on the map the user can see an aerial view of the contents of the map, they can also get a specific detail shot of that image of sky or ground, and depict this either all sky or all ground.

STEP 1User opens page, sees main page of picture composite of the intersection at the Landmark Center heading down to the citgo signSTEP 2User rolls mouse over scroll bar at bottom to scroll from day of the week and chooses day 2STEP 3User is stil on all Day time so the images shuffle to show all the images from that day shoot STEP 4User selects specific imageStep 5User gets an option to change the image to the feature options of day or night, day of the week, or minute in time, or to go to the mapStep 6User changes that specific image to night (now in the composite of images that one image is changed to a night photo of that exact spot that matches up with the rest of the images, which are day shots.Step 7The user now wants to see all of the photos in night so in the menu at the top there will be an option to do so (to either change from day to night (all or selection) Step 8

THEMEThe main theme that I am approaching with this project on the Fenway neighborhood is transparency. The concept that I am working with is the idea that nothing in this neighborhood is permanent. Everything is transient; the businesses the people the architecture.

RESEARCHOur group research has made this theme evident of transience. Through the research on the demographic of the neighborhood being mostly college students, and the constant construction that is going on proves the lack of permanence. This project will require more research in terms of discovering the true history of these buildings and

showing a transformation of what was and what currently is and also what will be.

AUDIENCEThe audience could range from anyone looking to move to the area, or someone who is interested in simply visiting.

PERSONASJennifer is a recent high school graduate who is contemplating going to school in Boston. Jennifer has been to the city only once before. She is applying to schools near the Fenway but really has no idea what to expect from the area. Jennifer is looking for an area that will fit her needs as a student, and at the same time make her feel comfortable in transitional

orig

inal

pro

posa

lfrom her simple small town life, to the life in the city.

Jim is a young professional, just a few years out of college. He is not from the city of Boston, but is a huge baseball fan. He is coming into the city for a Red Sox game, and has never been to Fenway Park. Jim is looking to get a feel for the area that he is about to encounter. He wants to have something to do before the game, and potentially what he could do after. He would also like to know his options of where he could go to eat, and potentially where he could grab a drink after the game gets out. He also is toying with the idea of staying over in the city with friends, and wanted to know if there was anywhere that he could stay. Jim would use this map to figure out the answers to these questions.

Lori is about to graduate from college this year. She wants to stay in the city and is looking for her next apartment in a neighborhood that would make her feel comfortable yet is not looking for boring by any means. Lori wants to know where she can find a separation of quiet, but nightlife close by, that will be accessible safely. Lori is very concerned about safety, and wants to figure out the crime rates of the area, and feel comfortable knowing the crime rates in the local businesses.

FEATURESI want the interface to be a photo stitch with many transparencies to show the progression of a place over time. I want to photograph the exact place at day and at night in the same spots to create an overall screen of places and because it will be in a stitch one will be able to select specific pictures and get descriptions of the contents in this area.There will be a set of 3 locations of stitches. The first one being on the corner by the landmark center, another by Boston Beer Works looking down Lansdowne, the third location will be from park drive looking down along the park. these photos when selected to the detail portion will then have photo overlays of transparencies of historical aspects, to show what has been in that specific place over time, and what it is now.

OBJECTIVESI want the user to be able to get an over all feel for the neighborhood. I want the navigation to be simple and understood easily. I want to project the businesses and what there is to do in a fun and productive way. I want to demonstrate this using images and detailed information.

proposals & scriptsoriginal proposal

updated proposal

script 1

script 2

final script

1

2

3

4

5

THEMEThe theme that I am approaching with this project is to change the way one looks at the fenway neighborhood. I want to dot his photographically, so by “the way one looks” I mean that quite literally. The purpose is to open up the viewers mind to other forms of interpretation, and other means of seeing.

RESEARCHOur group research focused a lot on what we saw that stood out to us as abnormal. I am a very visual thinker and from our group research I responded the best to the photography that we took. Our research, and looking through the compilation of information that we had collected only strengthened my attraction to specific aspects of our collections; those being texture

and perspective. This project will require additional photography to capture exactly what I am attempting to depict. I am going to need to photograph in a time frame that mirrors day and night, and the changes in light in a span of 10 minutes.

AUDIENCEThe audience could be very broad. The audience will range from individuals who love the Fenway area and are interested in seeing it in a different way. It could also appeal to other photographers who are interested in looking at a different kind of work in a design standpoint. The primary audience I believe would be anyone; age is really not a discriminating factor in this, that enjoys design and photography.

FEATURESThe features that I am going to include are predominantly photographic.I want this site to be navigated easily with a variety of rollover images. The subject will initially be looking at a grouping of photographs that will navigate them to their next destination on the map. Following the theme this system will be able to change from page to page, appearing different yet the same; by that I mean photographically. I am going to visualize this from three locations in the fenway. Mapping out a photo stitch that will contain a grouping of a pages worth of photographs, that will all be separate but will be able to be manipulated individually as well. What I mean by that is that the images will scale from:

-Day-Night-Ranging in minutes from 1-10 during the day-Ranging in minutes 1-10 during the night

This will be the initial screen. Branching from that screen the features will be ranging from a rollover of a select of the aforementioned images on the home pages that will direct you to the next place. When that image is rolled over and clicked on an image detail view from that spot will appear with a direct detail of that spot from the sky or the ground; which leads to the map part of this assignment. Which is one way that this could go. I would then focus on my appeal to texture and create a map of images that would walk through the route I took to get to the three home pages in images. This map would have two features

-photographs of the ground every few steps that I take along the entire walk

-photographs of the sky every few steps that I take along the entire walkThese images would be organized in a map route of the walk geographically.

This map could be overlayed opaque over the screen of the main page, or it could be its own page. I was thinking of having a map of the fenway roads and the images of the ground or sky (whichever feature is selected) in a footprint of the route. with the landmarks being where the main pages were.

Main PageOn the main page there would be the over all images with rollovers and links to the other subjects. There would also be a key or guiding link to all the places to navigate to or ways of sorting this information

-MAIN PAGE 1-MAIN PAGE 2-MAIN PAGE 3- DAY-NIGHT-TIME IN MINUTES 1-10-DAY OF THE WEEK-MAPAt the bottom of the screen there would also be buttons and a scroll to go from different moments in time, and different days of the week long study that this was done in.

DATAThe data being provided to the user will be a variety of views, and a navigation system to get from view

upda

ted

prop

osal

scri

pt #

1 User changes half to night and half to day and now wants to go to specific detail so a single image is selectedSTEP 9User now wants to scroll through the days, so grabs the squeegee and as it is run across the bottom of the page the images shuffle (continuing to match up equally)STEP10The user settles on a different day and now wants to experiment with the squeegee below that is labeled minutesSTEP 11The user goes through the same process of shuffling through the images in a span of 1-10 minutes (the page is still set to half day and half night so it is shuffling through accordingly)STEP12The user now wants to select a specific image and see the information that will followSTEP13User selects image to be brought to a small detail of options to change the photo or to see the detail shot of that location to navigate to the mapStep14The user selects the map and the map is overlaid slowly on top of the main pageSTEP 15this brings the user to the overlay of the footprints with the images of the route taken through the neighborhood with landmarks listed.STEP 16On the map page the user selects the option to view all as sky, the images of the footprints shuffle to sky photographs of the route taken that can be viewed in the form of these footprints or shown in a slide.Step 17The user changes the photos back to ground photos and chooses the slide optionSTEP 18 The user now is clicking through the images of the walk through all with the perspective of the ground in the neighborhood.STEP 19The user views slides and wants to navigate home to another main page from top of screenSTEP 20User clicks on separate location, where same options can be gone through from step one - twenty

Page 11: Garden Light Process

List of steps taken by personaSTEP 1Jamie opens up “change the way you see the fenway”The first thing that she sees is the enter screen with an image broken into 15 parts with a button below it “change the way you see the fenway”STEP 2Jamie clicks the enter screen and comes to the main screen with an image of the gardens as the main element.

STEP 3Jamie rolls her mouse over the screen to show that each element of the image (all 15 squares) have rollover qualities, to another image that appears behind when rolled over.STEP 4At the bottom of the screen Jamie sees a scroll bar labeled with the day or night, and with the minute. Jamie grabs the scroll bar and rolls it over the entirety to watch the image change 7 times over the course of 7 days.STEP 5Jamie leaves the bar on day 7, and now grabs the minute bar and does the same. She decides to stay on minute 3.STEP 6Now the entire image is changed to day 7 minute three and Jamie decides to rollover to see the image with its rollover behaviorSTEP 7Jamie clicks a random image and it is selected. A pop up screen comes forward.STEP 8On this pop up screen Jamie can change the settings to make the image a night time image.STEP 9Jamie also changes the images day to day 3.STEP 10Jamie also changes the minute to minute 7. She is now done with the pop up screen and hits the “x” in the corner to close the window.STEP 11Jamie is now back to the main screen with the image of the garden as the background, but one image is changed to the settings that Jamie specified in the pop up.STEP 12Now Jamie rolls her mouse over the menu at the top of the screen to the button labeled “map” and

Jamie opens up the page “Change the way you see the Fenway”What she sees is an image of Fenway Park.On the top right of the screen are two different locations in the Fenway neighborhood.Jamie clicks each link to show the two different home screens with all images of their locations: The Gardens, and Yawkey Way.Jamie returns to the Fenway screen.

On the bottom of the screen are the options to scroll from Day 1 to Day 7, and beside that scroll are buttons to choose from “Day” and “Night”Jamie chooses to slide the scroll bar to the number 3 on the Day screen. Automatically the picture changes to the third day image. Next Jamie chooses to click the button for night, and the image remains on the same day but changes to an image on that same day but taken at night.Below the scroll for days there is a scroll numbered 1-10 of the time in minutes of that specific time of day or night. Jamie scrolls over the minutes and watches the picture change over the course of the 10 minutes. She lands on minute 5.Now Jamie is looking at Night #3 at the 5th minute.Jamie then rolls her mouse over the screen to show that each part of the image has it’s own components. The main image is divided into 15 2x2 inch squares. Each square can be altered individually. Jamie rolls over a rectangle. And a rollover square comes around the rectangle.Jamie clicks the rectangle and it comes forward.The image then turns over to show a number of choices.In these choices Jamie sees that she can (similar to the main screen) change the day over the 7 days, and the minute over the 10 minutes and choose to change it all to day or night.Jamie makes her choice to scroll to the 7th day, at the 10th minute at night.She then clicks “ok”The image flips back over and shrinks back to it’s spot on the main screen.Now, that image is separate and different than all the other on the screen.Jamie wants to change all of the images back to the same.She navigates to the scroll on the bottom and changes the screen to Day 1, Minute 1 with Day selected. All of the images shuffle to that selection.

scri

pt #

2

final

scr

ipt she clicks this button

STEP 13A pop up screen appears with an image of a walking map of the fenway neighborhood surrounded with images of footprints mirroring the sky as you would walk through this area. At the bottom of the screen are different ways of viewing these images.

-you are able to view them during the day and the night, but the main change is that you are able to view the area from the perspective of the sky and also of the ground.STEP 14Jamie now chooses the icon to view the images in the form of a slide from the button on the bottom. A large scroll of images appears and you are able to slide through all of the images in the segment.STEP 15Jamie is done looking through the images in this way and hits map icon to go back to the original map picture. Jamie rolls over the map to see that the pieces of the map are also rollover buttons to the two locations.STEP 16Jamie clicks the rollover labeled FENWAY and the pop up closes and the screen changes to the main screen the same as the main garden screen appears as.STEP 17Jamie rolls over the screen to show the rollover qualities of day and night in the fenway screen.

DONE!! PER

SO

NA

SJEN

NIFE

RH

IGH

SC

HO

OL G

RAD

UATE

JAM

IEPH

OTO

GR

APH

Y S

TUD

EN

T

LOR

IYO

UN

G P

RO

FES

SIO

NAL

Jennifer is 18 years old and is also a recent high school graduate who is contemplating going to school in Boston. Jennifer has been to the city only once before. She is apply-ing to schools near the Fenway but really has no idea what to expect from the area. Jennifer is looking for an area that will fit her needs as a student, and at the same time make her feel comfortable in transitioning from her simple small town life, to the life in the city. She really has no idea what to expect but is looking for something to get her excited about her potential new home. She is getting nervous about moving away from home and is wondering if she is going to be able to cope with her new surroundings

Jamie is a photography student from a small school outside of the city. She is in her last year at her institution, but is feeling nervous with grappling with the photography world outside of college. With this fear Jamie is always looking for new forms of inspiration, and most of her interest being in cities. Since the closest large city is Boston, she has recently been inter-ested in finding more influence from the city itself. In doing so she has been looking for inspi-ration in images of the city. Jamie wants to find some kind of new outlet which she can view things differently to help her manage the big changes that are about to occur for her upon graduating.

Lori is 28 years old and recently moved to the Fenway neighborhood, into a residence on Park Drive. She works for a local Ad agency in the creative department. Lori is very inter-ested in design and always is looking for new outlets of inspiration. Being new to the neighborhood, Lori does not know anything about what the Fenway has to offer. She is looking for a way to better understand her new home, but not to get the commercial view that comes off at first glance. Lori wants to know the real deal of what she is going to see everyday when she steps out her door while she is living in this location, and possibly a better view of her new home.

personas

Page 12: Garden Light Process

flash tutorials

concept sketches

CHANGE THE WAY YOU SEE THE FENWAY GARDEN MAPFENWAY

X Y DAY

MINUTE

1

1 2 3 4 5 6 7 8 9 102 3 4 5 6 7

NAVIGATIONCATALOG

MAP

GARDEN

GARDENFENWAY

CHANGE THE WAY YOU SEE THE FENWAY GARDEN MAPFENWAY

X Y DAY

MINUTE

1

1 2 3 4 5 6 7 8 9 102 3 4 5 6 7

NAVIGATIONCATALOG

MAP

GARDEN

GARDENFENWAY

DAY

MINUTE

1

1 2 3 4 5 6 7 8 9 102 3 4 5 6 7

X Y

DAY NIGHT

PREVIEW

ABOUTGARDEN MAPFENWAYhome.

X Y

DAY

MINUTE

NIGHT1

1 2 3 4 5 6 7 8 9

2 3 4 5 6 7

10

GARDEN

change the way you see the fenway

change all

CHANGE THE WAY YOU SEE THE FENWAY GARDEN MAPFENWAY

X Y DAY

MINUTE

1

1 2 3 4 5 6 7 8 9 102 3 4 5 6 7

NAVIGATIONCATALOG

MAP

GARDEN

change the way you see the fenway GARDEN MAPFENWAY

X Y

DAY

MINUTE

1

1 2 3 4 5 6 7 8 9 102 3 4 5 6 7

day nightchange the way you see fenway

change all

GARDEN

about

change the way you see the fenway

CHANGE THE WAY YOU SEE FENWAY

about about about about

CHANGE THE WAY YOU SEE THE FENWAY GARDEN MAPFENWAY

X Y DAY

MINUTE

1

1 2 3 4 5 6 7 8 9 102 3 4 5 6 7

NAVIGATIONCATALOG

MAP

GARDEN

SKYGROUND

SKY GROUND

SKY GROUNDX Y

CHANGE THE WAY YOU SEE THE FENWAY GARDEN MAPFENWAY

X Y DAY

MINUTE

1

1 2 3 4 5 6 7 8 9 102 3 4 5 6 7

NAVIGATIONCATALOG

MAP

GARDEN

SKYGROUND

SKY GROUND

SKY GROUNDX Y

change the way you see the fenway

X Y

DAY

MINUTE

1

1 2 3 4 5 6 7 8 9 102 3 4 5 6 7

day night

CHANGE THE WAY YOU SEE FENWAY

about about about about

GARDEN MAPFENWAY

change the way you see the fenway

X Y

DAY

MINUTE

1

1 2 3 4 5 6 7 8 9 102 3 4 5 6

CHANGE THE WAY YOU SEE FENWAY

GARDEN

ABOUT

DAY NIGHTMAP

7

GARDEN MAPFENWAY

change the way you see the fenway

X Y

DAY

MINUTE

1

1 2 3 4 5 6 7 8 9 102 3 4 5 6 7

day night

CHANGE THE WAY YOU SEE FENWAY

about about about about

GARDEN MAPFENWAY

change the way you see the fenway

X Y

DAY

MINUTE

1

1 2 3 4 5 6 7 8 9 102 3 4 5 6 7

day night

CHANGE THE WAY YOU SEE FENWAY

about about about about

GARDEN MAPFENWAY

final design concepts

CHANGE THE WAY YOU SEE THE FENWAY GARDEN MAPFENWAY

X Y DAY

MINUTE

1

1 2 3 4 5 6 7 8 9 102 3 4 5 6 7

NAVIGATIONCATALOG

MAP

GARDEN

GARDENFENWAY

CHANGE THE WAY YOU SEE THE FENWAY GARDEN MAPFENWAY

X Y DAY

MINUTE

1

1 2 3 4 5 6 7 8 9 102 3 4 5 6 7

NAVIGATIONCATALOG

MAP

GARDEN

GARDENFENWAY

DAY

MINUTE

1

1 2 3 4 5 6 7 8 9 102 3 4 5 6 7

X Y

DAY NIGHT

PREVIEW

CHANGE THE WAY YOU SEE THE FENWAY

click to enter

CHANGE THE WAY YOU SEE THE FENWAY GARDEN MAPFENWAY

X Y DAY

MINUTE

1

1 2 3 4 5 6 7 8 9 102 3 4 5 6 7

NAVIGATIONCATALOG

MAP

GARDEN

change the way you see the fenway GARDEN MAPFENWAY

X Y

DAY

MINUTE

1

1 2 3 4 5 6 7 8 9 102 3 4 5 6 7

day nightchange the way you see fenway

change all

GARDEN

about

change the way you see the fenway

CHANGE THE WAY YOU SEE FENWAY

about about about about

CHANGE THE WAY YOU SEE THE FENWAY GARDEN MAPFENWAY

X Y DAY

MINUTE

1

1 2 3 4 5 6 7 8 9 102 3 4 5 6 7

NAVIGATIONCATALOG

MAP

GARDEN

SKYGROUND

SKY GROUND

SKY GROUNDX Y

CHANGE THE WAY YOU SEE THE FENWAY GARDEN MAPFENWAY

X Y DAY

MINUTE

1

1 2 3 4 5 6 7 8 9 102 3 4 5 6 7

NAVIGATIONCATALOG

MAP

GARDEN

SKYGROUND

SKY GROUND

SKY GROUNDX Y

Page 13: Garden Light Process

imag

e re

sear

ch

These are images of the two locations I chose to investigate for my Boston neighborhood site. I had to take photographs in the same location over ten minutes, a picture every minute, in the same spot during the day, and again in the evening, for a week long period of time. These are examples of what one group of images would look like. I then would have to cut each image into 15 sections. In the interface each image would be layered based on location. So, essentially each image would have 140 full images behind it (7 days in a week, and each day over ten minutes, and then multiplied by two for day and night.) This then would be divided into 15 sections, as before mentioned. This way each slice of the full picture could be altered individually, to view that

piece of the picture, over a large scale of variations in time of day, and over a weeks time. This creates approximately 2,100 different images, which can all be altered in different ways, making the results up to the user in an almost countless way.

My individual research process started with visiting the same location twice a day for as many simultaneous days as possible, to essentially compile this seven day composite. The same process went for the walking images as well. While visiting these locations so often I became extremely versed in the walk taken to each of the two locations, and that is why I chose to highlight it in the map portion of this interface, bringing specific attention to the details

that I would pick up along the way.The next part of viewing is the way that one can view the route taken to get to these locations. This part of the interface provides an alternate choice for viewing.The walk is divided into four sections, focusing on perspective. One can view the walk of all the images taken every few steps around the neighborhood, from the perspective of looking up at the sky. The latter is to choose to view them from the perspective of looking down at the ground. This also can be altered. The user has the option to look at the images from the same two perspectives I just mentioned, but also has the option to view this either during the day or at night. I have taken excerpts of the day time walking images that are shown on the next pages.

Page 14: Garden Light Process

map

of w

alki

ng im

ages

: gro

und

Page 15: Garden Light Process

map

of w

alki

ng im

ages

: sky

Page 16: Garden Light Process

final

stil

ls