Leslie
Posts by Leslie
k
MIT 4.s02: Information Design

Last month, all of us here at Fathom were busy wrapping up 2016’s projects, not the least of which was our second consecutive semester teaching Information Design: Exploration, Navigation, and Understanding.

In its final incarnation before being integrated into MIT’s D-Minor curriculum as a required course, the Fall 2016 section was taught as a graduate workshop. Just like last semester, we had a diverse group of students from the Media Lab, Computer Science Department, SA+P, and the Sloan School of Management, and we divided the semester into four main projects, each of which covered a different aspect of the subject material:

  • introduction to design and p5.js with clock faces
  • context of use with a weather application for mobile
  • finding a story within census data
  • tying everything together with a “choose your own adventure” final project

These assignments run the gamut from very directed at the beginning of the semester to very open-ended at the end of the semester. The census and final projects consistently reveal that some students thrive in the open-ended environment, while others struggle to find direction and manage their time. However, regardless of their learning style, all students deserve the support they need to learn effectively, so this Fall we began exploring different ways of guiding the students through the course and projects. Although the final deliverable for each of the assignments was largely the same as last semester, we directed the students in a different way. This provided them with a bit more support, and gave us the opportunity to focus on the didactic qualities of process and iteration. To demonstrate, here’s the evolution of one student’s final project, from conception to completion over the course of six weeks.

Xinhui Li (final project)
Xinhui Li (final project)

During the first week, Xinhui Li, along with the other students in the class, settled on a project idea and story. This semester, we asked the students to identify four candidate datasets that they would like to use, one for each of the following categories:

  • Personal: some type of personal data that you’ve collected
  • Research/class: information design questions around your research, other classes, or thesis
  • Explanation: a complex idea that’s data-centric, and make sense of it
  • Curiosity: finding a data set that you think is interesting, and telling us a story about it or providing people with a way to explore it

This helped students fully consider the story that their final project would ultimately tell, without becoming overwhelmed by the coding challenges. Xinhui suggested using her Hubway activity for the Personal dataset, land reclamation projects in China for the Research dataset, topics surrounding national unemployment in the US for her Explanation dataset, and transportation habits in a sharing economy for her Curiosity dataset. After presenting her ideas and gauging interest from the other students and instructors, she decided to pursue the topic of land reclamation in China.

Once students had decided on an idea, they were given a week to collect and parse data. Data parsing is a challenging, but extremely important, aspect of information design, and we again wanted students to focus on this crucial stage of their project without being distracted or overwhelmed by the other stages. Xinhui’s first p5.js sketch didn’t actually draw on the canvas at all. Rather, it printed to the console to demonstrate that her program could load and internally represent the data she wanted to use.

XinhuiParse

The next two weeks were spent creating an initial visual representation of the data. At this point, we asked students to provide paper sketches alongside their code, to encourage them to occasionally step away from the computer and consider the overall design and ultimate goal of their final project. After Xinhui sketched out her visual ideas on paper, she had a template she could follow to guide the layout of her first p5.js sketch that used the canvas.

The initial representation demonstrated Xinhui’s ability to incorporate the map, data, and icons that she had gathered for her project, but there were a lot more refinements that could be made in the two weeks before the assignment was due. At this point, we began to shift our focus toward design and interactivity, helping students refine and iterate on their initial representations.

Xinhui’s second design iteration implemented the timeline that she had drawn in her paper sketches, added a title to give the piece some context, and changed the scroll behavior so that the map always remains visible in the browser window.

For her third iteration, she implemented more of the functionality from her paper sketches, adding satellite images and detailed information about each item in the list. Demonstrating her understanding of hierarchy in information design, she designed the list items to be expandable and collapsable, so that the user only sees detailed information when it’s relevant. She also included a legend that reveals at a glance the intended uses of the various land reclamation sites.

XinhuiFinal3

Between the third and fourth iterations, Xinhui implemented animated transitions to further refine the user experience, redesigned her legend so that it makes better use of the space she has available, added a description of her project beneath the title, and made the list sortable so that users can browse the data more easily.

You can see Xinhui’s final project here, and a gallery of student projects here.

k
Translating Visual Ideas Into Language

Fall is here, and the Fathom office is back in full swing teaching its second semester of “Information Design: Exploration, Navigation, and Understanding.” In the spirit of the very process we teach, we took a chance this summer to do some self-reflection as instructors, iterate and refine our ideas, and update a few assignments, lectures, and activities to make the course even more engaging and informative for the students.

One of our most recent lectures involved a hands-on activity in sketching and iteration, with an emphasis on algorithmic thinking and its considerations. The instructions for the activity will probably sound familiar:

  • Students have three minutes to sketch a picture of the house they grew up in, then five minutes to write a set of instructions that another student can use to reproduce their drawing.
  • After trading instructions with another person in the class, they have three minutes to draw someone else’s house, using the instructions they received.
  • Then, they repeat the entire process. The time limits are the same, the prompt is the same; the only difference now is that the students know that they’re going to have to write instructions for the picture they sketch.

In a popular variation of this activity— commonly referred to as the “Peanut Butter and Jelly Exercise”— a group is asked to create a set of instructions for making a peanut butter and jelly sandwich, and then someone follows the instructions as literally as possible, often with hilarious results.

Photo Credit: https://mindstorms.dreschallenges.com/

Its relevance to computer science and programming is obvious, but it’s also a fun, easy, and memorable way to demonstrate effective communication, specificity in language, and the dangers of assumption, in fields ranging from construction management to philosophy. But, it stops just short of one additional important lesson, especially when teaching programming as a tool for design.

Here’s an example of the sketches from the first part of the activity we did in class:

A student first drew the image on the left (1a), then was asked to write a set of instructions (1b) to recreate that image. A different student used those instructions to produce the drawing on the right (1c). Unsurprisingly, because the student wasn’t expecting to deconstruct the first sketch into simple, reproducible steps, the left and right images look pretty different.

The second time around, the student sketched the same house (14a), but in a way that was better suited to being systematically described (14b) and reproduced (14c), and to great effect. The drawings on the left and right look much more similar this time. The crux of the lesson, though, comes when comparing the original drawings from the first and second parts of the activity.

The first drawing (1a) shows a home with a curved, corrugated roof, plants, and a courtyard with a pool. By contrast, the second drawing (14a) shows a much more technical view of the same house with no textures, few details, and only straight lines. It may be easier to write instructions for the second drawing, but that comes at the expense of the subjective qualities that make it unique and interesting.

Here’s another example.

Between the first (7a) and second (21a) round of drawings, the house loses its bricks, the driveway and bushes out front, and other details that make it personal to the artist.

This may be the most striking example— the first (8a) and second (22a) round of drawings look like they were done by two different people.

It comes as no surprise that in order to leverage the power of computation in design, we must find a way to describe visual representations of our ideas with a vocabulary that is both complete and unambiguous. The main point of this sketching activity is that people will commonly, without even realizing it, sacrifice many of the more subtle, individual, and appealing aspects of their visual ideas in order to match an existing vocabulary. Instead, we should be doing the opposite. Developing a personal language that is still complete and unambiguous, but better suited for describing our creative, individual ideas, is a big step towards using programming as a tool to push design further, rather than constrain it.


Related posts
Lights, Cameras, Action!
MIT 4.s50: Information Design
k
Girls Who Code!

This year, Fathom celebrated Pi Approximation Day one of the best ways we know how– by sharing our love of coding and technology with a visiting Girls Who Code group!

Girls Who Code is an organization that works to combat the growing disparity between men and women pursuing and employed in technology-centric careers. They do this in part by offering summer immersion programs where high school-aged girls learn about the many different aspects of computer science, and then work in teams to design and build a technology product of their choice. One of the cornerstones of this program is exposing the girls to actual tech companies, visiting the offices, and meeting the employees. For the second year in a row, Fathom has had the opportunity to host a GWC group for the afternoon, talk about our role in computer science and technology, and explain why we love it so much!

In addition to showcasing some of our larger projects, we had the girls break into groups to learn about the posters and print shop from James, the Android watch faces from Leslie, and Processing from Dylan. The Raspberry Pi photobooth– which we built using custom 3D-printed attachments and Processing— was a huge hit.

During a brief intermission between the scheduled talks and demos, Alex took the opportunity to interview some of the girls for an upcoming episode of the Especially Big Data podcast. So stay tuned for even more stories from our GWC visit, and why we think it’s great to “code like a girl!”

k
MIT 4.s50: Information Design

This week, while students across MIT’s campus are studying for their final exams, wrapping up projects and research, and getting ready to head into the summer, those of us in the Fathom office are catching our collective breath and taking some time to reflect on the amazing semester spent teaching “Information Design: Exploration, Navigation, and Understanding.”

Our course was one of three offered during the Spring ’16 semester as a pilot program for the Architecture department’s new Design Minor, which will be formally launched in the Fall. We joined the ranks of Skylar Tibbits, Caitlin Mueller, and Jessica Rosenkrantz, who taught an introductory design course titled “Understanding Design”, and Lisa Smith and Marcello Coelho, who taught “Design Objects”– a class focused on physical objects and the manufacturing process.

Students enrolled in 4.s50 were expected to learn and demonstrate the end-to-end process of sourcing data and using it to craft a compelling visual narrative. We covered topics including programming with p5.js, data analysis, storytelling, and design concepts and iteration. It was an ambitious curriculum, and our students’ skills and backgrounds varied wildly. We had both undergraduate and graduate students from the Media Lab, Architecture, Computer Science, Math, Physics, and Engineering departments. Fortunately, the common thread tying all the students together was their motivation and excitement to learn the parts of the process they weren’t familiar with.

The semester was divided into four segments, each of which centered around a different project. During the first, students designed and developed a dozen different clock faces. Many were programming for the first time, while others were just beginning to familiarize themselves with the formal process of design iteration and critique. It was incredible how much this seemingly straightforward assignment showcased the diversity of the class. In addition to the archetypal digital and analog clock faces, some designs were abstract, some told a story, some were targeted to a specific audience, and some were playful and interactive. After this two week introduction to the information design process, everyone was on more even ground and ready to dive into the next segment of the course.

The second project had students create two representations of the weather– one abstract and one literal. Building on skills and concepts learned during the clock face project, this assignment began to introduce more advanced programming and design principles. One of the design requirements for the weather project was that all representations be optimized for viewing on a mobile device, introducing the idea of context of use in a form factor that the students were all familiar with. They used data from the forecast.io API, which offered the opportunity to learn the basics of HTTP requests and JSON file formats, and to use up-to-the-minute forecast data for accurate and fully functional mobile weather applications.

For the third project, the class was asked to visualize US Census data from CitySDK. Students had the freedom to choose any subset of the data, and represent it any way they wanted. The open-ended nature of the assignment meant that the students bore the responsibility of finding their own “story in the data”– one of the core tenets of the curriculum. To help teach this concept, Alex visited from the Fathom office to give an overview of how to use data in storytelling. Ultimately, many of the projects were reflections of the students themselves, shedding light on topics such as immigration, poverty, transportation and commuting, and gender breakdown in employment.

IMG_2328
A student presents her Census project for group critique.

After spring break, we reconvened for the final weeks of class, which we called “Choose Your Own Adventure”. Students worked with a dataset and medium of their choice, tying all of the concepts they had learned over the course of the semester together into a single project. They spent two weeks exploring candidate datasets, working out the technical logistics of ingesting and parsing their data, and pinning down details about their intended audience and the story they wanted to tell. The second two weeks were dedicated to creating an initial visual representation of the data. After a round of crits, students went into the final two weeks with suggestions for improving and refining their representations, focusing on advanced design concepts such as animation and interactivity, color, and typography.

The last week of class was dedicated to final critiques. Each student presented his or her project to the other students and instructors, and a panel of guest critics that included Nicholas Felton, Dietmar Offenhuber, and Fathom’s own Mark and Olivia. It was so rewarding to see everyone’s hard work pay off in the final projects, each of which was uniquely representative of each student.

Equally rewarding though, was the feedback the instructors got after the final presentations had ended. Several students asked us if we would be teaching again in the Fall. If the students are up for the challenge of a series of Information Design courses then so are we, but for now we’re going to enjoy our summer vacation.

k
Coubertin Rings Update

The Android Experiements are composed of a gallery of creative open source projects developed for the Android platform, and were introduced as a way to “encourage more developers to challenge how we interact with the devices we use every day.” In the spirit of the experiments, we set out to challenge how users interact with their Android Wear devices, and in doing so challenged none more than ourselves.

There were design questions: What opportunities exist beyond the more traditional mouse and keyboard or touchscreen input? What types of gestures and interactions are natural and intuitive, yet novel and compelling? Can we give users control over their experience while still surprising them?

And there were engineering questions: What types of input are available? What technologies should we use? How do we deliver a consistent product across different types of hardware?

We submitted three watch face designs to the gallery, all of which have a unique interactive component that leverages built-in sensors on the watch.

dopamine-loop-github-001
Fathom Watch Faces
  • Coubertin Rings is inspired by Pierre de Coubertin’s Olympic rings, and promotes daily physical activity. A new ring is formed each time the wearer takes a step. It bounces playfully around the screen and forms larger rings as the user takes more steps.
  • Bouncing Isaac pays homage to Isaac Newton’s prism experiments, which demonstrated that white light is not “colorless”, but rather, a blend of many different colors. Geometric patterns dance across the screen, influenced by the movement of the wearer throughout the day.
  • Gaze Effect elicits the feeling that the watch is looking back at the user whenever she looks at the watch, a reference to Jacques Lacan’s definition of “gaze”. Animated eyes appear on and disappear from the screen based on how frequently the user looks at the watch.

The Coubertin Rings design in particular presented obstacles that set it apart from the other two. First, it relies on a step counter, which is not a dedicated hardware sensor. (Examples of dedicated hardware sensors include the accelerometer and gyroscope.) Rather, it is a “software-based” sensor, which processes input from the hardware sensors to calculate second-order information. Not only does this introduce latency into the interface, it adds an additional layer of variability and complexity already present in the landscape of Android Wear devices. We found that watches with varying Android versions calculate steps very differently, which made it difficult to design a predictable and consistent experience on all the various devices. In addition, it is the only one of Fathom’s watch faces that delivers quantitative feedback to the user, so it’s crucial that the feedback is accurate.

IMG_20160112_134700791
Watch Faces in Action

 

We modified the Rings to use the step detector— a faster but less sophisticated version of the step counter— so that the display will update in real time when the user is looking at the watch. When in ambient mode, it reverts back to the step counter. In this way, we are able to strike a balance between instant feedback and accuracy. To mitigate the issue of variability across devices, we adopted the same step counter that Google Fit uses.

We soon learned that the Google APIs come with their own set of challenges and complexities, both for developers and users. For instance, Google Fit must now be activated on the watch in order for Coubertin Rings to count steps correctly. In the end, though, we were able to replace the individual device step counters with a call to a universal, device-independent API. We also get the added benefit of step count being stored in persistent memory. This means that the Coubertin Rings counter won’t reset if the user switches watch faces, and it will even show steps that were counted on other devices as long as they’re connected by the same Google account.

google-reviews

After releasing the watch faces on Google Play and reading feedback from users, we were surprised to learn that Bouncing Issac– the simplest of the three to develop– is the most popular design. This poses a new question: What depth and complexity of interaction do users expect in a watch face? The purpose of experimentation is discovery, and participating in the Android Experiments has led us– and will hopefully continue to lead us– to discover the challenges and opportunities of developing for wearables.

Founded in 2010 by Ben Fry, Fathom Information Design works with clients to understand complex data through interactive tools and software for mobile devices, the web, and large format installations. Out of its studio in Boston, Fathom partners with Fortune 500s and non-profit organizations across sectors, including health care, education, financial services, media, technology, and consumer products.

How can we help? hello@fathom.info.