Sam Brown

#415 13th January 2010 at 3am Article 22 Comments

Web apps generate a lot of data, popular and successful web apps even more so, and when you are at the helm of one of these applications you need to be able to peer in at a glance and get a good overview of how things are doing on a daily basis. Carbonmade hired me towards the end of December 2009 to design and build a backend interface for them to view what activity was happening on the Carbonmade site each day, let me explain what we created, Pulse.

The Brief

Pulse – What is happening today in the world of Carbonmade.

“How you display the data is up to you, probably Carbonmade.com related colours.” was all Spencer said to me as he sent me a file full of fake sample data for me to use. Content up front AND free reign to design as I wanted? This was going to be fun!

First things first I broke down all of the data that was required to be displayed on this page into logical sections:

1. Sign Ups Today (Last 100)
2. Paid Activity Today (Last 100)
3. Management Information (Revenue & Accounts)
4. Date with a countdown of hours left in the day
5. Tweets mentioning Carbonmade
6. Blog posts mentioning Carbonmade
7. Recent Referrers
8. Twitter & RSS Feed Subscriber Counts

I quickly realised that a three column approach was going to work best at displaying all of this information and started sketching some simple wireframes. Sign Ups & Paid Activity were to list out 100 users, that was obviously going to take up a lot of vertical space and the latter four items in the above list are all related to Carbonmade Around the Web making for a fitting third column. The Management Information was only going to be visible to the founders and not any new hire’s and while being very important was not necessarily about ‘Carbonmade Today’ – we decided hiding but being able to slide in this data separately would be a nice approach.

Content is king, designing in the browser

Seeing as I already had all of the content that was to be displayed I jumped straight into writing HTML and laying out the content in the browser – this is an approach I often take where appropriate and this job was really all about the content, Photoshop could wait for now.

After building the basic page structure with all the necessary hooks and content in place I started playing with some basic colours in CSS. I knew that what I was building had to stay on brand and I went with a similar Carbonmade blue header that is on the current homepage and a dark background colour with light text.

Colours and Icons

The most important data to be displayed in my opinion were the conversions, upgrades, downgrades and cancellation indicators – these really needed to stand out on the page and be easily and quickly scan-able. I used the colours that were already being used on the main site for these items, I went with green for conversions, yellow meaning someone had just upgraded their account and then bold obvious warning colours of orange for a downgrading user and red for a cancellation.

The second most important piece of data was the packages related to each of the users, Carbonmade currently have two packages a free (Meh.) and paid for (Whoo!) package, a third tier (code named UBER!) will be getting rolled out in the future so this had to be taken into account.

Along with which package new users were signing up to the ability to see what upgrades and downgrades were happening on the site was also key, here I created a simple set of icons that shows the transition between the various packages.

A last simple set of icons were created that would help display visually where each of the new users were coming from. Were they visiting the site directly, being referred from another site, coming via a regular Google search or via a Paid Google ad.

Webkit to the rescue

The package icons for Pulse had already been created before I decided that it might be nice to break down the total number of signups for the day into logical boxes for each package. Instead of recreating the gradient backgrounds in Photoshop I decided to use a little bit of -webkit magic to help display this information.

1. ul#total-signups li#total-uber {
2. background: #c4ae6d;
3. background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #e3d4b1), color-stop(1.0, #c4ae6d));
4. color: #7d6319;
5. text-shadow: #e6dcba 0 1px 0;
6. }
7. Download this code: /code/pulse-webkit-gradient.txt

The above code for the unordered list item related to the total number of UBER! package signups is given a light brown-gold background, brown text and a very light brown 1px text-shadow underneath giving the text a cut-out look. The second background line here is telling any browsers powered by Webkit to give the element a linear gradient background from the top left to the bottom left, starting at #e3d4b1 at the top and finishing at #c4ae6d at the bottom, which is the exact same gradient that I created for the UBER! package in Photoshop.

Recreating the style of the package icons in CSS was so easy I was tempted to go back in and remove the physical icon images and replace them all with CSS but due to the nature of the upgrade & downgrade package icons I felt there wasn’t too much point.

The draggable Management Information panel

Spencer really wanted to be able to check the monthly targets for Carbonmade within Pulse but because this information wasn’t explicitly about Today we discussed having this information be hidden and out of the way but be really easy to bring into display when wanted. A simple JavaScript draggable element was definitely the best approach here and I quickly fired up jQuery UI in search of a draggable plugin.

Building this section was a lot easier than I had first imagined it might be thanks to the wonderful jQuery. Embedding the jQuery source, the UI core and the UI Draggable plugin was all I needed combined with one simple statement telling it to make the #management element draggable, on the y-axis only within the #scroll container:

1. <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
2. <script type="text/javascript" src="js/ui.core.js"></script>
3. <script type="text/javascript" src="js/ui.draggable.js"></script>
4. <script type="text/javascript">
5. $(function() {
6. $("#management").draggable({ axis: 'y', containment: '#scroll', scroll: false });
7. });
8. </script>
9. Download this code: /code/pulse-draggable-jquery.txt

After coding and designing the Management Information panel I simply had to set the panel absolutely, up and under the header (I used a negative position: absolute; and z-index to accomplish this) and gave the #scroll container a tall enough height that the user could select the #management panel with their mouse and drag it up and down. This effect was genuinely really easy to create and implement and it’s a great little UI touch.

I tied up the header of Pulse with the lovely new Carbonmade logo, added the date and a flip-counter that displays the number of hour’s left in the day. The Around the Web third column houses the Feedburner and Twitter follower counts, as well as the latest mentions of Carbonmade from Twitter and blogs around the web – this data is being brought in through separate APIs.

Handing over the front-end code to Carbonmade developer Jason Nelson just before the New Year was the final part I played in this fun and exciting little project which will sadly only ever be seen by a handful of people, and you, here.

“Pulse is almost fully functional and I just wanted to say thanks! :) It’s been really helpful to read the blog posts / see the new subscribers / and watch the paid upgrades / downgrades. You really feel the activity and movement of the day in a way we didn’t ever before.” – Spencer Fry, Carbonmade