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.
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
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.
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.