Alive

So, I decided to participate to Ryan Carson’s contest. I love a challenge and this time the prize cannot be ignored: a sweet designer position at Carsonified.

The task was to design a 1-page “dashboard” app for your life. A client can view/edit stats about: heart rate, drinks consumed, food eaten, hours slept and hifives received. The app also needed a logo and a name.

After a couple dozen hours of thinking, planing and executing I’ve arrived to the following conclusions:

Design

1. I chose the name of the application “Alive” as being alive means: sleep, food, drinks, human interaction and your beating heart. I can also suggest the following unoccupied domains: alivecheck.com, alivestats.com or alivestatus.com.
2. The logo was inspired by the idea of “spark”, “happiness” and “the moment”. After considering several ideas, an illustration of fireworks seemed the most appropriate representation of all those emotions.
3. The colors used were selected to represent the different types of metrics we track in the application. Conveniently they also come together to make up the logo.
4. Graphs have the 0X axis inverted; that means the more recent information is on the left part of the chart. Viewers usually read the information presented from left to right in an “F” shaped pattern. A good designer can change that behavior, but why fight instinct? This may be a controversial decision but I wanted to make this more interesting and unique. Of course my approach should be user tested as I am not afraid to be wrong.

Technical decisions

1. HTML5 Canvas: Sparklines were used as this is the appropriate way to represent our data. We are not interested in the quantity per se but the change over time, the trend. The canvas element is a great tool to represent sparklines in my opinion, and even older browsers support it with some help.
2. The app is also responsive to different screen sizes and I think the decision to invert the axis helped this a lot. I believe this application will be used on-the-go, that means the experience must be top-notch.
3. Because I needed sparklines and wanted an inverted axis, I couldn’t find a good third party plugin to do the job. I had to build my own solution and I am really happy with how that turned out. It reads from a html5 custom data attribute, it scales and it presents the data while providing some interaction.
4. This is a proof of concept after all—no time was put in making the app work on different browsers. One can make up their mind about the way I approach a challenge, even a project apparently without constraints as this one.

I present you the result of my effort Alive. Also you can view the logo a little bit bigger.