Classroom Climate

The Weather App Challenge involved designing an assignment for students learning web development.

Project Overview

Goal: To produce an interface that entry-level Computer Science majors in a “web development” course could build, including integration with the Yahoo Weather API.

Background: Professor of Computer Science, Nina Amenta put out a call requesting weather app mockups for her students to reference as they studied web development. A small group of members from the UC Davis AIGA graphic design club, Pixel, volunteered to produce high-fidelity mockups for the course. After creating the mockups, we attended one day of the class to present and explain the rationale behind our designs to Professor Amenta and her engineering students.

Challenges: Creating an interface that, while still pleasing and useful as a mobile site, was accessible to various student skill levels. In addition, I set a personal goal of creating a site that would be friendly on the eyes for someone checking the weather late at night, i.e. a student.

Team: Each Pixel member/volunteer worked on their own concept of a simple and accessible weather app but provided each other with design critique as needed. The real collaboration was between each of us and the student developers who would build out our ideas.

Methods: Due to a strong mental image of the design I wanted and a desire to experiment with a digital-only technique I, very atypically, skipped preliminary pencil drawings and went straight to mocking up the app in Sketch.

Results: Only a few of the students sent me the results of their work, and I realized that their skills might not be as strong as our guest group had assumed. However, I am happy to point you towards the project of Disha Bendre. Check it out!

Project Story

The challenge in this project came from learning how to communicate with the junior software engineers- who were both our client and our end-user. My own initial adventures in web design were helpful in providing some terminology, but further mockups or a prototype involving animation would provide a stronger foundation in the future. The computer science class we visited peppered us with questions on “good design” and I hope we were able to clear up some of their misconceptions. (Serif typefaces are in fact allowed on the internet.)

The only photo we took the day of the presentation doesn’t show the students! (whoops!)

Prior to this project I was a heavy user of Illustrator and Photoshop, but had heard of Sketch and was itching to try it out more than my initial experience while building the 2016 Design Career Fair website.

Work-in-progress screenshot

It’s fun to take a break from research-heavy work and create an interface based on imagination and play. I wanted to ensure the students would have access to all the resources necessary for the project into the future, so I selected icons available from the Noun Project and Source Sans Pro, a typeface available from Google Fonts.

Desktop view
Callouts sheet for the class to reference

If you previously took a look at Disha’s project, you’ll see it’s not pixel-perfect. I’ve forked her repository and plan to work on my own development skills soon, too!