Redesigning online order tracking on

Pieter-Jan Voskamp
Jul 8, 2015 · 8 min read

A little insight into a better looking, helpful and fully responsive experience

Joining or changing to a new service provider for your TV, broadband and/or phone line can sometimes be a pain. As a customer, you expect your new service provider to make this process as easy as possible.

As a service provider (or any company), the initial touch points with new customers are of crucial importance. The new customer needs to feel at home, happy and needs to be looking forward to continue this new relationship.
Not only does the purchase journey need to be painless and positive, the after sales directly after becoming a new customer needs to be welcoming and helpful too.

After ordering your products from Sky, you are able to login to their website to track your order. This is where problems started to appear and where I was tasked to improve the online experience in every aspect in collaboration with my UX colleague.

Why order tracking sucked

At that time the order tracking journey received around 2.1 million visits per year. An estimate of 19% of those visits, resulted in a call to Sky customer support. By analysing the full customer journey and collecting customer feedback, we identified that the order tracking page was difficult to find in the first place. When a customer did find it wasn't giving the information and functionality expected from the service.

“Your tracking system is useless, it tells me when I ordered (I know that) and the fact that you’re processing my order? What you don’t tell me is has it left and what is the est delivery time…why do you say its a TRACKING service when its clearly NOT!”

As a result of this poor experience, a large amount of customers end up leaving the site and/or calling Sky customer support with the top call reasons being “Where’s my order?” and “I've got it how do I set it up?”. Part of the customers also visited the Sky Forum, a message board to discuss Sky and get help from other forum members.

Now, this all doesn't sound like a comfortable experience and you can imagine customers ending up frustrated, agitated and unhappy.
For such an important time of developing a positive customer relationship that could possibly last years, it’s off to a really bad start. It also gives the customer a skewed perspective of what the customer support might be in the future.

The old design

The online experience of tracking an order offered basic information of the status of the order. The problem being “basic”.

Image for post
Image for post
The old design for order tracking on

The old design consisted of a single page, showing the user 3 to 4 steps of the order progress. The page was non responsive, barely gave the customer enough information and used unclear and sometimes incorrect copy.

“Got an sms … once on the site I found only a generalised delivery message”

One useful functionality that was present was the ability to reschedule, but only on certain types of orders. The page simply did not give the customer what they were looking for. Customers were looking for more detailed tracking information and expected more helpful information related to their order. It needed to be clear what happens during the whole order process from ordering until completely being able to use their new product(s).

The challenge

One part of the problem of this page was the actual front-end design. The other part are the back-end services that power the page and provides the information that can be used to communicate to the user. To fully fix the problem, both parts need a full overhaul.
And this is where the challenge started. At the point where we were ready to visually redesign the whole experience, the same was not possible for the back-end services (in any near future). This meant we needed to work with the same amount of services and (limited) information that the old page provided, limiting us from adding many features and functionality that we would've liked.
At the same time, it’s an opportunity to show how much a full visual redesign can impact the performance of an online experience and ultimately the customer satisfaction.

Creating a structure, user testing and constant improvement

Working collaboratively with my UX colleague, we started from scratch. We analysed with our developers what data we could retrieve from the back-end service. Based on that data, we started putting the initial pieces together. We started brainstorming which data we could use and in which ways we could represent the data, while also keeping in mind what works and doesn’t work in existing online order tracking journeys from other companies.
Early on, we realised an order tracking journey consists of many detailed pieces of information, which could quickly cause information overload for the user. After many brainstorms, UX mock ups and multiple rounds of user testing we were confident that we had a framework that both used the available data and also had the capability to add information where the data was not able to provide enough detail (for example receiving confirmation of when a parcel has been delivered to the customer).

The start of a solution

The customer has only just started the relationship with the new service provider and their initial impressions are very important. For this reason, not only did we want the new order tracking journey to be clear and easy to use, but we also needed to achieve a certain excitement of having ordered a product from Sky.

Where the old design had all the information on one page, we figured it is better to present the information in a bite sized manner. Unlike the old design which created information overload, especially when there were multiple orders in progress. Each order had the staged visual progress block with accomponying copy, all stacked underneith eachother.

To prevent this information overload and making a journey that’s bite sized and enjoyable to use, we created a framework where any journey; be it a DVD purchase, a broadband installation, etc; consists of 3 pages.

Image for post
Image for post

It was important that we created a framework that would work for any type of order without having to redesign a new flow for each new product, future proofing it for any new projects in the future where fulltime UI/UX support might not be available.

Where all orders are shown that are currently in progress. Each order has bite sized information about the order and a CTA to view more information about this order by viewing the timeline.

Each order has a timeline. The timeline shows the progress of the individual order. It has a notification feed where messages can be shown to the user and a visual timeline that shows all the events connected to this order and their completion status.

If required, a timeline event can have its own detail page. The detail page shows detailed information about that individual event on the timeline.

We tried various ways of ordering the information on the timeline from linear time based, to event type based, to grouping events per ordered products (you can order TV, broadband & telephony all in one order). We user tested these variations and concluded that linear time based seemed to be the easiest to understand for the user. Grouping events per ordered product was also a welcome idea so we merged that with the linear time based timeline by adding the product group to each event, making it clear to the user to which product each event belongs.

To keep the future proofing of our work intact, we created various UI elements that are reusable in the many scenarios. We identified which types of information we currently needed to present on the pages and which types of information we could expect in the future.
At this stage it was time for some proper visual design, while I’d done some visual concepting already so far.

Making order tracking look good

With a lot of the base work done, I designed the full visual style of each little bit of the order tracking experience. Using clean white backgrounds, tidy typography and punchy colourful elements, I worked mobile first just as we did for the initial UX/wireframes. An interesting approach which forces you to focus on the main objectives of your design, as there is only limited screen estate. All of the designs also follow the Sky design guidelines we created with the broader team, while this project also fed back into those guidelines; updating and adding elements where useful.

Image for post
Image for post
Timeline page on an Android device

After many variations and tweaks, the new order tracking experience is improved on all fronts. Designing the whole experience fully responsive, it looks great on both mobile handheld devices as larger screens such as tablets and desktops.

We created an experience that is clean and easy while also very flexible to allow any type of order to fit within the framework and design. From custom titles, events and count downs to content managable images, we delivered a product that is future proof and strong.

While originally designed as an online responsive website, the whole Order tracking experience has also been included inside the official Sky Service App. The Sky Service App was designed during the same time as Order tracking and is a hybrid app, mixing native and web elements into a native Android and iOS app.

To view all the final designs, visit my website.

Want to know more details about this project? Let me know

Image for post
Image for post
Home page showing one order on desktop and mobile
Image for post
Image for post
Timeline page showing multiple events on desktop and mobile
Image for post
Image for post
Detail page showing on desktop and mobile

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store