week eleven: filming & animating

this past weekend i had the pleasure of directing some very dear and agreeable studiomate actors in the footage i needed to get for my video. it was nervewracking all the way around, but i think it all came out pretty nicely and i'm excited to be stitching it artfully together to show to you! 

at the same time, i'm animating the actual website part of my video together in (mostly) keynote, to export and snip together. these processes mean i have a lot of things going at the same time! here's a little survey of all the places apart together is living on my computer right now.

vectors make for happy icons.

photoshop makes for pixelperfection and pretty screens.

keynote makes for dance-y interfaces.

final cut (is about to) bring it all together.

special thanks to ashley, eli, and jumper for the use of their lovely personages.

week ten: development of screens

as listed on my self-made schedule, this week concludes the "ardent designing of screens." a few class periods ago, i had the most useful conversation with marty: she brought up the fact that i can, when i show this work, include my wireframes and site map to describe all the functionality while having a much shorter, more stylistic, and emotional video, rather than a clinical walkthrough of dozens of moments of interaction. here are examples of each of the kinds of screens i will be using in my video, with the repeats taken out. note: i'm still making changes and refining from the feedback i've been given! they aren't quite there yet, but here's some process.

after skipping the question, the first girl posts about how her boyfriend has just left town.

she receives support from the community through the comments.

here is a screen showing how the search functionality works, for text content and images.

the stream looks something like this.

users get to upload their own background image for their profile, explaining why this screen is the only with this image. the other backgrounds are pulled from a curated collection of softened, comforting, or related imagery, and stays the same while you navigate until you refresh the site.

the way the messaging system works, in this case, to offer mentorship.

this is the mood map, which you drag to find moods based on energy level and positivity.

i've also been talking to 'actors' to start shooting for the video asap. i'm excited about this. i feel like it's one of the most successful things i've worked on so far... i hope i can keep it up and finish strong!

spatial patterns and augmented reality

all things playful: progress. by abby carr & jessi wilson

week eight: promotional video narrative

(i conducted some serious user research yesterday as i goodbyed my gentlemanfriend back up to illinois after slightly less than a day in kansas city.)

here is the narrative i'm going to be working with for my video. it is likely still too ambitious, but i think i have at least decided to make one video with a few different scenarios rather than four separate. i've also gone from four different personas to just two for the sake of shooting simplicity. 

a girl and a boy hold hands through a car window. he kisses her hand and drives away. she stands and watches his car, waving and wiping her eyes.

she opens her macbook and types.

the screen is shown with the together apart page. she skips the daily question and posts to the stream: "he just left. now to get through another six weeks…" and a message comes in. "i just dropped my girlfriend off at the airport. i think we live in the same part of town—wanna get some coffee so we aren't alone this afternoon?" she writes back "yes, please!"

————

a different boy enters a room with his phone ringing. he doesn't answer it. he sits down to his computer. it is ringing. he ignores it. a text comes through. he doesn't look. he turns the sound off, and it vibrates.

he asks a question: "my girlfriend cheated on me at a party. what do i do now?"

close ups on some answers: "dump her before she cheats again." "people make mistakes." "well, people make the same mistakes again." "maybe talk it out and work on boundaries?" "if it's worth it, you guys can work through it." "good luck with whatever you do!"

he takes a deep breath. the phone rings and he answers it.

————

the same girl is online. she looks at the feed and smiles a little.

sees, "do high school sweethearts ever really work out?"  she comments back: "so far, so good…" and visits this person's profile. she offers to mentor. "we split for college three years ago, and we're still going strong… i'm here if you ever want to talk."

————

the boy gets on the home page. he answers the daily question. 

his phone buzzes: a text says "i miss you."

he goes to the mood map. he clicks "hopeful."

apart doesn't have to mean alone.

spatial branding exploration

thanks to mr. kidwell for casually naming the exhibit "all things playful" during a process discussion.

playing with titles and subtitles.

contrast!

a lockup.

week seven: presentation, more wireframes, and design directions

iiiit's midterms! monday, we presented an overview of where we were with our projects as well as some rough design comps to get feedback on how we should proceed visually. here is the presentation i gave:

"apart together" scenarios and design by jessirwilson

and if you'd prefer not to slideshow through the scribd, i have included un-previously-blogged content below to scroll through at your leisure!

first, wireframes. these first two blocks of five premiered last week, illustrating the process of joining the community, filling out profile information, and asking a question,

followed by another user seeing the question, and—instead of simply answering—viewing the profile and offering to mentor the new user.

the next is a way the site can be used to look for help on a particular topic.

this scenario demonstrates the mood map and how it can be used to find content with the same feeling.

lastly, this scenario shows how the site can be used to help people connect in real life as well as online.

this is a photo-rich visual direction... i have gone back and forth over whether the photos are user-chosen for themselves, or user generated at all, just imagefaded between one another.

this is a much simpler and and more crisp direction that just uses a map collage for the navigation. 

after my presentation, everyone agreed that the photo-heavy direction was more interesting and is the design tactic i should be pursuing. now my work is cut out for me in solving the legibility issues and finding ways to make the photography harmonious with the way the site works.

spatial: mobile interactivity

we've been thinking a lot about how we want to divide the information throughout the space, physically and digitally.

we're thinking that the physical space itself should just be a showcase of designed objects and a little bit of information about them, and the design principles should be visible through augmented reality, winding through the space, the invisible undercurrent of decisionmaking, as good design itself is basically invisible, without drawing unnecessary attention to itself. this can also be an opportunity for some very subtle, sneaky additional wayfinding.

another idea we're particularly excited about is the new-ish technology of bumping phones to exchange information, and we liked the idea of being able to bump near one object or another to learn more about it, or, if available, show where/how it can be purchased.