Sam Brown

Helping Carbonmade keep their finger on the Pulse

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!

Carbonmade

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
Pulse Wireframe

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.

Pulse in Code

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.

Pulse Icons

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.

Pulse Management Information

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.

Carbonmade Pulse

“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

Post a link to this on Twitter ↩

Comments

Philip Morton 13 January 2010, 06:45 #1

Great write up. One question though: why did you choose to have the management panel appear by dragging down instead of, say, clicking to toggle it? It seems like more effort for the user to click and drag than click.

Andy 13 January 2010, 06:48 #2

Absolutely fascinating, was hoping to see a comprehensive writeup after the teaser dribbbles ;) Looks cracking, yet another masterpiece Sam!

Jack Osborne 13 January 2010, 07:06 #3

One of the best #p52 posts I’ve read so far, it’s great seeing the thought process that goes into these things. I loved looking at the wireframe sketches, I could look at that stuff all day, and supplying little bits of code is always greatly appreciated.

Sam Brown 13 January 2010, 07:09 #4

@Philip Purely because of the way I designed it, it would have been just as easy to click and slide the panel down but the visual grip effect at the bottom of the panel seemed more suited to the physical act of clicking and dragging.

Thanks for the great comments.

Ben Bodien 13 January 2010, 07:11 #5

That looks spectacular, Sam! If we’re ever holding the reigns for a commercial web app (and we hope to be, fairly soon), we’ll be knocking on your door for something similar!

Robbie 13 January 2010, 07:30 #7

Talk about a dream brief! Great write-up and super end result, Sam.

The last two back-end interface jobs I’ve done have been designed 90% in the browser, with only occasional assistance from Fireworks or Photoshop. It’s liberating being able to rapidly create a rich UI using only CSS, then offer the client varying degrees of enhancements for older browsers by turning the CSS-designed elements into graphics. The thought of trying to format the vast amounts of information contained within a back-end UI in a graphics program gives me nightmares; it makes so much sense to dive right into the HTML early and start thinking about semantic structure and hierarchy from the get-go.

Benjamin D.C. 13 January 2010, 07:42 #8

Really cool post, Sam! Keep up the good work :)

Paul Anthony 13 January 2010, 07:44 #9

Ha! I was wondering what sort of masterpiece lay behind the pulse subdomain at carbonmade – followed the link through recently after it appeared in my referrers. Great write up on what appears to be a stunning system.

Kieran 13 January 2010, 07:48 #10

Thanks for that, really interesting. I can only imagine how useful this will be for Carbonmade too. Good work!

Spencer Fry 13 January 2010, 09:17 #11

@Philip I can tell you from daily use, I prefer the pulldown than I would clicking it. It just feels better.

Mark Wallis 13 January 2010, 12:10 #12

Really nice design work, the colours work really well.

Just regards the draggable panel vs the click and slide effect. The draggable option needs two extra js files though. I’d agree with Philip as a user i’d find a click action easier to manage. That being said, really cool work and thank you for sharing.

Spencer Fry 13 January 2010, 12:34 #13

@Mark But you may also click it by accident. Dragging it means that you won’t ever do that. It’s helpful if you’re showing someone your dashboard and you don’t want to show them the management details (something I find myself doing).

Sam Brown 13 January 2010, 12:42 #14

Thanks for the super kind words everyone!

@Ben Thanks, and you better! :)

@Mark Thanks for the kind words. I think the extra js files are an irrelevant point in this case, Pulse will only ever be seen by the three Carbonmade founders and their one employee. But Spencer sums up the use of the drag best in his comment.

Sean Johnson 13 January 2010, 16:59 #15

Beautiful work man… really impressed.

Dashboards are always tough projects. Information Dashboard Design was a very useful reference for me on my last dashboard project. http://bit.ly/4yw2C9 – might be worth checking out at some point.

Régis 13 January 2010, 20:53 #16

Brilliant. I LOVE when designers share their thoughts on a project they just made. Thanks for sharing, it’s refreshing.

Jorge Bernal 16 January 2010, 21:12 #17

That looks fantastic. Thanks for sharing

Matt Kempster 17 January 2010, 09:16 #18

Great to see more designers sharing their processes and +1 for designing in the browser ;)

DanC 17 January 2010, 10:23 #19

Seems to me that this idea would be great for many different types of organisations. I for one would love to have a little admin app that tells me all my social media stats, emails and anything else I deem useful!

A great idea and one that I may well develop for my own devices!

And great process by the way! Almost forgot to compliment Sam on a job well done! Great design and an extremely well written article.

chris 19 January 2010, 14:46 #20

Great post, love that you show the final product. Not too crazy about the slanted grid background, but great interface nonetheless.

Gavin Elliott 24 January 2010, 13:23 #21

@chris – When I saw the slanted grid background in one of Sam’s Dribbbles I thought it would be really off-putting to the eye however seeing it in the demo makes it look fine. So much so that I didn’t even notice it.

Great work Sam, as always.

Gavin

holeycoww 2 February 2010, 04:29 #22

Wow, excellent write up Sam and such a good job on the site. I love the look of it.

Commenting has closed for this article. Feel free to me.

Sam Brown co-founded Iterate, and was previously VP of Design at Foursquare. Based in NYC.

DribbbleEndorseFacebookFoursquareInstagramTwitter