http://portfolio.dietrovetro.com DietroVetro Fri, 24 Feb 2012 05:29:45 +0000 http://portfolio.dietrovetro.com en http://portfolio.dietrovetro.com/SPOKED http://portfolio.dietrovetro.com/following/portfolio.dietrovetro.com/SPOKED Fri, 24 Feb 2012 05:29:45 +0000 DietroVetro 2872532 Case: Thesis project Context: MFA in Interaction Design, School of Visual Arts, NYC Collaboration: Carrie Stiens, Kristin Breivik We saw the power of visualizing bike rides on a map when hosting the King of Two Wheels bike challenge. The data visualization seemed to encourage biking in general, and especially urban exploration. We saw contestants experiencing that New York City became smaller, as they realized how far the two wheels could take them. We decided to take this concept further in our joint thesis by making it digital; a tracking app and a web platform to display the rides. This initial prototype in HTML, CSS and Processing is about to materialize where thesis partner Carrie and I are battling in pink and yellow with our rides from February 2012: <img src="http://payload28.cargocollective.com/1/0/13708/2872532/02-22_web_02.png" width="670" height="471" width_o="1522" height_o="1070" src_o="http://payload28.cargocollective.com/1/0/13708/2872532/02-22_web_02_o.png" data-mid="14602762" border="0" align="left"/> While other tracking platforms focus on fitness; burning calories, speed and distance, our platform, SPOKED, will be about the pure joy of biking to get around in an urban environment. We have identified the kind of people that we believe are likely to use our product: <img src="http://payload28.cargocollective.com/1/0/13708/2872532/bike-personas-yes.jpg" width="670" height="376" width_o="800" height_o="450" src_o="http://payload28.cargocollective.com/1/0/13708/2872532/bike-personas-yes_o.jpg" data-mid="14602729" border="0" align="left"/> ...and a whole lot of people that we obviously also hope to reach, but that might not be our first volunteers. <img src="http://payload28.cargocollective.com/1/0/13708/2872532/brand_bike_personas.jpg" width="670" height="257" width_o="700" height_o="269" src_o="http://payload28.cargocollective.com/1/0/13708/2872532/brand_bike_personas_o.jpg" data-mid="14602724" border="0" align="left"/> These are the values we're focusing on: <img src="http://payload28.cargocollective.com/1/0/13708/2872532/values.jpg" width="670" height="447" width_o="670" height_o="447" src_o="http://payload28.cargocollective.com/1/0/13708/2872532/values_o.jpg" data-mid="14602514" border="0" align="left"/> In addition to hacking away on the web prototype, we're planning a video to explain the concept, the value of biking, and the values of the bikers we're targeting: <img src="http://payload28.cargocollective.com/1/0/13708/2872532/storyboard2.jpg" width="670" height="446" width_o="900" height_o="600" src_o="http://payload28.cargocollective.com/1/0/13708/2872532/storyboard2_o.jpg" data-mid="14602518" border="0" align="left"/> Here's an initial sketch of the key touchpoints of the product: <img src="http://payload28.cargocollective.com/1/0/13708/2872532/walkthrough800.jpg" width="670" height="500" width_o="800" height_o="598" src_o="http://payload28.cargocollective.com/1/0/13708/2872532/walkthrough800_o.jpg" data-mid="14622100" border="0" align="left"/> ...and there's been a whole lot of sketching and wireframing since then: <img src="http://payload28.cargocollective.com/1/0/13708/2872532/wireframes.jpg" width="670" height="500" width_o="800" height_o="598" src_o="http://payload28.cargocollective.com/1/0/13708/2872532/wireframes_o.jpg" data-mid="14622107" border="0" align="left"/> The splash page is up for now, but we're excited to swap it out with a working site where people can display their rides, and compare with their friends. <img src="http://payload28.cargocollective.com/1/0/13708/2872532/02-22_splash_01.png" width="670" height="482" width_o="1432" height_o="1032" src_o="http://payload28.cargocollective.com/1/0/13708/2872532/02-22_splash_01_o.png" data-mid="14602758" border="0" align="left"/> See how our thesis evolves on our thesis blog: leatherducking.com http://portfolio.dietrovetro.com/Unicorns-At-Work http://portfolio.dietrovetro.com/following/portfolio.dietrovetro.com/Unicorns-At-Work Fri, 24 Feb 2012 03:36:09 +0000 DietroVetro 2872175 Case: A small video project to capture internship experiences Context: MFA in Interaction Design, School of Visual Arts, NYC Collaboration: Carrie Stiens, Kristin Breivik A few questions on sticky notes, a private room to talk, some simple instructions, and a web cam to capture it. That's what was provided to ask my fellow classmates about their internship experiences. During the King of Two Wheels bike challenge I hosted in the IxD studio with my thesis partner Carrie Stiens, we turned one of the rooms in the studio into a "confession booth" to encourage the contestants to share their thoughts. We then reused the booth setup to capture stories about our fellow classmates eventful summer at places like Twitter, Yelp, Nike, Purpose, Breakfast and Arc90. <img src="http://payload28.cargocollective.com/1/0/13708/2872175/confession_booth.jpg" width="670" height="500" width_o="800" height_o="598" src_o="http://payload28.cargocollective.com/1/0/13708/2872175/confession_booth_o.jpg" data-mid="14601309" border="0" align="left"/> http://portfolio.dietrovetro.com/King-of-Two-Wheels http://portfolio.dietrovetro.com/following/portfolio.dietrovetro.com/King-of-Two-Wheels Thu, 09 Feb 2012 22:37:04 +0000 DietroVetro 2778856 Case: Prototyping for our thesis on urban biking. A bike challenge hosted in the workspace of our department (October 2011). Context: MFA in Interaction Design, School of Visual Arts, NYC Group: Carrie Stiens, Kristin Breivik A map of New York City and 500 feet of yarn propelled four grad students to compete for the King of Two Wheels title. To encourage biking for transportation in the city, as well as to explore concepts for their thesis on urban biking, Carrie Stiens and I hosted the King of Two Wheels challenge in our studio space. We put four students up against each other, and asked them to manually track all of their rides during a week on a communal map with a spool of yarn. The contestants were also encouraged to explore the city, share the bike love by recruiting riders, and beg their studio mates to cheer for them. Whoever had the least amount of thread left on their spool at the end of the competition was rightfully crowned the King of Two Wheels. But even more important, in the SVA IxD studio people still talk about biking, lights, helmets, routes and the weather. Biking is part of our culture! <img src="http://payload23.cargocollective.com/1/0/13708/2778856/map_prototype.jpg" width="670" height="500" width_o="800" height_o="598" src_o="http://payload23.cargocollective.com/1/0/13708/2778856/map_prototype_o.jpg" data-mid="14599227" border="0" align="left"/> Testing scale and placement of the components of the interface. <img src="http://payload23.cargocollective.com/1/0/13708/2778856/challenges_all.png" width="670" height="444" width_o="1000" height_o="664" src_o="http://payload23.cargocollective.com/1/0/13708/2778856/challenges_all_o.png" data-mid="14599231" border="0" align="left"/> A few of the challenges our contestants had to complete to get bonus inches cut off of their thread. <img src="http://payload23.cargocollective.com/1/0/13708/2778856/Guri-navigator-award.jpg" width="670" height="500" width_o="2048" height_o="1529" src_o="http://payload23.cargocollective.com/1/0/13708/2778856/Guri-navigator-award_o.jpg" data-mid="14599240" border="0" align="left"/> One contestant was honored each day based on achievements within the challenge. <img src="http://payload23.cargocollective.com/1/0/13708/2778856/partner_crime.jpg" width="670" height="445" width_o="2048" height_o="1360" src_o="http://payload23.cargocollective.com/1/0/13708/2778856/partner_crime_o.jpg" data-mid="14599437" border="0" align="left"/> Riders were encouraged to share the bike love through getting a team mate for the day. <img src="http://payload23.cargocollective.com/1/0/13708/2778856/bet_invite.jpg" width="670" height="445" width_o="2048" height_o="1360" src_o="http://payload23.cargocollective.com/1/0/13708/2778856/bet_invite_o.jpg" data-mid="14599406" border="0" align="left"/> The whole studio was encouraged to get involved through betting on a contestant. <img src="http://payload23.cargocollective.com/1/0/13708/2778856/party.JPG" width="670" height="445" width_o="2048" height_o="1360" src_o="http://payload23.cargocollective.com/1/0/13708/2778856/party_o.JPG" data-mid="14599700" border="0" align="left"/> Measuring the thread left on each spool on a bike wheel to reveal the winner of the challenge. A little glimpse of tracking a ride See behind the scenes from the bike challenge, and read more about the efforts Carrie and I are making to get people on two wheels on our thesis blog: leatherducking.com http://portfolio.dietrovetro.com/Exploring-Europe http://portfolio.dietrovetro.com/following/portfolio.dietrovetro.com/Exploring-Europe Fri, 20 May 2011 12:56:54 +0000 DietroVetro 1473908 Assignment: Final project Class: Prototyping User Experiences (Spring 2011) Instructor: Nicholas Felton Context: MFA in Interaction Design, School of Visual Arts, NYC Deliverable: Exploring Europe (visualization made in Processing) I never traveled outside of Europe until I started grad school at SVA. And as most Norwegians, I am quite obsessed with traveling further south to get enough of that treasured sun that hides from us all winter. I decided to make a visualization of all my travels abroad, how I traveled, and for how long I stayed in each location. To fill the 130 rows in this spreadsheet required a lot of work both for me and my family! <img src="http://payload.cargocollective.com/1/0/13708/1473908/vacationdata.png" width="670" height="402" width_o="992" height_o="596" src_o="http://payload.cargocollective.com/1/0/13708/1473908/vacationdata_o.png" data-mid="7192093" border="0" align="left"/> I ended up creating a map with animations in Processing to show all the European countries I've conquered since birth until I jumped on the plane to get to know America. To spice it up, I added a few memories from the trips too. <img src="http://payload.cargocollective.com/1/0/13708/1473908/ExploringEurope-8.png" width="670" height="443" width_o="1063" height_o="703" src_o="http://payload.cargocollective.com/1/0/13708/1473908/ExploringEurope-8_o.png" data-mid="7191939" border="0" align="left"/> See the visualization in action here (Safari and Firefox work better than Chrome) http://portfolio.dietrovetro.com/Helmet-Head http://portfolio.dietrovetro.com/following/portfolio.dietrovetro.com/Helmet-Head Thu, 24 Feb 2011 06:29:12 +0000 DietroVetro 1098014 Assignment: Create a networked, mobile, or interactive installation that uses sport tracking data to improve the experience of either biking, running, or walking in NYC Class: Design in Public Spaces (Spring 2011) Instructor: Jill Nussbaum Context: MFA in Interaction Design, School of Visual Arts, NYC Group: Allison Shaw, Carrie Stiens, Tina Ye, Kristin Breivik Background New York City streets are congested with traffic, and the subways are over-crowded. Our goal with this project is to get more people biking for transportation. We believe Helmet Head can contribute to getting the casual biker to overcome the initial barriers to biking in the city. <img src="http://payload.cargocollective.com/1/0/13708/1098014/ConceptMap.jpg" width="670" height="373" width_o="1203" height_o="671" src_o="http://payload.cargocollective.com/1/0/13708/1098014/ConceptMap_o.jpg" data-mid="5290313" border="0" align="left"/> How it works Tips from seasoned bikers, weather reports, traffic data and bike lanes all go into the Helmet Head database. When the user inputs desired destination into the Helmet Head app, it suggests routes with different levels of safety. After choosing a route, the app can be put in the user's pocket, where it will quietly track the user moving through the city. The user can concentrate on biking, while letting the helmets embedded headset give directions, encouragement, progress and tips. http://portfolio.dietrovetro.com/CabReel http://portfolio.dietrovetro.com/following/portfolio.dietrovetro.com/CabReel Thu, 24 Feb 2011 05:48:01 +0000 DietroVetro 1097912 Assignment: Create a user journey that explains a service concept using video Group: Erin Moore, Catherine Young, Kristin Breivik Class: Prototyping User Experiences (Spring 2011) Instructor: Robert Fabricant, Jeff Hoefs, Josh Musick, Clay Wiedemann Context: MFA in Interaction Design, School of Visual Arts, NYC Blog post about the case: CabReel The screens inside the NYC cabs are intrusive and often ignored because they do not present information in ways that are relevant to passengers. CabReel is a new screen concept that relays specific location-based information. It will give passengers new ways to discover the sights, restaurants, cafés and shopping facilities in New York City’s many neighborhoods. We explain the concept through a user journey made entirely out of paper: This video is the third in a row of videos about Emily using CabReel. It is definitely the most successful one when it comes to storytelling. Still, I like to see how our video evolved over the course of a few weeks. It started out as a simple screen by screen walk-through, but ended up as a love story where Emily is the heroine, and CabReel her little "helper". Here are our first two videos: CabReel v.2 CabReel v.1 http://portfolio.dietrovetro.com/MoMENT http://portfolio.dietrovetro.com/following/portfolio.dietrovetro.com/MoMENT Sun, 20 Feb 2011 22:59:32 +0000 DietroVetro 1082689 Assignment: Create a smart phone app for the visitors of the Museum of Modern Art Class: Research methods (Fall 2010) Instructor: Alex Wright Context: MFA in Interaction Design, School of Visual Arts, NYC. Blog posts about the case: Introduction/overview, (I) Analysis, (II) Concept, (III) Prototype Our goal was to create a smart phone app for the visitors fo the Museum of Modern Art, and to go through a wide spectrum of research methods while refining our concept. <img src="http://payload.cargocollective.com/1/0/13708/1082689/sva-moment-analysis.jpg" width="670" height="446" width_o="670" height_o="446" src_o="http://payload.cargocollective.com/1/0/13708/1082689/sva-moment-analysis_o.jpg" data-mid="5200393" border="0" align="left"/> Analysis: We did observations at the MoMA and gathered and structured our findings by using KJ Analysis. We also developed personas. Read more about this part of the process. <img src="http://payload.cargocollective.com/1/0/13708/1082689/sva-moment-concept.jpg" width="670" height="430" width_o="670" height_o="430" src_o="http://payload.cargocollective.com/1/0/13708/1082689/sva-moment-concept_o.jpg" data-mid="5200395" border="0" align="left"/> Concept: We brainstormed, sketched, and struggled to choose the very best idea. We ended up focusing in on the parts of our findings from the analysis phase that related to engaging with the art works, and the urge to document and share the experience. This lead us to the concept MoMENT - an app to help you remember and share moments in the museum. Our idea is that sensors will locate which artwork the visitor is closest to, and automatically give information about it to through the Art View on the phone. With the click of a button, the visitor can add pieces of art to his/her own art list (My MoMA), and add a comment. All visitor actions will be aggregated and visualized in the Our MoMA view to make each visitor feel like they’re part of a larger whole, and give them a sense of community. Read more about this part of the process. <img src="http://payload.cargocollective.com/1/0/13708/1082689/sva-moment-paperprototype.jpg" width="670" height="503" width_o="670" height_o="503" src_o="http://payload.cargocollective.com/1/0/13708/1082689/sva-moment-paperprototype_o.jpg" data-mid="5200406" border="0" align="left"/> Prototype: We created wireframes, a low-fi paper prototype, did usability testing on location, and refined our prototype based on the findings. Read more about this part of the process. Reflection. For me it was a new experience to generate concepts while being focused on the user perspective, while not getting any input from the client side. However, all groups presented our concepts to representatives from MoMA on the final day, and it was great to get the MoMA’s perspective on our concept. It was very interesting to hear that they already had thought of many of the ideas that the groups presented, but because of other constraints (budget, technology, the architecture of the building etc.) developing such apps is not necessarily feasible just like that. It’s wonderful being a student and just come up with ideas without having to think about all these constraints. At the same time, I would definitely have researched the business and technology aspects further before prototyping too much, if I were to develop such a concept in “real life”. I agree with the MoMA panel that a concept involving some new, innovative technology has to work well – it can’t let the user down. Ever. Which means that our sensor idea definitely would have to be tested further to be sure it would be helpful rather than frustrating for the app user. http://portfolio.dietrovetro.com/How-to-take-Kristin-out-for-dinner http://portfolio.dietrovetro.com/following/portfolio.dietrovetro.com/How-to-take-Kristin-out-for-dinner Sun, 20 Feb 2011 21:25:07 +0000 DietroVetro 1082396 Assignment: Create a functional specification for a human being (the “Human”) doing something involving interaction with another person or people (the “Users”). Class: Fundamentals IxD (Fall 2010) Instructor: Chris Fahey Context: MFA in Interaction Design, School of Visual Arts, NYC Blog post about the case: How to take Kristin out for dinner Deliverable: How to take Kristin out for dinner - specification (pdf) <img src="http://payload.cargocollective.com/1/0/13708/1082396/sva-flowchart.jpg" width="670" height="571" width_o="670" height_o="571" src_o="http://payload.cargocollective.com/1/0/13708/1082396/sva-flowchart_o.jpg" data-mid="5198871" border="0" align="left"/> “Design a human!”, the instructor said. Right. More specifically the challenge was to make an extensive functional specification for a specific human being. How does this human work, and how do the people around this human (the users) experience him or her? The approach I chose to put myself in the position of the human. Was my intent to save some time in the research phase? Possibly. As it turned out, soul searching is not done in a minute either. And knowing too much about someone’s behavior can also be a curse when trying to fit everything into a neat model on a page or two. I care deeply about food and the experience around food; where to eat, what to eat, how food is best served, and how to eat it. As I am particular about these things, I figured this rigidity could work well in a flow chart. Trying to put myself in my friends' shoes was also a good exercise – to imagine how they experience making dinner plans with a food snob who has a hang-up on Italian food, authentic experiences, and that truly believes everything tastes better when using both knife and fork. I also took the liberty to articulate their point of view through made-up quotes related to the dinner experience: <img src="http://payload.cargocollective.com/1/0/13708/1082396/sva-flowquotes.jpg" width="670" height="401" width_o="670" height_o="401" src_o="http://payload.cargocollective.com/1/0/13708/1082396/sva-flowquotes_o.jpg" data-mid="5199413" border="0" align="left"/> The outcome No sane person truly acts as rigid as a one page flow chart when going out for dinner with a friend. That’s why I created three pages of flows and models, divided into the subprocesses: 1. Decide on place to eat 2. Decide on transport 3. At the restaurant I also had to take some short cuts, and suppress some of my flexible nature in interaction with others, just to get through the exercise. The flows still portray my core logic and inner motivations, and how this might conflict with those friends that have another perspective on food and the restaurant experience. Although I have a lot of experience in creating flow charts when designing various systems, this is the first time I had to explicitly analyze a persons behavior in this way. Understanding people’s goals, desires, and their complex behavior, is important as a UX designer. These insights into the human nature could not only translate into designing products and services that serve the user better simply because we know the user better, but could also inspire us into thinking of the product or service we are desigining as a human – striving to give it human like qualities like flexibility, empathy, humor and so on. Would you like to act as me for a night, being all picky about restaurants, and eat lots of blue cheese? Or do you just wonder how you should take me out for dinner in a way that makes me very happy? Study these flow charts: How to take Kristin out for dinner.pdf Disclaimer: No friendships were harmed when this project was posted online. In fact, all friends portrayed “liked” it on Facebook. http://portfolio.dietrovetro.com/TWIN-KNIT http://portfolio.dietrovetro.com/following/portfolio.dietrovetro.com/TWIN-KNIT Sun, 20 Feb 2011 20:35:52 +0000 DietroVetro 1082246 Assignment: Develop a business concept for an interactive product/service Class: Strategic Innovation in Product/Service Design (Fall 2010) Instructor: John Zapolski Context: MFA in Interaction Design, School of Visual Arts, NYC Blog post about the case: TWIN // KNIT Deliverable: TWIN//KNIT business concept presentation (pdf) TWIN//KNIT is a not-for-profit with the mantra: one knitwear sold, one knitwear donated to poor people. The production of knitwear is outsourced to the eager knitters out there through knitting challenges based on patterns provided by knitwear designers. <img src="http://payload.cargocollective.com/1/0/13708/1082246/sva-twinknit.jpg" width="670" height="414" width_o="670" height_o="414" src_o="http://payload.cargocollective.com/1/0/13708/1082246/sva-twinknit_o.jpg" data-mid="5198243" border="0" align="left"/> By extensive use of social media, and by partnering up with knitting communities online and offline, the TWIN//KNIT name will soon be known as the go-to place both for socially conscious knitters and consumers in need of hand knitted, woolen delights. For more about the TWIN//KNIT concept, read the blog post: TWIN//KNIT http://portfolio.dietrovetro.com/Personified-chair http://portfolio.dietrovetro.com/following/portfolio.dietrovetro.com/Personified-chair Sun, 20 Feb 2011 20:01:20 +0000 DietroVetro 1082106 Assignment: Final project Group: Benjamin Gadbaw, Adjoa Opoku, Allison Shaw, Kristin Breivik Class: Physical Computing (Fall 2010) Instructor: Rob Faludi Context: MFA in Interaction Design, School of Visual Arts, NYC Blog post about the case: Personified chair <img src="http://payload.cargocollective.com/1/0/13708/1082106/sva-chair-rufus.jpg" width="670" height="449" width_o="670" height_o="449" src_o="http://payload.cargocollective.com/1/0/13708/1082106/sva-chair-rufus_o.jpg" data-mid="5197785" border="0" align="left"/> This project was about getting a chair to talk. That meant finding the right physical chair, the right voice, the right script, the right logic for when to say what, and the right story to frame the chair personality. Because I had donated my chair to this project, I got to tell the story about how we got to know each other. At 4AM the night before the presentation. Yay! Read more about how we got the chair Rufus to talk on my blog: Personified chair