Story behind our new website (Part 1): The Roller Coaster Ride of our shiny new Tour

Written by on August 29, 2013

Revamping a website is a lot like giving birth to a baby T-Rex. It’s painful, it takes a lot of effort and more than a dozen weekends. But at the end of the day you have your own baby T-Rex!

But most importantly, it is an experience worth sharing. Here is our behind-the-scenes story of what went into creating our new website – from conception to her first prom date.

This is a good story. And all good stories start when you set out to make something better. That something was our Tour Page. The truth is, the story of our tour page started way before we even thought of redesigning our website. In fact, it started roughly a year and a half ago…

One of the biggest advantages of being in a company that eats and sleeps customer service is you have this kind of direct connection with your target audience. When we go to events and trade shows, demo Freshdesk to a prospect, or meet an old customer over coffee, lunch or a pending support issue, we have an extra pair of eyes and ears tuned in. And roughly 1.5 years back, we knew our customers came to us with a very specific problem – they needed to get their support processes organized, managed, automated and personalized. In that order. And that’s what our old tour page was all about.

What our old tour page looked like

Things were beautiful, and we were pretty happy with our work. For six months. Our tour page was an elaborate buffet spread of the intricate features and capabilities Freshdesk offered. People were singing praises, but it still felt like something wasn’t quite right. We’d been talking at startup events, meeting customers at larger customer management shows, on the road and off. And we realized one thing over and over – different customers wanted very different things out of Freshdesk. Our Tour wasn’t really doing justice to any customer if it was trying to cater to everyone just the same way. We had to start by figuring out exactly what each of our customers wanted out of their support software.

Positioning 1o1: The Starving Baby doesn’t care about your spread of dessert.

Most businesses genuinely care about offering customers a better experience. But with neither the tools nor the visibility to back them up, their customer service structure ends up being pretty chaotic.

To a support team that is drowning in chaos, there is nothing more important than getting things under control. And there is no point in showing the powers of SpideySense and Laser Vision, when all they want is something that helps them stay afloat. To create the perfect flow to tour Freshdesk, we had to get down to the Customer Service Maturity Pyramid.

The Great Pyramid of Customer Service Maturity

Types of customers and their support needs

Most support teams try to evolve up the Pyramid, starting from chaos to a place where their support system is perfectly aligned with what their business wants. But the needs of a support team at each stage along the way are very specific. In short, once you overcome the troubles in a particular stage, you don’t really care about them anymore.

Of course, a business at a specific level of maturity in the pyramid would still need to make sure that all it’s earlier needs are met. It was obvious that a visitor to our tour page should be able to flow from Chaos, all the way up to Business Alignment, learning about the capabilities of Freshdesk at each stage along the way. But for the visitor who had already designed a proactive support process, the stories and capabilities at the earlier stages would be a no-brainer.

Creating the perfect stops

Everything I had to learn about designing the perfect tour, I learnt it from playing Railroad Tycoon…

When we sat down to design our tour page, we wanted to make sure we had the right number of stops along the way. Too many segments would just be distracting to the visitor, and too few would just end up missing the point. We finally decided we’d stay true to the Pyramid and go with four:

Stop 1 –  From Chaos to Control City : For the business that was stuck in chaos, the first stop should show them what they needed, to wrap a finger around their support processes.

Stop 2 – Getting from Reactive to Proactive : For the support team that was simply reacting to customer issues and fire fighting with support problems after they happened, the second stop had to explain how they could be there and show customers they cared, through social media and their brand communities.

Stop 3 – Support at Scale: For more mature teams that had a good idea of what offering great service really meant, the problem was scaling this success as they grew. The third stop was how the team could replicate the great experience they offered a handful of customers, over hundreds of thousands.

Stop 4 – Aligning Support with Business: At the right end of the spectrum, companies that already had a system that seemed to do the work needed to make sure their customer service strategies were in line with their core business goals. These were the guys who passionately cared about boosting their brand presence, increasing word of mouth and creating engaging experiences for customers.

Now that our Tour got its story and stops in place, all we had to do was get it from our heads to HTML.

The Longest Yard: From Ground Transport to Cable Cars

No tour is complete without a streetcar; you can get off at your stop and wander, or go the whole way and get a feel of the city. That is what we wanted our tour page to be like. But if you wanted a legend, like Superman (not the latest movie – just the series in general), you need more than just a strong theme. You need visuals that make your eyes shed tears of oh-my-God-that’s-AWESOME.

So we decided to give the support reps touring Freshdesk something cooler – cable cars.

After a few more sleepless weeks and a total of 8 iterations (yes, we actually kept count), we got something on Photoshop that made our marketing, design, usability and almost about every other team fall in love. I say almost because there was a blinding light and our web-devs disappeared into Jedi mode to bring the Photoshop images to life.

The new redesigned Freshdesk tour page. With a cable car!

Since we decided on a single-page flowy design, we couldn’t afford to load all the text and images at once. A little bit of crafty Javascripts later, we made each brilliant screenshot load only when someone wanted to see it. But the most fun part for the HTML gurus was making the cable car do its tricks. Of course, we are all about the glamour, so we made  the station light up a little bit and animate when the car passed through.

Go on, check out our new Tour Page on the Freshdesk website and let us know what you think. Next in line, we’ll tell you how the little cable car in our tour page created a ripple effect on our entire website.

 

Subscribe for blog updates

  • We thought our beloved Freshdesk couldn’t get much better already, but here you guys are! 🙂 #greatread

  • Nitzan

    The tour looks great. But the first stop on it says “Support customers, not Spam”. I use Freshdesk and get a consistent stream of spam (to my Freshdesk email address). The only suggestion I have received from Freshdesk for controlling spam has been to create filters for particular words. There are so many advanced ways of detecting spam out there, there is no reason I should have to develop my own spam filter…

    • freshdesk

      Hi Nitzan,

      Thanks for reaching out to us! We’re sorry that your Freshdesk account is getting a lot of spam. The reason Freshdesk doesn’t have its own spam filter is because all of your email is already filtered by your email provider. And since most email providers usually have very sophisticated state-of-the-art spam filters, we felt ours would be redundant.

      • Nitzan

        Thanks for your response.
        Spam is being received by my @[helpdesk].freshdesk.com address directly, so it never has a chance to go through any of my email providers.
        My own email address, support@[helpdesk].com, does not see any of these spam messages, so its spam filter is of no use.

        • freshdesk

          Just an idea – but you might consider setting a rule that marks/tags emails not directly sent to your support@[helpdesk].com address (as spam). That way, any emails that bypass your official support mailboxes will automatically get marked as spam…

          • Nitzan

            Interesting thought. I will try that.

    • Actually everyone is using the filters inefficiently. If you have your own domain e-mail, then you use filters to setup any type of e-mail address by enabling catch-all. Don’t use generic e-mail addresses unless you’re casting a broad net. Expect all kinds of e-mail you be captured using generic e-mail addresses because it all pours into the queue. It’s purpose is to cast a broad net.

      Convert relevant tickets into cases, then create an e-mail address as “cases” when replying to customers. This enables you to keep track of relevant communication.

  • Mohammed Poonawalla

    The new website is highly commendable. You guys have done a great job. I was looking to get a site designed along similar lines. Could you please let me know if you outsourced the development of this website to a third party or was it all in-house? Thanks

    • freshdesk

      It was all in-house – every single pixel, HTML, JS and screenshot of it! Not to say we did not get a lot of inspiration from some brilliant resources like FastCompany.com and Moz.com (and got an extra glass of ‘wow’-ism at epipheo.com). In the next few series I’ll also share some of the cool code hacks we learnt and implemented along the way…

  • Hariharan

    I’ve not seen the old Freshdesk Website, and so unfortunately, I wouldnt be able to draw comparisions. But the current website seems really simple and yet fabulous. It is a perfect balance between content and images, both not too much and not too little. The images are crisp, clear and catchy. The chair car effect is a great touch and the subtle animations are too commendable. It is these little things that take more time and extra effort to be developed. The website is really wonderful and is very crisp and neat, and these small details and improvisations show how much effort and pains the firm has taken to make the website as much user friendly as possible.

  • Jomon John

    Hi
    I have gone through your site. It is awesome . Why are you not using responsive webdesign .
    Now a days most users uses Android/Iphone to browse web . If you make it responsive , it will help to get a good user experience while browsing yoursite from mobiles/tabs

    Regards
    Jomon

  • I thought the roller coaster sfx was sweeeeeeeet! I’ve seen a lot of timeline sfx, but this is the most creative. Most of these effects can be seen at CSS Drive, but this was a new one. Very creative indeed.