Next 12

This self-directed prototyping challenge was a fun way to build something from the ground up. Because weather apps are a cliched starting point, I wanted to find something new or interesting that I could add to the experience. During the needfinding stage, I noticed that weather apps have difficulty displaying weather probability in an easily scannable way. To address this need, I created an expandable clock face that shows the projected chance of rain or snow within a 12 hour period. The percentage is indicated by a combination of color saturation and rings marking 20% intervals. Through storyboarding, it also became apparent that temperatures expressed in degrees can be difficult for people to translate in a meaningful way. Addressing both of these needs became central to the design.


Through sketches and a series of hand drawn storyboards, I began investigating potential needs for a weather app. As someone who loves to draw, storyboards are a very useful way to explore and connect with an idea. During this process, I decided to use a clock as the mental model for visually displaying 12 hours of weather projections. Also, I added text comparing the projected temperatures to the previous day's temperatures. This comparison, i.e. slightly cooler than yesterday, helps the user map the numerical temperature to their personal experience. 

Next, the app's general flow was prototyped in Balsamiq as a lo-fi starting point. I didn't get the flow perfect, but I got it down. Rough grayscale iterations were made in Sketch to test layout and hierarchy. Then, I began iterating in Sketch to quickly explore design treatments. When the mock-ups were finished, I began working in Pixate to create an interactive prototype that I could test on my phone. (Pixate was eventually aquired by Google, and I've been working with Principle and Framer. Onward and upward!)


I love prototyping, and this was a fun chance to do it with intention and purpose. This self directed project allowed me to create every element through ideation, design, and testing. In the design process, more attention could be paid to the icons and how they relate to the temperature. The rings that indicate the chance of rain in the clock face could be more explicit. Alternative options for showing percentage would be interesting to test. As a product, there's still a lot of functionality to be explored and tested.