Archive for the ‘Teaching’ Category

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!

Tags: , , , ,

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.

Tags: ,

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.

Tags: , ,

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!

Tags: , , ,

“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!”

Tags: , ,

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.

Tags: ,

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.

Tags: , ,

The Home Stretch

December 6th, 2010 by Katie Koch | No Comments | Filed in Curriculum, Teaching

Final Project Assignment

After 8 weeks of small lessons we wanted to set up a lengthier final project that would last during our remaining two classes. We sat down and reflected on what we’d already taught the students, and thought about what we wanted them to get out of the final lessons. We came up with a short project description and created a project packet that would help guide them through the work we had planned, while also explicitly outlining the design process that we wanted them to learn.

Project: Interaction Design Challenge

In a team of 3-4 people, choose a problem you’ve observed or experienced in New York City. You may choose from our list of suggestions, or think of your own ideas.

• Long lines…everywhere!
• Getting students and teachers to use the school’s green space courtyard
• Signage, or lack thereof
• Classroom of the Future
• Access to fresh fruits and vegetables
• Something else?

Output

Create a poster and narrative in a format that best tells the story of your problem and solution. Consider the use of writing, comics, photos, video and more in your plan. While finding a solution to the problem is ideal, the most important thing is to fully investigate the problem and be able to clearly communicate your findings to the group.

We simplified it as much as possible, breaking it down into Discover, Design Concepts, Solutions and Refined Sketches, and a section called Tell the Story. Our goal was to have them thinking about some research, sketching a lot of solutions, talking to each other a lot, and coming up with a couple directions to pursue.

What Actually Happened

When we arrived in class we learned that the tenth graders were on a field trip that day, and we were left with only seven of our students. We were very sad with half of our favorite students being absent! It turned out to be just fine in the end. We were able to split the girls up into two groups and Carmen and I each worked with a group. It worked out really well for each of us to guide them through the process we’d outlined, and in our short time frame for the work, I’m not sure it would have been as successful without our one-on-one leadership.

Tiny class!

The Projects

Not surprisingly, both groups of students chose the topic “Classroom of the Future.” It’s something they’re familiar with, and something they can see and touch in front of them so it’s easier for them to imagine how it might be different.

My group decided to focus on re-imagining the blackboard. They identified a wide list of problems with the existing set up, including the teachers’ bad handwriting, the lack of organization and cleanliness around the board, and the general lack of optimization around its usage. They felt like it could be better.

Dominique with post-its

After we listed out all the problems we came to the board and wrote on post-it notes to identify who our users were, and also the objects and spaces that are used around the blackboard. From that launching point we sketched out about 10 ideas for possible features that a “better blackboard” could have. They ended up imagining a homework exchange system that allows students to submit homework to the board, which sends it to a centralized collection and organization area, where teachers can grade it and return it through the board. They even got to do a quick interview with one of their teachers to learn about her collecting and organizing habits.

Pre-sketch

At the end of the session I was so so pleased that they had thought about and designed a whole system for homework. They weren’t just thinking about the input, but also the output of the system and how everything would get back to the beginning. I asked them to construct a system map to articulate what they’d come up with. Of course I got blank stares. I explained to them that a system map is an important piece of the puzzle. It helps people understand what they’re talking about, and also helps them understand all of the pieces of the system they’ve designed. Almost like a test for their idea; if all the pieces fit into the loop then it’s a complete system. (Just like in a chemical equation!)

System map

I can’t pretend that I played it cool. My little design teacher heart was beaming when they ended the first day with their first pass at a systems diagram.

For This Week

I’m really excited to see these project ideas finished, and I can’t wait to have the 9th graders from last week present their work to their peers. I think the final critique will be a nice reflection about where we’ve come this semester and for some students it may be a launching point for where they will take it next.

Tags: , ,

A Visit from Transportation Alternatives

November 22nd, 2010 by Katie Koch | No Comments | Filed in Programming, Teaching

Last week we were so excited to welcome Julia de Martini Day from Transportation Alternatives! We’ve been working with Julia over the past few months to develop a lesson that would be meaningful to our class of students. We wanted to structure the lesson to include many of the skills we’ve used so far: things like sketching, brainstorming, problem and solution definition, and refinement and presentation. That sounds like a lot of stuff to cram into one lesson, but our students are getting used to quickly thinking through ideas!

Julia began the lesson with a presentation about safe streets and what it means to engage in healthy living in an urban area. It was really interesting to see where each student stood in our “human barometer” test at the beginning. Most were in the middle between agreeing and disagreeing with the statement, “The best way to stay healthy is to walk and bike around my neighborhood.”

Human Barometer

Julia did a wonderful job explaining the mission and goals of Transportation Alternatives to our students. She put activism in terms that were easy for them to understand, like describing protests: “Sometimes the people in charge don’t listen to us, so we get a lot of people together who can talk really loudly together!”

For the rest of class, we all looked at the intersection of Jay St. and Tillary St. near the students’ school. Many of them cross this dangerous intersection each morning to get to school. When Julia asked them to sit down and talk about the problems with the intersection they had no trouble coming up with a ton of ideas.

Group Work

After each group defined a set of problems, they focused on one problem that they could attempt to solve. We asked them to come up with a quick solution and sketch it, either on the map we provided them, or on a separate sheet of paper.

At the end of class, each group presented their ideas. Not surprisingly, there was a lot of overlap in the problems each group defined. It was really exciting for us to see how thorough they were in their definition of the problems in the space.

Presenting projects

Problems/Solutions

Our Reflection

This was a tough week for us in class. Carmen and I are feeling the strains of our own course load increasing near the end of the semester, while also working with students who are feeling the pressures of their semesters coming to a climax. And, as much as we valued the lesson from Transportation Alternatives, it occurred to us after class that teenagers may have trouble grasping the value of the message “don’t drive, use alternatives instead.” They’re right at the age where they are dying to get a car and drive, and the idea of voluntarily not having one may have been lost on them!

Tags: , , , ,

High School Stories

November 15th, 2010 by Katie & Carmen | No Comments | Filed in students, Teaching

We had a bit of excitement in class this week! We invited two of our friends to visit our class and tell our students about what they do for a living.

As usual, we started class by asking students to share their latest sketches in their Moleskine Sketchbooks.

What’s your story?

Rachel Abrams started by telling her story. She began with a career in geology, then studied policy and lawmaking before transitioning into her work as a designer. She has a wonderful way of talking about the apparently unrelated events of her life story in a way that makes it logical that each should lead into the next. The girls absolutely adored her, especially her English accent!

Prior to Rachel speaking, we asked the students if they knew what a design strategy consultant does. One of our students, Tessa, brilliantly described the role and we were happy knowing that we had something to do with that.

We asked the students to take notes on post-it notes during the presentations. They were able to create pretty complex little thought sketches during the time they were listening.

Our second guest was Matias Corea, a graphic designer and co-founder of Behance. We were so excited to have Matias join us! He started his story by pointing out everything in the room that has been touched by a designer. He talked about his evolution from being a terrible student, not into math or English or anything else, to transforming into an excellent and motivated individual through design. One of our girls wrote on a note, “He was destined to design.” If you have a conversation with Matias, you will immediately see his passion for design. We’re so happy he could bring that to our class!

(Special thanks to our guests for speaking, and for being flexible with our lack of technological accommodations!)

Interviews!

During the beginning weeks of Project: Interaction, we discussed ways for the girls to get to know each other. Since we have a mix of 9th and 10th graders, it is likely that the girls don’t have classes together throughout the day. We thought it was important to give them an opportunity or two to get to know each other and possibly dispel any assumptions they may have about their fellow classmates. Interviewing seemed like the best activity to do so. So for the remainder of class we randomly paired the girls up and asked them to interview each other using a set of five questions.

If you had a million dollars what would you do with it?
What’s the most embarrassing thing that happened to you at school?
What do you want to study in college?
If you had a superhero power what would it be?
Name your most recent act of kindness?

We then asked them to choose the most interesting response and tell a story about it. We encouraged them to tell stories in different ways, and they took our challenge! One student performed a skit, a few drew a comic strip about their story, and one student wrote her story.

At the end of class we asked them to present their ideas, with commentary from our guests. We can definitely see how they girls have improved over each class. They are becoming more confident in their ideas, eager to sketch and draw their thoughts, and have continued to develop their presentation skills. We are so excited to see how far they have come since our first class! It is also always great to see the girls support each other and give positive feedback during these very quick presentations.

Next week we’ll be kicking off our final projects with a workshop with Transportation Alternatives. We’re really excited to see our students put all their new skills to work!

Tags: , , , ,