Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×

Last year we wrote about how we built a bespoke project management system for one of our clients using WordPress. The post has received a lot of attention and a fair amount of work enquiries. Many people have been interested in how WordPress, with it’s fairly low starting cost, can be capable of producing this type of web app, how well it works and what it’s limitations are. This post will go into some more detail about what we did, the problems we came up against and how we addressed them by launching version 2 earlier this year.

Version 1: The Project Management System

During our initial meetings with the client, we brainstormed a roadmap of the system they wanted. We broke down each requirement, going into as much detail as possible about the data they wished to capture and segregated the ideas into potential versions. Initially there were four versions, each one building on the last whilst adding new or extended functionality. The wish list for version 1 was the following:

  • Submit information about projects.
  • Receive notifications when new information was entered.
  • Include basic search functionality.
  • Make it mobile!
  • Everything should be done via the front-end. Absolutely no back-end access what-so-ever.

With this in place we drew up some wireframes in order to show the client how their information would flow together in version 1. Whilst early days, this gave a decent enough feel of what would happen on each screen, when data was entered, the overall functionality, etc.

Making it Mobile

It’s worth noting at this stage that right from the kick-off, mobile was of top priority and was thought about at the highest level, every step of the way. This was because a lot of information is recorded out in the field… literally in fields. Staff working on sites report back on the day’s progress and doing so via a mobile device would speed-up the process rather than having to email it in later or submit a paper record. Making the app mobile-first and as lightweight as possible was essential to how much easier it made tasks, often on very slow, 2G connections.

PMS Wireframe

Once the wireframes were complete, we mocked-up a few graphics in the form of icons and buttons and got to work on building the web app. The overall design was less important in version 1 as the client wanted to focus on functionality to see if the solution was going to revolutionise the way their business handled project information. We soon had a working solution with the majority of the functionality implemented and invited the client to begin internal testing between a few strategic members of the team. Most things worked as required and after a few bug fixes, the first version of their Project Management System (PMS) went live.

PMS v1

Very little was added in the first few months in order to give all the team a good chance to use it. It wasn’t long however, before we had to add a form to capture suggestions for enhancement and formulate a new wish list of features – some of the suggestions were already on the roadmap but some were fantastic new ideas.

Assessing Version 1

By Christmas 2012, all we had added for immediate use was a ‘Log Out’ button for the team members that shared a computer. Although we hadn’t integrated the notification functionality that was asked for initially, this led us to look at how WordPress handles emails and after deciding that this area was woefully inadequate, we started work on our own plugin to change that. More on this later.
After months of use, new features for organising the mass of content that was accumulating was desperately needing to be added. The lack in design was also beginning to have an effect on how people were navigating the system so, over the holidays we put together a feedback form and asked the team to all fill it when they returned in January. We felt this would give fresh, honest answers. The results were both interesting and surprising in many areas.

PMS Infographic

Version 2: The Hub

Armed with a new list, we started thinking about version 2. In this version, we wanted to focus on three areas:

  • The overall navigation of the system.
  • The organisation of the projects and their information.
  • The design and visual elements.

Version 1 Problems

Up until now, projects were created using a simple front-end form by management staff only. Posts were then made and added to a category via a drop down list. This was then outputted on an ‘All Projects’ page and required a team member to ‘hunt’ for the project they needed through the long list, organised only by alphabetical order. The design was also poor in that there wasn’t really anything that provided a single point of navigation to the various pages. Additionally, notifications for new projects, posts and comments was missing.

Addressing the Problems

Instead of wireframing a solution first, we just dived into building the problems out of version 1 by using Twitter Bootstrap – a front-end framework for development of web apps. This took the hassle out of having to design a bespoke set of icons, layouts and interactions for the client and helped to keep costs down.

As all the visual elements were already catered for, we focused on the site navigation and utilised a static bar across the top of the app, providing access to all areas as well as new project and post creation and site search.

Hub Navbar

In order to organise the projects, we wrote some custom PHP that filtered all the projects by their type (inherit in their pre-designated site code – PROJECT-TYPE/YEAR/SITECODE) and split this up further into years. The list is now very easy to scan through in order to find a project.

Hub - All Projects

Enhancing Version 2

We then wanted to add some new features both from the feedback we had received from the team and from the roadmap. The list looked like this:

  • Allow management to edit posts.
  • Allow further organisation of projects by adding project ‘folders’.
  • Allow management to delete posts and comments.
  • Add support for threaded comments.
  • Add a dashboard (Home page) for quick access to miscellaneous but useful information.
  • Develop a plugin to handle notifications.

Being all front-end, these enhancements were certainly more challenging than anything we had needed to integrate before. We quickly added post/comment deletion and post editing though – showing a button to only members of the management user role. We even added a confirm deletion dialogue box utilising Bootstrap’s modal windows for greater security and user experience.

Hub Delete Post Modal

Threaded comments also came together quickly too, requiring only a single change in the WordPress back-end and some styling to make the nested comments appear nicely.

Hub Threaded Comments

The Dashboard was a fun feature to add. Before now, the home page was fairly redundant and we found it hard to pin down what might be useful. We decided to add the date, a local 5-day weather forecast (fed by the fairly accurate wunderground.com), links to the shared Google Calendar to show which projects were being worked on today and a list of the ‘projects’ that they had created that don’t contain project information. This included some how-to guides, a notice board and minutes from office meetings. These ‘projects’ were useful to have access to but didn’t really fit into the flow of the information anywhere else in the app. Putting them on the Dashboard has improved their use and accessibility.

hub-dashboard

Finally, adding notifications was the most challenging. Whilst WordPress does have email notifications for some events such as new user registrations and password resets, it doesn’t have any way to notify users of new posts, comments, categories or anything else that you might want to trigger an email for. It also doesn’t allow you to edit the content of any of the preset emails. RSS isn’t much help here as the delay in publishing a post and it appearing in a feed is shockingly slow and whilst solutions exist to help speed this up, we realised that we’d be spending a lot of time on something that would probably not be particularly future-proof. Enter our custom plugin – Better Notifications for WordPress – which has solved the problem nicely. You can read more about this and download it for free from WordPress.org. You can also read more about this in our post titled ‘Better Notifications for WordPress – Our Second WordPress Plugin’.

Why use WordPress for this?

Plenty of people have asked us “Why did you decide to use WordPress for this? Wouldn’t Ruby on Rails have been more of a suitable solution?”. There are many answers to this but ours is this: WordPress is where our specialities lie. It also includes many of the functions that are required right out of the box such as user management, security and post/comment/category creation. Other solutions require modules to be added or functions to be coded from scratch. We felt that WordPress offered the most cost effective and professional solution whilst also making the development work as easy as possible. It’s also a very robust and fast CMS and is increasing in popularity everyday. The constant addition of new and interesting plugins means that a solution for a roadmap feature might appear overnight and be extremely cost-effective in order to implement – many WordPress plugins are released in their basic form for free.

What the Client has to Say:

“We are very pleased to have engaged Voltronik to design and build our online Project Management system, or the Hub as we affectionately refer to it. From design to implementation, we have been impressed with the quality of work, the attention to detail and the speedy turnaround of added functionality as we’ve needed it. The Hub not only connects our staff with project critical information, it does this across multiple platforms and was designed by Voltronik to have a simple but powerful user interface. When we need to distribute information quickly, this has proved to be an important feature of the system. We chose to work with Voltronik as they not only understood the solution we needed but they also showed an affinity with our company that has, without doubt, added to the final product. We have worked with Voltronik for several years now and we are currently working with them on further enhancements to the Hub as well as new and exciting projects that are currently in the concept stage.”

We’d like to thank Context One for allowing us to write about this project with some appropriate censoring of their internal information.