Home > News, Web 2.0, webdesigner > Building Web 2.0: A Case Study for Simply Fired’s Redesign

Building Web 2.0: A Case Study for Simply Fired’s Redesign

So today the Media Crumb team, with the help of Simply Hired’s Ops team, launched Simply Fired.com into the wide open space of the web. It was a two month long process for MC and something we really enjoyed working on. It is not often that a design & development firm can say they have worked for truly helpful and forward thinking clients such as Simply Hired so we thought it would a perfect case study for the new MC site and blog. So if you ever wanted to know what is takes a small company like ours to build a “web 2.0″ (what ever that means) type site, check out or little case study of Simply Fired.

Background

Before we get into the process first lets talk about what Simply Fired was like before the redesign. As you can see from the previous look and feel, the design was in need of some serious help out of the 90’s and back into the world of today. The great thing about a design like this is that a firm like ours can basically start from scratch without having to worry to much about carrying design elements over. So all intents and purposes, it’s really more of a new design than a re-design.

Before we got our hands on the site, Simply Fired was basically a blog of fun, interesting, or silly stories about being fired from around the net. The site also acted as a place for Simply Hired forum members to submit their own fired stories to be entered into monthly contests on the Fired site. The main problem with this idea was that forum members, on a completely separate URL, would have to resubmit the same forum story from the Hired forums to the Fired site. Not only that, but the submission was a simple email contact forum and not very engaging to the user. Sound confusing? That’s because it was.

So the idea behind the redesign was to completely stream line all the elements of the forum, the blog, and the stories into one easy to use site. The biggest issue with this was ensuring the old information, such as the blogs and forums, would remain untouched as well as keeping the forum on the other domain of Simply Hired. Users would need one login for two different domains and both of those domains needed to share stories seamlessly across URLs as forum posts and story submissions. Obviously this took quite a bit of tricky cross server scripting and session handling as well as getting different pieces of software (like Vbulletin, Movable Type and Pligg) to talk to one another. Not the easiest task, but doable.

Design

Then again before we could even think about the development side, we had to figure out how the site would be laid out. As I said before, we were able to start from scratch and really take our own direction with the project which was great for the MC team. The biggest problem most clients have with designers is trust. When someone hires you to design something, they need to do so with total trust in your abilities as a designer. Without it, the client puts to much pressure or input into the design which can lead to something the end users of your website hate.

In order to combat this issue, MC sent out our “homework packet” to try and decipher what Simply Hired envisioned for the Fired site. The packet basically goes through the gamete of likes and dislikes, examples of other sites, typography, layout, color schemes, themes and more. For us, it is the best way to gather optimal input from the client without having to much guess work during mock up time. From there we build out our basic layout and refine the wire frame till we both agree it’s perfect.

This frame is then used as the base point for both mock ups and internal pages for the rest of the site. Using this in conjunction with our “homework packet” we started to build out the first set of mock-ups for the Simply Fired homepage. We usually only build out the homepage in a mock-up if there are no huge differences planed for internal pages. Some firms like to give out extensive wire frames and mocks, but in all honesty we find it slows down productions time immensely and only offers more room for sign offs and changes.

With Simply Fired, the team wanted to move towards an office theme. At first we thought of a simple desk space with office equipment in it, but soon realized that a site about being fired should tackle more of a distracted and depressed look. Most of these ideas came from the constant preliminary talks with the SH team and ours. With it, we came up with the final design examples you see below. You can see our progression through our first idea until we finally settled on the design you see today using their very own logo.

MC was lucky enough to have hit the nail on the head in terms of design and layout thanks to both teams constant input and details for the sites direction. The rest of the process was simply to build out the XHTML and CSS so that both teams could review things like color, font sizing, and basic changes to layout for blogs, stories, and other internal pages. In the end we love how the design plays on the fired theme and compared to the early mock ups, the final does well with both font and color scheme. Lucky for us, Simply Fired liked it too.

Development

Before we began initial development we had two paths we could take:

  • Our own “digg clone” implementation using a foundation content management system (CMS) like Drupal.
  • Rely on an open-sourced design that already existed with this focus like Pligg.

There were some Drupal modules that would provide the voting mechanisms but to build a site that properly mimiced that of Digg would require additional pre-existing and custom modules to fit the look and feel of a true “digg clone.”

The other option, Pligg, was a content management system with a single focus: story submissions and voting. The choice seemed obvious.

With Pligg as our choice we had to then find out what it provided and what we would have to implement ourselves. Most of the functionality requested by the Simply Fired team’s proposal was already in the package with the exception of a voting system and a few custom modules for administrating contests and tagging additional text introductions onto category pages.

The biggest obstacle requiring the most intrusive software additions into Pligg would be binding it into the Vbulletin account information. The one theme that everyone agreed on was a solid user experience.

To allow users whom belong to their VBulletin forums to login and post stories on their new Pligg CMS they’d have to share account information at some level. That meant re-implementing all account authentication from a single source which we chose VBulletins accounting records because the forums were already established by Simply Fired and we wanted to utilize what already existed, not re-invent the wheel.

Unlike most Pligg implementations ours is unique in the fact that it really uses all authentication and user management from a VBulletin database while maintaining a secondary set of account information for Pligg’s story submissions. The few fields that were in common are kept in sync at all times. Once this was implemented the most important functionality was finished.

Unfortunately, we soon found out how beta Pliggs code truly was and ended up having to almost completely rebuild the way pligg handled voting, searching, tag handling, URLs, live viewing, tag clouds, multimedia and stories. Some of these issues revolved around Pliggs inability to support usernames with spaces, something VBulletin allows. Our implementation authenticates using the VBulletin system so many functions that display the username had to be tweaked in order to allow for spaces.

It is of no fault of Pliggs and we would still recommend the software to anyone that simply wants to clone diggs features. In fact the crew over at pligg.com are constantly adding new feature sets and fixing bugs so I’m sure it is only a matter of time before they release a truly stable and semantic version. For us, we simply found that we spent way too much time fixing things and creating mods of our own then actually spending the time on completing the project.

The Simply Fired team wanted a voting module that worked much like that of the word-press voting module, so we molded our own around that concept. We also had to handle image and video submissions so users could share their stories visually. We created a bridge between Vbulletin and Pligg beyond that of authentication, allowing people to submit a story once in Pligg which would then automatically post the same story inside the Vbulletin forum in real time. The same was done if users posted inside the forum as well so that stories would automatically be submitted to the Pligg interface using the same users ID and username.

The VBulletin sync occurred via cron job because our goal was to leave the original VBulletin code untouched. This was done for two reasons: VBulletin is all but impossible to read and follow along with the fact that the site ran stable with VBulletin alone, changing its behavior added new dynamics and additional bugs that would slow down production.

To update the Pligg site “in real time” for the latest Movable Type (MT) blog, we created an MT template containing the latest blog data and fetched it from the MT site using PHP to open a web session and fetch the data on demand. This allows Simply Fired to cross-promote the Fired Blog and SimplyFired.com using the Pligg environment so that members could keep up-to-date with their blog while checking out new stories to vote on.

Beyond that we built additional of ways to display your own dynamic content based on tags and/or categories so the Simply Fired team could have total control over the data that was displayed for each area of the site. Utilizing Pligg to build our own Administrative modules took us a matter of hours to stabilize and demonstrate to the Simply Fired team. Our first module, the Pligg voting module, was built using some of the current modules as a foundation, additional ideas based on a popular word-press voting system and a little creativity.

We also created a module for adding text-descriptions to running contests based on their tag names, a full contest module for creating, managing and allowing users to submit their stories as contests. To top it off, we created a category text module to allow the administration to build additional dialog, promotions and introduction text when a user is searching for stories using the category links.

As stated, our biggest struggle was with Pligg and its instability. Running a few releases of the Pligg beta proved to be a large amount of work when it came time to update to a later revision. All of our code had to be migrated (in some cases line-by-line) because of the dramatic changes. In the end, old bugs were fixed but new bugs arrived that we had to handle. Searching for tags simply did not work, search itself was buggy at best, every social bookmarking option was malformed and broken and we still haven’t figured out how to get friendly URL’s to work “out of the box.”

Luckily the Pligg developers keep fairly clean code with understandable logic, something we cannot say when talking about VBulletin. They have not over-engineered and abstracted the project to the point of obscure code practices which means when Media Crumb finds a bug, we can fix it without any prior history in the code. They’ve not yet moved to a full and easy to use module system but adding our own custom modules proved to be simple and straight forward. The only downfall, they’re pretty hard-coded into the project (unlike the way Drupal’s CMS is designed).

To see more on Drupal vs. Pligg please checkout Derricks post on this topic.

In the end, it probably would have been easier to create something from scratch, but we also love all the work that is being done over at Pligg. Instead we built a true web “mashup” and created something that really interacts with the user on many levels. Now that the beta is finally launched, I can only hope we can continue to work on flushing out any unsightly bugs that we might run into and build an even better version of Simply Fired. Until then, I’m just happy to finally have some time to sleep. Thanks to the Simply Hired team and everyone that worked on the project. You guys really are a fantastic company and I hope all our readers enjoyed this little trip into our design and development world.

Advertisements
Categories: News, Web 2.0, webdesigner
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: