One of the biggest changes we made was an overhaul of the Broadcasting screen. Here is the “before” version:

This worked OK, but you can see a few problems:

• You can’t send different messages to different accounts on the same service. This was something I wanted to be able to do, to have different voicing on @alexkingorg and @crowdfavorite.
• Facebook pages aren’t visible by default.
• The character counter limit indicator is too far away from the textarea it is reflecting.

So we worked on some different approaches. These are pretty close to what we shipped in version 2.5:

And here is the version that shipped:

We also made some significant UI changes to the way accounts are managed on the admin side. Here is the “before” version.

Again, functional but can be improved. In particular I wanted to consolidate this into a single list rather than having one place to add/remove accounts and a separate place to indicate the default accounts. Also, you can see the problem (again) of pages not being shown by default.

This concept allowed the two lists to be combined into one:

And what we shipped was pretty darn close to that:

In addition to making the admin screens more compact, this design also makes it easier to support more services in the future (Google+, etc.).

So there you have it, a little “behind the scenes” fun. I definitely recommend incorporating sketching and wireframing into your design process, it’s been a huge help for us as we brainstorm, discuss ideas, etc.

I’ve got an idea…

I love it when I get a note like this from internet superhero Dave Pell. It normally means I’m going to get a chance to help build something I’m going to love.

Our latest project together is Delivereads. You may have read about it already on Daring Fireball, Gizmodo or the TypeKit blog. If you haven’t, here’s the 30 second overview:

• Some articles that are available online are too long to comfortably read in your browser, they’d be better to read on your Kindle.
• Dave wanted a way to send these articles to his own Kindle, and thought that others might be interested in them as well.¹

Yep, I certainly wanted to receive Dave’s selected articles on my Kindle. The system would be pretty straightforward to create… let’s do it!

The basic workflow is pretty straightforward:

1. Dave does the hard work finding the great content. When he does find something, he uses the Delivereads bookmarklet to add it to the system.

   

2. When adding the article, Dave can add commentary to it as well. This commentary will be included in the Kindle delivery.

   

3. Once a good selection of articles is ready, Dave creates a delivery and selects the articles he wants to be included. These can be re-ordered as desired (using drag and drop).

   

4. Once the articles are set, the commentary has been added and everything is ready to go, there are both preview and test-run features to make sure that everything is just right. The preview allows for a quick review on the web to find any obvious issues, then the test run sends the delivery to Dave so he can proof it before it’s sent out to everyone. As we all know, there is no “unsend” button for email, so being a little careful here is important.

   

5. Once everything is reviewed and ready, Dave hits the magic button and you get the deliveread on your Kindle.

   

The articles that you receive on your Kindle go through a few transformations before they are ready to send. The first step is to grab the article content. The articles are then arranged in the deliveread, along with the table of contents, commentary and various “back” links.

We went through a lot of revisions and tweaking to try to get the deliveread format right. What we have now is basically:

• Table of Contents
• Intro with article list and commentary (your Kindle opens to this page)
• Article 1
• Commentary on Article 2
• Article 2
• Commentary on Article 3
• Article 3
• Unsubscribe instructions

There is a link to the table of contents at the beginning and end of the article, and a link to original article on the web at the end of each article. We chose to intersperse the commentary on each article after the first article. We do this because these are long form articles and by the time you get to Article 2, you have likely forgotten the commentary from the introduction. However, the links from the introduction and the table of contents go directly to the article (skipping the interstitial commentary) since you likely have that context already. Dave and I are definitely open to feedback and suggestions that might improve the service or deliveread format, so if you have ideas please let us know.

The Delivereads service is built on our Oxygen web application platform. This provides a very robust set of web application features and best practices so that when we build a web application like Delivereads we are able to focus on building the bits that are of high value instead of spending time on user management, permissions, collision detection, item revision history, etc., etc. We’ve created a wide variety of apps, services and web APIs with Oxygen and it is proving to be an excellent platform.

Does building a service like Delivereads sound like fun? It is! Join our team, we’re hiring! (Previous blog posts: PHP Web Developer, Technical Project Manager)

1. Dave is a great curator of content. [back]

The system is pretty sophisticated. It’s a web application that allows editorial definition of complex rules and associated clauses with powerful data token replacement/insertion and it’s a series of web services that work together to manage and process a ton of data in parallel and produce some pretty awesome results. FantasyGrinder looks for great individual efforts, compares starters to bench players, actual player performance to projected performance, comparisons between multiple players, etc. – the rule engine is very powerful.

As someone who has played fantasy sports for the last decade, it was a real treat to work with the excellent folks at RotoExperts to help bring FantasyGrinder from concept to reality.

We have a more detailed case study in our portfolio.

RedMonk has launched their first product: RedMonk Analytics. The basic premise is to use the data inherent in the activity on the RedMonk web properties to expose interesting trends. Read all about it in Steve’s blog post. As Steve says, this is a project that is only going to get more interesting with time.

One of the things I enjoy most about my job is the opportunity to work with smart people and help them execute their great ideas. It’s even more rewarding in the case of RedMonk where I also have the privilege of calling one of the founders a friend.

Take a look at the post about the plugin on MailChimp’s blog, which includes a very cool video.

It’s pretty slick, and useful – though I may be biased since my team and I at Crowd Favorite were lucky enough to build the plugin. I don’t log into my Google Analytics account that often, but I’m in my WordPress admin daily. With this plugin, I’ll probably be keeping a little closer eye on my stats.

I can’t imagine how useful this would be if I also did email campaigns with MailChimp. Having a visual display of web site visitor data integrated with mailings and blog posts is hot! The plugin uses APIs and MailChimp and Google Analytics to gather data, then uses that data to build the visualizations in the plugin. With the excellent APIs at both services, we can do all of this without needing to store your credentials for the services, making everything that much more secure.

Check it out, you (obviously) need either a Google Analytics account or a MailChimp account to bring in the data from that service, and it will work if you have either/or.

If you have questions, need support or need to report a bug or plugin conflict, please use the form here (per the FAQ).

Progressive License is similar to other plugins that allow you to easily put a license on your content, but it brings a little twist: the ability to change the license applied to the content as the content ages.

Steve explains:

In my case, as an example, it applies a Creative Commons noncommercial license for the first 60 days – this one – and then retires the noncommercial provision after that time period, applying this license on everything older than 60 days.

This is the sort of thing that would have been really simple to build as a one-off custom plugin, but RedMonk instead chose to have my company, Crowd Favorite, build a solution that could be distributed back to the community.

This was an interesting user interaction challenge. We did our best to make this definition of the license time windows as user friendly as possible.

You can see we created a JavaScript based configuration page that does some date calculation to show when licenses would be applied to a post published today. Hopefully this does a good job communicating how the various licenses will be applied.

Progressive License ships with seven Creative Commons licenses included out of the box, but also gives you an interface to add additional licenses you would like to use.

Many thanks to RedMonk for bringing us in to build this plugin, and kudos to them for choosing to sponsor the creation of a robust solution for the rest of the WordPress community.

JabberWerx AJAX is a set of thin client JavaScript libraries that can be easily embedded into existing web sites and web applications to add rich push functionality (chat, live content updates, etc.) to them.

There are easy to drop in bits for one to one chat (tabbed), group chat and a library that allows you to push data updates to your page (think pushed stock or twitter updates). It’s a pretty good system to get up and running easily.

Most of us think of XMPP/Jabber as a chat protocol, and it does that very well (as anyone using GTalk can attest to); but it’s also got a very interesting place in the web 2.0 space as a real time data push channel. Using push instead of pull/poll can dramatically reduce server loads, and also gives you new data faster.¹

Building libraries and building applications are two very different things. With applications you need to make functionality available to your end users. With libraries, you need to build robust and complete solutions that will be used in ways you probably haven’t thought of yet; abstraction and building small, distinct components is key. It’s a fun and different challenge.

I’m very proud that my company, Crowd Favorite, was able to work with the great folks at Jabber to help bring this concept to fruition.

1. Steve has a great Q&A on this. [back]

The new plugin makes it easy for you to enable Lijit search from the default WordPress search box, or you can add in the full Lijit widget wijit if you like.

I use Lijit search on alexking.info, where I aggregate content from all of the various sites and services I publish content on. The Lijit search performs a search across all of that content – pretty slick.

I’m pretty pleased with the overall user experience for the plugin. It nicely handles set-up for new or existing users, gives straightforward options and instructions, and even brings in your Lijit search stats with a new link on the WordPress admin dashboard.

Many thanks to the great folks we were able to work with at Lijit in building the new plugin. It was a pleasure working with people that care deeply about their users and are also technically astute.

The overall look has been updated with a great new design from Bryan Bell, and a number of little features have been added and minor tweaks made since the initial launch.

I’ve got a few more screenshots here, but it’s a lot more fun to just go poke around.

Here is a partial list of the changes:

• New theme design.
• Welcome message for first time visitors.
• List of Hot Topics next to the Create box.
• New Browse the News navigation.
• Integrated ads from the Deck.
• More little JavaScript effect niceties.
• Numerous behind the scenes changes for performance.

The main focus of the refresh was to make it easier for new visitors to explore the site. To this end we exposed more links to Hot Topics, added weight to the Browse the News (formerly Newsfix) button, and configured the Browse the News drawer to stay open on Browse the News pages. This last change keeps the other news topics visible more often, giving people enticing things to click on. Hopefully the results will be good.

Thanks, as always, to Dave Pell for trusting us to work on his baby. We have a lot of fun building and using Addictomatic.

It’s a pretty cool system. When you log in to your WordPress blog with PhoneFactor enabled, you receive a phone call asking you to press # to authorize. When you do so, you are logged in. If you do not, then the login attempt fails.

Basically, this means someone needs to get your username, password and phone in order to log in to your WordPress site as you.

Crowd Favorite worked with the PhoneFactor team to build this integration on their API layer. This was a fun project for us – it’s always nice to enhance WordPress by integrating features from another service.

Besides building the integration with the API to authenticate via phone, we also built the PhoneFactor registration step right into the WordPress admin so that the user wouldn’t have to leave the WordPress admin when activating the plugin and getting it set up. I think it’s a much better user experience.

We integrated some instructional banners into the WordPress admin pages to let people know the next steps to getting things set up after activating the plugin. We also built in some more advanced user features like whitelisting IP addresses so that you don’t have to use PhoneFactor authentication if you’re logging in from your home machine.

The download and more information are available at the WordPress Plugin repository on wordpress.org.

Enjoy!

This was a fairly straightforward build. We created several different designs, went through a few revisions, detailed the custom features that were needed, and got cranking on them. With OpenedHand being located in Europe, all development was remote and all communication was done via e-mail.

Unlike some projects where we implement a design and configure it on their production server, in this case we created the theme for them and handed it off to them to set up. They are quite technical, so the configuration and set-up was not difficult for them and I was pleased that they were able to implement what we delivered without needing to ask a lot of questions. That indicates to me that we did a good job packaging and providing installation notes – things that are always a little hard to self-evaluate.

The OpenedHand team also made a couple of minor changes on their own to what we delivered to them before they put the new site live. This was very gratifying to me as well.

When you build things, you try to do so in such a way that they are easily maintained and modified. When your client is able to make changes without needing to ask for help, that’s generally a good sign that you’ve succeeded.

1. They do some cool stuff, be sure to check them out. [back]

Addictomatic is a search aggregator, a way to see results from lots of sources all at once. Want to see the latest on a presidential candidate? Or the newest iPhone rumors? Or perhaps an ego search? Addictomatic has you covered.

This isn’t a traditional search engine. It’s not designed to help you find answers about some error message or the cheapest flight to Aruba. Addictomatic helps you see what’s going on now on a given topic.

We’ve implemented a number of pretty nice features on the site. One of these is the ability to drag and drop the results boxes around to re-order them.

You can also click the little X to remove a source from a page, or you can drop down the Available Sources panel to remove and add sources.

When you make changes to the results page, either re-ordering the sources and/or removing the ones you don’t want to include, you get a nice bookmarkable URL as a result. That URL will bring you right back to your search, with the layout you specified.

In addition to being able to create new searches, Addictomatic also offers a collection of NewsFix pages that gather the top sources on a variety of topics. I’m mainly visiting the Election 2008 and Baseball pages of late, though I also enjoy hitting Thought 2.0 and Web 2.0 with some regularity.

Building this service has been an interesting experience on a number of fronts, but one of the most exciting has been discovering that it’s something I want to use myself. I liked the idea when Dave first explained it to me, but I wasn’t sure how much I’d use it. As it turns out, I now use it quite a bit – it’s sticky. Much like Twitter, it’s value is hard to explain but readily apparent once you use it for a while.

The design of the site was done by well known designer Bryan Bell, who did a terrific job. We received the Photoshop files from him and created the front-end XHTML+CSS+JavaScript and all of the back-end systems.

Many thanks to Dave for letting us help him bring Addictomatic to the web.

UPDATE: Dave’s blog post is here and Bryan’s is here.

VodPod is a pretty fun service. You can collect embeddable videos from a variety of sources, group them together into a pod , then put that pod on your blog or web site. It’s a pretty nice way to share videos. I created one from all of my golf swing videos.

Note: the VodPod gallery and sidebar widgets require Prototype and might not work as expected if you are using other JavaScript libraries.

The designers at ACS did the majority of the new design work¹, then we helped integrate and implement various features and functions in WordPress and made sure all the Ts were crossed and the Is dotted.

On Friday, we brought the new design and features live on CrunchGear.com. Congratulations to the TechCrunch and CrunchGear teams on the successful launch of the new design, and thank you for giving us the opportunity to help make this a success.

Have a web development or WordPress project you need development, design or consulting help with? Get in touch with Crowd Favorite.

1. Redesigns on high traffic sites are never universally well-received, and this is no different. The comments on new CrunchGear design are somewhat mixed, but I like the new design and enjoyed working on the implementation. [back]

Basically it will suggest all sorts of Yahoo! content to augment what you’re writing about. It can give you little finance widgets for companies:

Maps and travel information for locations:

And even Flickr photos¹:

You get to choose to enable or disable each of the detected shortcuts, and you get to choose how to display them. Some can be embedded badges while others have little pop-up effects when you mouse over them.

This is a beta release, which means there are a few little quirks that may pop up from time to time. I’m sure there will be a lot of great user feedback (and bug reports) coming in as folks start using this to make 1.0 even better.

More info and coverage:

• Shortcuts for your WordPress blog – Yodel Anacdotal
• Boost Your Blog with Yahoo! Shortcuts for WordPress (Beta)
• Yahoo! Shortcuts home page
• Yahoo! Shortcuts plugin page on WordPress.org

It’s also worth noting that the plugin code is all Open Source under a modified BSD license. It’s almost a no-brainer for a company like Yahoo! to make this decision nowdays, which is pretty fantastic.

We had a number of interesting challenges during the creation of the plugin. It was great to see the Yahoo! team not want to make compromises from the user experience they wanted; it was up to us to make sure they didn’t have to.

• Interacting with the WordPress rich text editor is always interesting. We needed to allow people to move the Yahoo! content (maps, photos, charts) around and align them left and right. To accomplish this we had to use placeholder images for the content in some cases. Then we translate the placeholder image back to the proper content to display it.
• As anyone who builds an API knows, no matter how much you plan ahead your first customer will always ask for a feature you overlooked or thought you could postpone until later. As the first customers of the Yahoo! Shortcuts API we found that while almost everything we needed was provided to us, there were a few things that we needed to tweak in order to accomplish what we needed on the WordPress side. Luckily we had access to the API engineers at Yahoo! to give us the additional functionality we needed.
• Working with a large company without having our project manager in place (yet). I verified that project management is not my strongest suit – thankfully we’ve remedied that situation. Back to focusing on development for me (yay!).

This project also afforded me a chance to meet Jeremy Zawodny. Jeremy is one of the first bloggers I started following in (I think) late 2002 and it was great timing to be able to meet up with him at Defrag a little over a month ago. We shot a little screencast video walk-though of the Yahoo! Shortcuts plugin².

Full Disclosure: Yahoo! was our customer to create this plugin. That said, they did not provide any restrictions about what I could say here, ask me to follow any guidelines or even ask me to highlight any specific features.

1. Those with proper Creative Commons licenses. [back]
2. Because who doesn’t love to watch two guys in green sweaters staring at a laptop? You can tell that Jeremy knew there would be footage of us as well as the screencast in the final video – I’ll know next time. [back]