Finding Visual Inspiration

December 19th, 2011 by Katie Koch | No Comments | Filed in Teaching

Carmen and I translated the students’ post-it note wireframes into low-fidelity wireframe drawings. We presented the drawings back to them for review. It was tough to have our work critiqued by the students! They had great questions for each page: “Why is this here? Do we need to have it?” and “This page looks weird. Let’s change it.” We were proud to see our students turning a critical eye to their and our work, and it was exciting to see their reactions to a near-complete project.

After we received sufficient feedback we transitioned into a visual exploration exercise.

To introduce visual design concepts we first gave a (very!) quick lesson on typography. With a few basic principles in mind, we asked the students to dig through the pile of books and magazines we brought to find examples of interesting typography. The visual materials were a great platform for sharing ideas and talking about what they do and don’t like.

We repeated this exercise with hierarchy and layout concepts. Again, they hunted for interesting visual content and were able to easily share what they did and did not like about the designs. After each example we talked about how the concepts might be relevant to our Project GROW website. The girls were easily able to make connections between the magazine content and the ideas they had in their heads.

Our last exercise was about color. For inspiration, we showed them Color Index and again asked the students to find some magazine examples with great colors. Not surprisingly, they chose a lot of bright, exuberant colors. They liked the idea of adding in a lot of vibrancy and using a rainbow of options in the color palette.

The students left class with plenty of ideas in their heads for what the site might look like. We’re excited to see where the visual design goes in the coming weeks!

Tagged with: , , , ,

The Elements of a Conversation

December 18th, 2011 by Katie Koch | No Comments | Filed in Teaching

We began our November 21 class with one question: “What does a conversation look like?”

I showed a few examples to the girls, who began to consider what the differences are between having a conversation with someone on Facebook (using comments and likes) versus a Twitter conversation, where we show our admiration by following and retweeting the words of others. Many of them had never considered that there are patterns in the way we communicate online, and most had never thought about how we might begin to design such a thing.

We did a quick brainstorm session to define all the places online where we have conversations. The obvious answers came out first: Facebook, Twitter, email. As we dug deeper into our storm, the girls came up with more places where conversations happen: YouTube, Tumblr, blog posts, SMS, Skype.

The girls paired off to sketch out what a conversation “looks” like. I asked them to draw all the elements of the page that help a person know how to begin or continue a conversation. Through all their sketches, we realized the important elements are always the same: Text box, reply/send button, user name, and avatar.

Halfway through the exercise one student raised her hand and boldly asked,

“Ms. Katie. What does this even have to do with the website we’re designing?”

Great question! I polled the class for a good answer and one girl replied,

“It’s because we want people to interact with our site. And we have to learn how to get them to do that.”

After they sketched a conversation, I asked them to act out the context around a conversation. One student gave a compelling performance showing how the Blackberry Messenger might be used to flirt with a boyfriend or share stories with friends. Mosi and Bibi gave a great skit showing how a new friend might be contacted using Facebook.

This class was designed to give the students a break from thinking too deeply about their wireframes. It ended up being a great learning experience and a good diversion from the website production process.

Tagged with: ,

A Deep Dive Into Structure & Content

November 18th, 2011 by Carmen Dukes | 1 Comment | Filed in Teaching

Great to Be Back

This was my first class since the start of this semester of Project: Interaction. It was great to see some of our students from last year as well as meeting all the new students. Equally awesome was being back at UAI and teaching in tandem with Katie. We were jetlagged from our trip, but excited about another week with our students.

You Went Where!?!?

Katie and I opened the class talking about our trip to Hong Kong. The girls were curious, asking questions about why we went and what sightseeing we did.

Deeper Dive

We started the class revisiting the sitemap the girls had architected last week. We talked through each section and determined the different types of goals users of the site would have. We identified a good set of goals from “Applying to Project: Grow” (Student), to “Checking Attendance” (Parent), to “Updating Class Information” (Teacher).

From there, we challenged the girls to create user stories for how a teacher, student or parent might use the website to accomplish one of the goals we identified. We encouraged them to sketch out all parts of the experience – how the user found out about the site, how they navigated the site and the steps they took to achieve their goal. Katie gladly gave a demonstration of a quick storyboard before letting the girls go off to create their own.

We wanted the girls to sketch quickly, but it didn’t work out that way. They spent more time on the aesthetics of the storyboard, then the story itself. I think this is partially because they have few opportunities to get creative with markers, crayons and colored pencils and such.

The girls presented their storyboards and we were really impressed. Most had great narratives of how a user would navigate the site. One even included the offline interaction that would lead to finding out about the Project: Grow website. A great teacher moment for us.

In a future class, I would like to revisit creative stories and narratives. While some girls got it right away, others simply drew storyboards of one screen to another, leaving out the most important part: the user. Maybe I’ll share some of my favorite comics and an excerpt from Scott McCloud’s book, Understanding Comics, in the next few weeks.

We finished up the class, asking the girls to create a paper prototype of one page from the site. In teams of two, the students used different colored post-it notes to represent the various content types. They were more excited to share these than the storyboards; maybe because this activity was more tangible than the previous one.

While the girls were working, Katie and I revisited the original “brief” we received from the after school program directors. While the girls had nailed most of the work, we realized we may need to include more content just for the girls, as one directive we received was that the site needed to be “girl-friendly.” To that point, we are also missing the social part of a web experience so we will need to talk to the girls about how that can be incorporated into the site. I’m not sure how social they are online, although one of our students mentioned the need for comments on the web.

No Sitting…Or Very Little of It

The girls sat at their desks most of the class and it definitely affected the energy level in the class. We have to remind ourselves that our students have been sitting all day and incorporate “think on your feet” activities to keep them engaged.

We Need More Sketchbook Volunteers

I would really like to see all the girls jumping out of their seats to share their sketchbooks. And I hope to experiment in the next few weeks with some creative ways to motivate them to sketch and share. I’m thinking some kind of game or competition. More thoughts on this to come…

More Surprise

Katie and I are thinking of creating a set of five or so buttons specific to this project. At the end of class, the girls who participated last year asked if we had any new buttons. So we think it would be a nice to include a special set for this class as well.

Next Week…

We are still planning next week’s class, and hope to include some activities that give the girls an understanding of how web pages work. We also hope to come up with a few activities to make the overall project seem more tangible. Briefly we’ve been thinking about making their efforts appear more 3 dimensional and tangible by representing the building of a website and related interactions with blocks, food, or people.

Tagged with: , ,

Turning Research Into Concepts

November 16th, 2011 by projectinteraction | No Comments | Filed in Discovery, Teaching

From our third teacher, Abby Covert:

In our third class, we started by discussing what makes up a website: Content and Structure. As a group we discovered we needed to decide the content (at least broadly) in order to get to the structure, and I introduced the tools of sitemaps and wireframes to the girls.

For our first exercise, the girls – armed with their research – started by brainstorming the types of content and features they could see on the website. We took turns sharing our ideas and each girl would cluster her ideas near those similar that had been already shared.

We started to see big buckets emerging quickly around:

  • A section to introduce the program
  • Staff bios and pictures
  • Class schedule and Descriptions, photos, videos
  • Contact Us page
  • A logged in area for students, teachers and maybe parents
  • An area to talk to potential donors

Most surprising was how well the girls knew the language of the web already, having deep but quick conversations about specifics like including a “privacy policy” and perhaps having an “intro animation.” And of course “Forgot Password.”

Creating Form from Structure

After a quick tutorial on sketching interfaces for websites each student chose 3 ideas to draw out and share back to the group. Anxious to get markers in their hands to see what came out, I was excited to see that their ideas were well formed, detailed and thoughtful.

Next we all drew what we thought a home page might look like. They talked about what ideas they liked and didn’t like from each representation. Then someone asked:

“How do we decide what the top sections are, cause ours are all different.”

I knew they were ready to make a sitemap. Armed with all our pictures and post-its filled with content and feature ideas we started to sort them into buckets and fill out our first draft of a sitemap.

When we finished assembling our map, one girl asked:

“What about colors and the logo – we all came up with those too so why isn’t that on the sitemap?”

What a great opportunity to talk about the difference between content and form! They quickly grasped this concept and all agreed the visual design must wait until we are sure of the content.

Our class ended with the girls getting excited for the challenges that lie ahead, but nervous about making everything really happen. Turns out even teens get stressed during discovery. ;)

More to come… one week at a time!

Tagged with: , , ,

“I have so many questions!”

November 15th, 2011 by Katie Koch | No Comments | Filed in Discovery, Teaching

In our second week of class we asked our students to begin user research for the website we will create. We wanted to teach them the importance of both on-site observation and individual interviews and asked Odette Nemes, Project GROW coordinator, to visit our class as our first interviewee.

The girls prepared a list of questions for Odette, carefully considering how her testimonial might help them in their quest to design the program’s website.

  • What is Project GROW?
  • How did it start?
  • Who are the “users”?
  • What does Ms. Odette do?
  • Who else works here?
  • How do you apply? How do you get picked?
  • Why did you start this?
  • What information does a site need? Is there a site today?

A short clip from our session with Odette:

After our interview, Abby and I broke the girls into two groups to go and observe some of the after school classes in action.

Abby’s group was disappointed to find they weren’t welcome in some of the classes where they tried to observe. It’s a great lesson for a young designer to learn that outside observers are not always welcome, even if they have worthy intentions.

From their interview with Odette, the students realized the vast selection available to them as students in Project GROW. We wanted to get a good sampling of the classes and observed soccer practice, a science lab class, a self esteem course and a dance class. The students were eager to take a lot of photos and video of each class. They were focused observers, with a sense of importance for the duty of observing and capturing each class.

At the end of class we asked each girl to capture their observations with a drawing. They drew a variety of stories and experiences, told from many different perspectives. At the end the girls were quite happy to share what they had learned!

At the end of our session, they all asked that we do more interviews following the observation. “It’s good that we got to watch everyone, but now I want to talk to them! I have so many questions to ask!”

Tagged with: , ,

We’re Going to Dublin!

October 25th, 2011 by Katie Koch | No Comments | Filed in Speaking

Just announced last week, we’ll be heading to Dublin, Ireland for the Interaction12 conference in February. We’ll be giving a new talk: People ARE Software: The Story of Project: Interaction.

More details to come soon!

Our Second First Class

October 25th, 2011 by Katie Koch | No Comments | Filed in Programming, Teaching

This fall we’ve teamed up again with the Urban Assembly Institute for Math & Science for Young Women in Downtown Brooklyn. They were such an incredible partner school last fall we’ve decided to continue our relationship with them.

This time around we’re making a website! The girls all participate in an after-school program through Girls Inc. of New York City. Girls Inc is a nonprofit organization that inspires all girls to be strong, smart, and bold. At UAI the students participate in a specific division called Project GROW. Having been around for two years, it’s time  for this small but mighty organization to have a web presence.

Before our class began we vetted the project by speaking with Odette Nemes, Director of Project GROW to make sure we’d have enough work for the girls. From Odette:

I would like to see them make a website that’s more girl friendly, not something for the parents or teachers, but for the girls to use.

In our first week we asked the girls to introduce ourselves to us through a short video interview. (Unfortunately they’re all a little Vimeo-shy so we’ll just keep those to ourselves!) We asked them to share the most beautiful thing they’ve seen recently, a great way to break the ice into talking about design.

For the rest of class we talked about what design is, and dissected what interaction design is. We made a HUGE list of the things we use the internet for and talked together about how and why design might be important to those tasks.

Then, we dove into the meaning of words. We did an iteration of Graphic Jammin’ around some words that we think are important to website designers: community, emotion, social, and communication.

We ended the class by handing out new sketchbooks to the girls, encouraging them to decorate and take ownership of their thoughts and drawings there.

Tagged with: ,

Introducing Abby Covert

October 25th, 2011 by Katie Koch | 1 Comment | Filed in Design, Interviews

Carmen and I are both working full-time this fall and doing a bit of traveling to talk about Project: Interaction around the world. We’ve brought on a third teacher to lend a hand (and a brain!) in the classroom.

Please meet Abby Covert, who has been a tremendous help already in our first two classes. We’re looking forward to Abby teaching our next class on research while Carmen and I are off speaking in Hong Kong.

More about Abby on her website.

Tagged with: ,

We’re going to Hong Kong

October 25th, 2011 by Katie Koch | 2 Comments | Filed in Speaking

Carmen and I will take a week off in November to jet over to Hong Kong for the International Conference on Interaction Design. We’re thrilled about the opportunity to present our paper, New Methods: Framing an Interaction Design Class to Play a Complementary Role in Core Curriculum to a global audience and begin to stimulate a conversation around the need for interaction design education in schools.

Personally, I’m really excited to see this great line-up of international speakers, too!

Tagged with: , ,

Explore Interaction Design at the High Line

July 19th, 2011 by Katie Koch | No Comments | Filed in Curriculum, Discovery, Teaching

We’re teaching a three-day workshop this week at the Cooper-Hewitt, National Design Museum. We’re excited to lead 25 NYC high school students on an adventure to discover why and how we share our experiences in a digital world. We’ll be investigating technology from the past and present, and dreaming up new ways to use lo-fi solutions and mobile technology to design experiences for the future.

The Challenge

Your friends are visiting from out of town and they really want to go to the High Line. Too bad you’re stuck at your summer job and can’t go with them. Create an interactive experience that makes them feel like you’re right there with them.

We’re taking a field trip to the High Line tomorrow so the students can better understand the experience of visiting such a place. More to come this week!

For more, check out the Cooper-Hewitt’s write up and our story over at SVA’s Visual Briefs.

Tagged with: , ,