Sky Matrix

Ever wondered what the weather would look like as a painting? Now you don’t have to.

Our habitats should reflect our lives. Why does the world around us not react to events the same way that our devices do? If we care so much about this information, let's bring it into the real world and stop trying to suck all of our data through the tiny straw that is a phone screen. We need to make more proactive devices so that we can spend more time reacting to data, and less time searching for it. We need to make ambient devices that live where we do, so that our data is more accessible. Furthermore, we need to stop being so literal with our data. Take weather data, for example. When I see that list of numbers predicting the future, I feel like I am trying to figure out what a painting looks like with a microscope. We need to explore other ways of expressing this data; what if it was a painting?


I first found out that Dark Sky provides a free API for hourly weather forecast data over the future 168 hours. The data is high quality and accessible, but presenting it in a meaningful and digestible way has been an issue (Dark Sky on iOS, Left). The amount of data is overwhelming and very difficult to remember, but we may be able to synthesize this complex data into a digestible pattern by lowering the specificity. Instead of metaphors like: temperature is a number, chance of rain is a number, cloudiness is a number, we can combine these variables into a single color for each hour. All 168 hours presented together create a piece of art, painted by the weather forecast.


The color picker (Right) shows how temperature and the chance of rain of each hour map to a corresponding RGB value. Warmer colors indicate higher temperatures, blues indicate lower temperatures, and the more green the color, the higher chance of rain. Cloud coverage and sunrise/sunset times are then added by controlling the brightness; the more dim, the more cloud coverage. These metaphors more directly align with the weather that we experience. We already associate warmth with red, cold with blue, and green with spring and rain; in this way, we can get a sense of the data without actually reading any numbers. Individual colors would be difficult to interpret, but many colors presented relative to one another reveal patterns that are otherwise hidden.

Try to get a sense of the weather by referencing the Sky Matrix (Right), and the RGB color picker, while keeping in mind that the brightness of the led indicates sunrise/sunset times, as well as cloud coverage. A few patterns immediately emerge: The sun rises between 7/8 in the morning and sets between 5/6 in the afternoon each day. On Saturday (far right column) the green indicates rain throughout the day, and orange for a warm rain mid-day. It is also easy to see temperatures starting relatively cool and raising throughout the week, from blue to red.

One case that caught me off guard is when an LED shows white. Since temperature is a ratio between red and blue, an LED can only be white when the temperature is 50º with a 50% chance of rain; it is the only time there can be the same amount of all three colors. These patterns, and others, are not immediately evident in lists of numbers, and not as digestible in traditional visualizations. This "painting" can also be seen as a whole, and interpreted in seconds because there is no limitation of reading speed. However it is not without flaw. Those who are colorblind are definitely going to have a hard time translating the data that relies on color, but there are alternate solutions for this too, which I may explore in the future...

This is just one example of how we can create devices that update our habitats, present ambient and proactive data, and question the metaphors of traditional communication. This is what can start to make the difference between reading what data says, and quickly sensing what the data actually means. I built the Sky Matrix using a Raspberry PiFadeCandy Driver, and a bunch of NeoPixel LEDs from Adafruit. It updates its data every 15 minutes automatically, and the current hour of the day breathes in and out to give you some context of where 'now' is on the Sky Matrix.


Dual Dock

This was a past project I realized wasn't on my site and I think deserves to be on here. Designed for iPhone and iPad Air, this dual dock is the consequence of my frustrations with the current charging experience. I had a few major requirements when I started this project: use existing charging cords without modifying, create the ability to plug-in devices without looking, and don't use any moving or mechanical parts. The result is a minimalist sapele wood slab with a hidden seam to separate the two pieces and release the two charging cords.

Touch Lamp

Touch Lamp was created out of a necessity for a great table lamp. Most lamps have cumbersome switches by which a half-asleep human can be easily frustrated, so Touch Lamp does away with them. Touch anywhere on the aluminum ring to turn the lamp on. Touch again to turn it off. 

In addition to cumbersome switches, Touch Lamp does away with traditional lamp shades, that get dusty and worn, and replaces it with a glass sphere. The base is turned and sculpted from African Mahogany and the power cord is soft, woven nylon. The form has an inherent ability for power cord to be fed through any direction relative to the power source. These features work together to fit our human habits and lifestyle, instead of forcing specific behaviors, in order to create the most enjoyable lamp experience possible.

The Silver Hamburger

Hamburger menus have a bad habit of putting entire pages of an app out of sight and out of mind.

If you have used a smart phone, you have seen and used the infamous Hamburger Menu. This is the icon composed of three stacked horizontal lines, and usually means "there's stuff under here". This surely came about from experience designers that needed to fit a lot of pages and data on a mobile app and ran out of space to put it. This brings up a problem regarding the volume of information and pages that should be presented to users in order to not cause information overload or hide information and options. Another problem with the hamburger menu is that it is an 'un-icon', in other words it does not give specific context to where you going in the app, or represent what you will find when you get there (that's why icons exist). This 'un-icon' status has caused it to be used as a catch-all for navigation pages, settings, account details, and anything else you can think of. A "Silver Hamburger" for anything you want to get into an app, but won't fit anywhere else.





If an app has a lot of pages or is a responsive website, a hamburger menu can make sense, but there are some cases where it is completely unnecessary and hides important content, especially in a native application. Hamburger menus have a bad habit of putting entire pages of an app out of sight and out of mind. Users have to remember what's behind the hamburger curtain. Let's take the Level Money app for example. I have used Level Money for a few years now, and love it. It's definitely the most useful money management app I've found and used over a long period of time (including Mint). One reason I love Level is its simplicity, there are only 5 main pages in the entire app, but for some reason there's also a hamburger menu with redundant navigation links. With just a couple of minutes in Photoshop, I was able to expose all page navigation, remove the hamburger menu, include a settings icon in the upper right corner, not lose any functionality, and not change a single page.

If you're still not convinced, head on over to Luke Wroblewski's website for more examples of this design adjustment in action. 


The Success of Micro-Democracy

From amazon ratings, to the facebook like button, micro-democracy has had a profound affect on how we experience the internet.

The internet is an incomprehensibly massive entity that is made up of people that come from every different walk of life. This huge variety of people provides an equally huge pool of knowledge that can be gathered. There is one pool in particular that comes to mind, and this pool is of course Reddit, and it's fitting motto, "The front page of the internet." 


Reddit's amazing success does not just come from the sheer amount of knowledge, however, I believe it is equally attributed to the democratic system Reddit has put in place. This system is based upon the iconic 'up-vote' and 'down-vote' actions that can be taken upon any post, anywhere on the site. The idea is simple, the more up-votes, the higher the post appears on the site, and vice-versa. This is a very effective way of automatically organizing the content of the site for the best, most interesting posts, curated by humans, for humans.

This might not seem like a huge innovation, but this model doesn't just make reading blogs bearable, it has been adopted into virtually every system on the internet. From amazon ratings, to the facebook like button, micro-democracy has had a profound affect on how we experience the internet, which products we buy, movies we see, music we listen to, or information we trust, without an algorithm. 

This system has given us a way to effectively sort through all of garbage in order to find the diamond in the rough. Whether you're trying to learn how to code, build a car engine, buy that perfect television, or just looking for the funniest cat picture, we can do it all instantly. Now you can find out that the soldering iron you want breaks after a month, before you buy it and we have the vast amount of humans pooling their knowledge to thank.