Marvel Internet Group blog

Customer service email management can often be problematic for companies that offer email based support for their clients. Marvel Internet Group is responsible for handling customer service email messages of some applications that we have developed for clients. One such application has over 1400 user’s support request to manage; we do this with just two staff, before it is even time for lunch.

For some it can be difficult to co-ordinate efforts to ensure that a customer’s inbound enquiries are resolved as quickly as possible. Using a highly structured system for so few staff members will lead to increased cost per response and slow down overall response time. A system that is too simple will mean co-ordination failures leading to confused or neglected customers.

Marvel Internet Group’s solution to this problem is to use a Gmail account for customer service email management. This is achieved by creating a single Gmail address for all customer service support requests. With Gmail’s labelling feature we can quickly label emails based on source so that the support person can be focused on supporting a single application or all applications’ customers. The general work flow that prevents neglect of customers as well as ensuring a streamlined support process is to check, label, and action. This involves having the first person to view the mail account go through all mail and either archive, label another staff’s name, or take action on an email. Then as other staff members check the account they can see which items require their attention.

Prior to implementation of this customer service email management system we had difficulties delegating and following through with customer enquiries that fell out of the support staff’s field of expertise. Using labels such as “waiting”, “todo”, and “complete” each request can be delegated and tracked with ease with staff members in and out of the company. The result of utilizing this customer service system is greatly reduced time spent on support as items are either actioned, delegated, or waiting. Finally an end-of-week or end-of-month review of all incomplete messages prevents any request from falling through the cracks.

To try this for yourself simply create or forward your support emails to a free Gmail account and let your staff understand the simple work flow of: check, label, action. Having your support request come from custom support forms will also save you even more time!

It is about 1month since we started building JustRosters, and what a month it has been! Paul, Alan and I are working on it full time at the moment, and hope to have it complete launched in around 2weeks. The original plan shows building the front-end website as step 6, but in reality this was happening at the same time as the code writing. We finished the front-end ‘store front’ first, so it’s time to share some of our experience and results (print screens can be found after the fold).

We had already established a basic look and feel while designing the back-end mock-ups, so the front-end needed to become an extension of that. Like any web entrepreneur, I spent a few hours half my life looking at other ‘successful’ sites with a similar target market, noting down design and navigation elements I liked. I built a basic sitemap in notepad, and started writing copy for each page. The sitemap went like this:

• Homepage
• Why JustRosters?
• Pricing and signup
• Order pages (linked from pricing and signup page)
• Affiliate program
• Login page x 3 (for administrators, staff, affiliates)
• Contact us page
• Any legal pages I needed + a sitemap, 404 page etc.

If you take out all the ‘standard’ web application pages I was left with 4. The homepage, the ‘why’ page, the pricing page and the affiliate program page. These had to be ‘conversion kings’, so I was intent on making them perfect.

It’s funny, most people think a designer is responsible for what a website ANY type of interface ends up looking like, but I think the copy writer has an equal part in the end product. The words we chose ultimately decide how each page can fit together. After what felt like an eternity of writing and re-writing sales copy, (ok, it was only about 4days), I got Alan onto the designs.

Nothing builds excitement quite like watching a front-end site come together in front of you. I was extremely impressed by how it was unfolding, and found it hard to stop hitting the refresh button every 5mins Alan was working on it. Here are some screen shots of what we came up with:

There is still a lot to do between scripting the home-page demo movie, having the legal guys go over the legal stuff and getting all the copy re-checked by a cool little Aussie start-up called Editeam. The semi-completion of the front-end has provided a huge psychological boost for the team and an opportunity to go get some feedback from some of the people I contacted way back in stage 1.

Hour logs show about 40 hours spent on copy writing and 75 on design. It might sound like a lot for a 15 page site, but I figure the difference between a 4% conversion rate and a 2% conversion rate could be the difference between becoming a millionaire or just a 500thousandaire

JustRosters is an internal project for us here at Marvel Internet Group. It is a side project that is commercially unproven and therefore a risky investment for the company. With that in mind it is crucial for us to be able to complete the project as quickly as possible in terms of both man hours and actual calendar days. To help us achieve this we decided to comb through our previous work and build a reusable PHP library of our most commonly used functions. This collection of loosely coupled functions allows us to easily enhance any code base; belonging to either a client or Marvel Internet Group.

Our code library is split into three parts. One library contains global functions that are included in Cake PHP’s bootstrap file, which is loaded right after the configuration file and before everything else. We currently place debugging and some custom date/time manipulation functions in here so that it does not have to be duplicated elsewhere. Another part of the library is converted into a Cake PHP component. The custom component allows us to reuse convenience functions that are needed inside our controllers, such as permissions management, emailing with PHPMailer, PDF generation, etc. The remaining parts of our library are turned into a custom helper that performs view related formatting.

In total we have reused about 700 lines of code with the three files combined. Using the general rule of thumb that a programmer will produce about 100 lines of quality code per day we practically shaved seven days off our development time before we even started. The cycle of library building will continue and expand with JustRosters. Being one of our most Javascript heavy projects we are also writing a substantial amount of reusable Javascript code that can be combined into another library, or into jQuery plugins, that can be used by the development community as well as our future clients.

Deciding how (and what) to charge for JustRosters was definitely a task I had under-estimated. I started by looking at the pricing for some of sites I discovered in Part 1. Of the sites with pricing listed, (I hate sites that do not list prices!), there seemed no typical pricing model. I decided to tackle this problem from the ground up; for my benefit as much as any future clients.

Once off vs. subscription
This was a pretty easy decision to make; monthly subscription. Client benefits of the subscription model include low up-front cost, ability to stop using the system anytime without losing an ‘investment’ and the reassurance we will continue to work for their business month after month. Benefits for us include a steady flow of income on those rainy months and an easier sell.

Include SMS, or charge extra
One of the major costs in running a service like JustRosters will be the SMS’s notifications which are sent out. My initial thought was to roll this into the cost of the subscription; I quickly decided this was unfair for businesses that do not use this feature. To make things simple I created some SMS credit bundles (with pricing related to quantity), and made a note to include a small amount of SMS credits in each months renewal, for free.

How to split the pricing levels fairly
While providing a ‘one size fits all’ pricing scheme would make things simple, it is not really practical. As the amount of staff each company has increases, so will the cost of our time / resources to support them. Comparing information on typical business sizes I decided on 4 plan sizes:

Micro: 0-10 staff.
Small: 11-25 staff.
Medium: 26-50 staff.
Large: Unlimited staff.

While the unlimited plan seems fairly open ended, I figured income from SMS bundles will increase relative to the businesses size, so I was not concerned about the strain a 500-employee company might put on the system at this stage.

Summery
Now I knew I would charge businesses of each size monthly, it was time to build a spreadsheet factoring expenses and a desired profit margin. I would love to be to say this delivered me some golden numbers which I have used, but it really only gave me an idea on what I ‘needed’ to charge to make the business viable with around 500 clients (my first goal).

I rounded these numbers to slightly prettier ones, and moved on wondering how I ended up spending a day on something I thought would take a couple of hours

EDIT, February 27, 2009: I have decided to reduce my prices by about one third. I have done this for a couple of reasons. First, the weak Australian dollar. Since our pricing is based on USD, I do not want my fellow Aussies having to break the bank to pay for JustRosters each month; the economy over here is bad enough for us. Secondly, the software is brand new. We really want to get as many people on the system giving us feedback ASAP. We can always move the pricing up later and hold it for the guys that get on it early.

EDIT, March 02, 2009: One of our competitors has just re-launched their website with new pricing. I am happy to see it comes in around 3x the cost of JustRosters.

The process of conceptualizing, designing, and implementing web applications is a complex one. It requires both the client and the development company to come together and share enough domain knowledge to enable constructive communications about the project. To reduce the impact of mis-communicated ideas developers need to be agile, which involves being able to quickly confirm, implement, and get feedback on ideas. Therefore, any tool that helps us reduce the time required to implementing common functionality helps our clients greatly. It is with this in mind that Marvel Internet Group decided to standardize all projects on a development framework. That framework is CakePHP.

CakePHP is a framework started in 2005 that is compatible with PHP, a ubiquitous web development programming language that is used by more than 20 million websites, that follows the “model, view, controller” design pattern. CakePHP allows us to implement client-specific features using common functions that have been heavily tested and debugged by the entire CakePHP community. CakePHP offers polished database abstraction, templating, AJAX, caching, testing, and security features that can be implemented in client applications. Those pre-built features allows us to have a solid foundation from which we can quickly realize our clients’ vision in the form of a working prototype.

The productivity gains that comes with CakePHP would not be so great if a lot of time had to be invested in learning it. That is why CakePHP’s excellent documentation and active developer community means that we can quickly train programmers to become familiar with and productive with CakePHP in a matter weeks.

A real world case demonstrating the benefits of CakePHP comes from our experience with ICEF Online 2.0’s development. For this project we managed to take the version 1.0 program, which was developed without a framework, and re-code it from the ground up with 20+ additional core features in three months using one full time and one part time programmer. The part time programmer had never used CakePHP before and was able to implement our ordering system with less than one week training.

The product delivery time was a great improvement over version 1.0, which took well over six months using the same amount of human resources. We also saw improvement in the size of the code base, shrinking it from 137 megabytes to just under 50 megabytes. With all things being equal we have basically managed to half quoted times in our client application development and create a much higher quality application. This was possible because we were able to focus on what was important to the client, instead of worrying about the low level mechanics of the application.

Recently I started creating the mock-ups for the JustRosters application. Part of this application is a calendar table that needed fixed headers and columns, with scrollable content area to fit in a restricted space. This concept can be seen in programs like in Microsoft Excel or similar spreadsheet programs, how the row and column numbers remain along the top and side at all times. After a bit of research, we found out that this hasn’t been done in HTML / CSS before, only full JavaScript applications with big budgets (like Google Spreadsheet). Since this wasn’t our case, we were after an open source solution, but this wasn’t easy to find or achieve.

After what felt like a million Google searches, we finally came across a script that would have done exactly what we wanted it to do, only to find out that it was incomplete. It had some of the features we needed, fixed header, fixed columns and scrolling of the inner data cells while remaining lined up. It just wasn’t cross browser compatible, did not support fluid width columns or row heights. I installed the script and after fixing it up for a few days, I got it to work….. sort of.

What we needed was to have the data table take up maximum width and height of the browser content area, but doing this broke the script or the cells didn’t line up. After a lot of trial and error, tweaking the JavaScript and the css, I was finally able to create a fixed header and column table with dynamic resizing based on browser window size, row count and column count. The resulting table can be viewed here for now, and will be integrated into the finished JustRosters staff scheduling application. When I get a chance I will post code snippets.

At this stage of development, all the designs we had on paper were rough sketches and ideas in our heads. So it was now time for me to step in and create digital mock-ups that turned these ideas into a functional interface.

The first step was to create a simple template for JustRosters to make user interaction as easy as possible. I created the design using Photoshop, and then converted to a HTML template using my favourite scripting program, Notepad++. We kept the template very minimalist to maximise screen real estate for the major functionality, including the main roster interface.

We also decided to have all user ‘action’ forms displayed in a toolbar on the right side, which is shown at all times. The forms are added to the toolbar using the javascript library jQuery. We used the side action bar for a number reasons:

1. The user never has to navigate away from the page they are currently on to perform related actions.
2. The roster interface is never covered by a pop-up when a action needs to be made.

jQuery was used a lot throughout the interface for a number of different functions and effects, from adding the input forms to the toolbar, to styling the tables and forms. I use it because it is very easy to use and lightweight, and it achieved its functionality automagically without adding extra markup to the HTML.

The next step was to turn each of the sketches into functional pages, this is where we ran into our first major hurdle. The main page of the roster interface needs to display a calendar that shows the dates of the roster period along the top row, and the staff members of the roster listed down the left column. It sounds simple until you start testing with a 2 week roster featuring 50 staff…. in a small screen. We needed the grid to scroll but it was important to keep the top row (dates) and left row (staff) in view at all time. After about 4hours of Google searches we found no real solutions (but hundreds of people looking for one). After a lot of playing around with this, we got it working!!! When we get some time we will release the code snippeits.

From here on it was all smooth sailing. The rough sketches were transformed into an easy to use interface.

After 96hours working on the mock-ups (40hours spent on the roster view alone), they are finally complete. Now it is time for Paul to step in and code the guts of the application, turning it from a puppet to the real thing. I will have bigger rant about the roster view shortly

The sketches were done and we were itching to get started with the backend HTML mock-ups in stage 4.

Because we have been involved in the ‘setting up the project’ stage so many times, we find it quick and easy. I will leave to more technical details for Paul to cover shortly, but here is what I needed to do:

Step 1 – Buy a domains, certificate and hosting
I headed over to webhostingmarvel.com (shameless plug) and ordered a domain name, secure certificate and some US virtual dedicated hosting. It just so happened I had a 100% discount code I will consider moving the site to a fully dedicated server before launch, in the meantime the VPS will be fine.

Step 2 – Setup email
10mins later the hosting was setup and domain propagated. I headed straight for the Google Apps signup page. I won’t get started on why I love Google Apps in this post, let’s just say it allows me to forget about the dramas associated with standard email accounts and support ticket systems. For now the free addition will do. If we manage to fill a 7.2gig email box with support requests, shelling out $50/y for a Google Apps premium account will be the least of our worries!

Step 3 – Install Live help and mailing list software
I had already made the decision to exclude contact phone numbers from the JustRosters website. This is not because we are a dodgy company, I just think Live Help is faster and offers more accountability (a transcript of every issue) compared to a phone call. We can also monitor the Live Help from home so our support hours become almost 24/7! Our live help system of choice is Livezilla. It takes an hour or so to setup but it is free and has proven very robust.

Our mailing list software of choice is Pommo. Again, free, and very easy to setup. I got Alan to throw a subscribe box on the JustRoster’s homepage in case anyone actually reads this blog and wants a 6months free trial when we launch (hint, hint).

Step 4 – Build a shared doc with usernames / passwords
I created a new Google Doc and pasted in FTP, DB, Google Apps details etc. This doc is then shared with Paul (lead developer) and Alan (lead designer). If we need to add more staff at a later date, I will create separate documents to share with them. While having usernames and passwords pasted in plain text does not sound ideal, it beats using the same password for everything, writing them on a bit of paper or emailing them around. The Google doc can only be accessed via each of our master passwords over a HTTPS connection, so I am happy with the security.

That is the project pretty much setup and ready to get started on. Only about 3hours of my time needed and the cost of a domain, certificate and server. Stay tuned (or subscribed?) for Paul’s technical follow-up post and Alan’s coverage of Part 4 – Building the HTML mock-ups and design.