In the capstone course for Information Systems majors, student teams are assigned clients. My team’s client was a group of professors and researchers from Carnegie Mellon’s Social and Decision Science department. The project was to create a web application to present the data set they had compiled about wind farms in the United States.
Our clients provided us with spreadsheets of demographic, economic, and ecological data for active wind farms and potential wind farm sites. Over the course of a semester, my team built an application that parses and presents that data in a dynamic map, configurable table, and custom visualization.
By providing access to a unique dataset in a user-friendly format, our application helps wind developers select sites which are likely to be welcomed by the surrounding community. The Wind Farmer’s Almanac also serves concerned citizens who want to explore data about wind farm developments.
When a user selects a wind farm site from the list, it is highlighted on the map and comparison visualization with a turbine icon.
The comparison visualization shows how a site compares to the others in the results set across a range of variables at a glance.
Pop-up filtering controls let users easily switch between browsing results and refining them further. The filtering controls design had to be flexible enough to work for the 60 quantitative and qualitative attributes that can be displayed in the table.
A sketch of an alternate interface for the Wind Farmer’s Almanac, with a filter column on the far left, map in the middle, and results table on the right. When my team presented it to our client, we learned that filtering and viewing results were not as separate of tasks as we originally thought. This led us to integrate popover-filters into the results table in our final application.
At one point in the project, we thought we would need profiles for each wind farm. I created these rough designs for how we might visualize data within such a profile.
The ChemCollective has provided free online resources for chemistry teachers and students since 2000. During my internship there in 2011, I redesigned the ChemCollective’s logo and website, reengineered the backend of the site to use an MVC web framework, and consulted on the interface for their Virtual Lab.
The overarching goal for the redesign was to give the site a more modern, friendly feel, while better communicating what it offered to users: academic resources for teaching and learning chemistry.
For the new logo, I chose the typeface Lubalin Graph because its geometric forms and slab serifs gave it a scientific and academic feel, while its rounded shapes made it friendly. Scientific, academic, friendly—all fitting adjectives for the ChemCollective.
The graduated cylinder incorporated into the wordmark relates the first part of the ChemCollective’s name. The image of a graduted cylinder associates strongly with the concept of chemistry (the ‘Chem’ in ChemCollective).
The ChemCollective provides resources for teachers, but it’s mission extends to enabling teachers to give feedback, share classroom experiences, discuss instruction, and author their own resources. The equilibrium symbol (⇌), and a retrosynthetic arrow (⇒) in addition to the regular reaction arrow in MarvinSketch?) communicates the ‘Collective’ in ChemCollective, indicating an exchange between the project and those it serves.
The old home page had weak visual hierarchy, felt stuffy and out of date, and did not offer convenient access to most of the content on the site.
The vast majority of visitors to the homepage immediately clicked the “Find Activities” link. However, its placement and styling do not reflect its importance.
Clear hierarchy and copy better communicate what the site offers to new visitors
Left navigation and quick links provide quick and prominent access to activities and resources that were previously listed only on the “Find Activities” page.
Navigation for non-educational content is clearly separated.
Transitioning the ChemCollective site to be database-driven allowed for activities to be automatically organized based on metadata like their type and topic.
The new color scheme feels fresh, modern, academic, friendly, and “sciencey”
After evaluating issues with the current interface and researching competitors’ interfaces and interfaces for analogous tasks. I created this a new design for the Virtual Lab. This mockup is of the main work area. One key change here was grouping all of the information about the currently selected chemical in one place, so that it would be simpler to monitor.
During Fall 2012, I did an independent study in typography with Professor Dan Boyarski. The course projects included creating a book covers for the “Vision+Value” series, and typesetting an essay, interview, and a few recipes.
The course focused on reinforcing meaning using type by selecting typefaces that fit the content’s message, setting type readably (varying size, line length, leading, etc.), and considering the relationship between type and image.
PDFs for Typography Projects:
The Vision+Value series features essays by well known designers on design practice and philosophy. In my designs, I strove to communicate the theme of each book through variations in color, graphic, and the typography of the title. Using a standard layout, typeface, and style of graphics I related the covers to one another as a series.
I typeset a commencement speech given my Anna Quindlen at Mount Holyoke College. In the speech, Quindlen urges her audience to give up on the idea of being perfect, and be true to themselves rather than please others.
The typeface Swift, as a serif, is more traditional and intimate. Its forms have a bright feel and distinctive personality. These characteristics made it the right choice for this personal, earnest, and inspiring speech.
In this interview transcript, American author Neil Gaiman interviews the British author Terry Pratchett. Gaiman and Pratchett are two of my favorite authors, and have also collaborated as writers.
My design for this piece uses type identify each author throughout the interview. The typefaces I chose for each author are meant to reflect their personality (ITC Legacy Sans for Neil Gaiman, and Goudy Bookletter for Pratchett.)
I created an experimental design for a recipe book. The book uses layout and images to add meaning to the text of the recipe—separating ingredients, preparation, and cooking into parallel columns. The images on the left are numbered to correspond with the preparation and cooking steps (rather than only showing the final product.)
StreetSmart is a mobile web application that helps you know what streets are safe to travel. My team designed and prototyped StreetSmart in a day at the Hack ‘n’ Jill hackathon, and we won first place.
We tried to make our design give hints about function of the app. For example, we picked Kabel Heavy for our logotype because the shape of the characters was similar to the way roads look on a map (for example, the shapes of the ‘s’ looks like a curvey road, and the ‘e’ could be a traffic circle with some imagination.)
The user’s location is shown with a blue dot, and streets around them are color-coded based on crime data.
Since this is a mobile web application, rather than native, it cannot access GPS data without permission. StreetSmart prompts the user for permission to geolocate them. If they refuse, the app asks for a street address instead.
We used the SpotCrime API to get crime data for a location. When you visit the SpotCrime website, you see icons on a map indicating recent crimes nearby. We wanted to take this data and condense it to higher-level information to be used for navigation.
In this exercise, I created a desktop interface for entering data about a person’s medical history. The medical history was required to have three types of data: a health questionnaire, personal medical history, and family medical history for the patient.
Given the data required for the medical history, I was free to organize the collection in any order. The two other constraints were that the interface should be modular—allowing addition or removal of data collection sections—and that the interface should support recognition of relationships between the patient’s medical history and their family medical history.
Helping a special-needs school collect and analyze their data
Image via Shruti Kataria, other information unknown.
Lilypad is a mobile web application for iPad. Its users are teachers at a school and partial hospital in Pittsburgh. The app aids teachers in collecting information about trends in childrens’ behavior and academic performance.
As a Research Assistant on the project, I have conducted weekly user tests, iteratively prototyped the application at increasing levels of fidelity, and helped to develop the actual application.
The paper version of the standard celeration chart that teachers use to track student’s academic performance on individual skills. It captures and visualizes data simultaneously, and can be used extremely efficiently by experts. However, the paper format limits possible uses of the data (e.g., other visualizations, comparing to historical data)
The digital version of the standard celeration chart which we have been developing. Teachers can input data points either by tapping the chart, or by typing in values in the sidebar on the right.
Currently, teachers keep a binder of charts for each student. In our app, all of a teacher’s students are listed in the main navigation. Once a student is selected, a teacher sees a list of all of their charts.
Teachers use to track skill development, but they also keep a behavior scatterplot chart for their students to track occurrences of “behaviors of concern.”
In the digital version of the behavior scatterplot, we prioritized ease of data entry and reading (color-coding each behavior.)
One of my friends involved with the Mosaic Gender Conference at CMU asked me to design a handout with a list of hotlines and emergency services related to domestic violence and sexual assualt. My goal for the design was to make the list into a handout that would useful (in the context of an emergency) and desirable (so that people would keep it.)
Though the cards were originally designed for the conference, they were so positively received that Student Health Services plans to distribute them in the on-campus clinic.
I decided that the handout should be small, wallet-sized, so that people would be likely to have it at hand in an emergency. To make sure the card was an appropriate size, I printed out copies as I worked on the design.
The front of the card is decorative, to make it inconspicuous when tucked into a wallet, and to make it aesthetically appealing (so that people would be more likely to keep it.)
The back of the card has more general resources listed—ones which would not be uncomfortable for a stranger to oversee.
The inside of the card includes information for more sensitive emergency services, which are specifically for victims of sexual assault or domestic violence. The typography is designed to be highly readable, to feel calm, and to use space effectively.
Since most people wouldn’t be familiar with the hotlines and services listed on the card, I wrote succinct descriptions of each one. The descriptions included information about hours, transit information, and confidentiality policies, so that a person looking at the card can quickly find the service they need, when they need it.
To write the two internal headings, I researched communication with survivors of sexual assault and domestic violence. Both phrases were chosen to encourage survivors to seek help.