[Hackathon Mini Series] — Uplifting of Support Centre page
Welcome to our third blog of our mini series on our Hack-to-the-future hackathon. This week we have Miguel talking about how his team uplifted the support centre pages in just 2 days!
Hello 👋 !
I’m Miguel Gonzalez, Engineering Manager at Vodafone UK. A couple weeks ago I took part in the first post-COVID in-person hackathon in Vodafone UK Engineering. We called it “Hack the Future”, which sounds almost as cool as the BTTF-based logo the organisers designed for the event.
The overarching theme was “Create the Future”, which is one of the core Vodafone Spirits, taking risks, asking “what if” without the fear of failure. We formed 14 different teams with some initial idea about what to create, and we went into full “hacking-mode” for 2 days in both our London and India offices.
The hackathon team I joined was formed with people from very different skill-sets and backgrounds, but very well balanced: 2 UX, 2 enablers (Business Analysts and Product Owners) and 2 developers.
The problem definition was the existing Vodafone’s Support Centre page, which is hidden in a menu in the top navigation. In order to better understand the journey and potential customer pain points, we went through all the different ways customers would go to find an answer to their problems — and from there we were able to understand what worked well and what experiences could be improved upon.
We realised that, even though the existing page was well-designed, it was missing something quite obvious: the initial journey is the same for every type of user, regardless of where they’re coming from or what they’re looking for. In addition, its location within the top navigation made it quite hard to reach unless you really knew what you were looking for.
The evidence really supported this:
10% of our users feel they need to talk to an agent — that’s over 750,000 customers per year!
Upon our investigation of the support centre and competitor analysis, we then started designing what our ideal support centre would entail:
- Going back to basics ✔️- a good experience with onward journeys and guided outcomes
- Providing an effortless experience 👏🏼 — personalised, allowing customer to self serve and making use of established design patterns
- Going above and beyond 💖 — turning negatives into positives and being proactive
Hackathon — Day 1
The first day of the hackathon we completed the UX for a couple of journeys we wanted to study, and an initial implementation of it. We realised that we already know a great deal about the user in our site. If they’re logged in, we even have more information we can tap on to make a great support page:
- Which URL they’re in or are coming from
- What products and packages they already own
We created two main journeys using Figma that show what steps would a user go through until they find the information they’re looking for. One for logged-out users and one for logged-in ones.
For logged-out users, we could understand the URL they’re on to provide contextual information on products they’re browsing; however we made the search bar a prominent feature to make sure our customers could find the solution to their problems at ease.
Our logged-in journey uses as much information as possible from what we already know about the user. For example, which packages they already own, with which they might have a potential issue with that needs resolving.
The implementation
As with all hackathons, the major enemy you have is time, and we investigated the existing “Help and Support” page to see how it was working and what we could re-use. After some digging into the APIs it uses, we found that the page is using a third party service to provide full-text search and find topics related to what the user types in the search box. It requires a token that only lasts a few minutes, but that’s something we can easily work around for a low-profile Hackathon hack ;-)
We decided that our Contextual Help panel will use the same API and will have a set of predetermined terms to search for based on what we know about you. We tackled three different sources of data:
Session
The session information contains which packages you’re an owner of, and is stored securely in local storage, but any JS code running under vodafone.co.uk has access to it.
Current URL
For this, we created a map of RegExp to match against the current URL, and a term that would trigger:
{ regexp: /\/mobile-broadband-deals/, query: 'tethering' },
{ regexp: /\/checkout/, query: 'first bill' },
{ regexp: /\/pay-monthly-contracts/, query: 'pay monthly' },
{ regexp: /\/best-sim-only-deals/, query: 'simo' },
{ regexp: /full-fibre/, query: 'speed' },
{ regexp: /\/smart-watches-and-wearables/, query: 'watch' },
{ regexp: /\/broadband/, query: 'router' },Basket information
If you’re in the basket page, we will run some code that will figure out which products you have in your basket, and comes out with terms based on those:
{
regexp: /basket/,
query: async () => {
// ...
if (hasBroadband) return 'installation'
if (hasSimCard) return 'activate sim'
}
}Chrome Extension
Using Chrome extensions as a tool in Hackathons is an old-friend of mine. It’s an excellent way to get some code quickly injected into production websites to prove a concept. And that’s exactly what we wanted to achieve. So then we started putting together some code and injecting it into our local Chrome.
The resulting code on day 1 added an “Ask me anything” black tab to the left side of the page that, when clicked, opened a panel with a sleek animation, showing the same concept that we had all envisioned together as a team.
We used Vite in lib mode to compress all the dependencies and files into a single file that would make up the Chrome extension and React components to build the UI.
Hackathon — day 2
On the second day, the time we had to work on the project was reduced to only the morning. So we spent most of our day polishing the implementation, putting together a great presentation with outstanding animations. We also rehearsed a LOT since we wanted that the entire team presented the solution to the audience and the judges.
It was fantastic to see the creations of other teams and how great ideas everyone had. Unfortunately, the judges considered there were better solutions than ours, but we had a fantastic time, learnt lots, met new people, and put something together: that’s a successful Hackathon in my book!
The future
We believe there’s room for improvement in the existing Help and Support page and we’ve imagined a realistic approach to something that could change the way users get help, reduce their frustration and save everyone time.
The next step is to build the implementation as a Micro-Front end of any other solution that is easily to be incorporated by any pages where this could run. That’s something we, unfortunately, didn’t have time to build in 2 days.
Want to know more?
If this article has inspired you, and you want to know more please reach out to us on our various social media channels.
If you want to work with us, find us on LinkedIn and drop us a message, we would love to hear from you! ✉️
