Hey all,
Riikka here, one of the product designers at giffgaff. I just wanted to inform you about a change we’ve been working on and are about to start testing on giffgaff.com/sim-only-plans this week.
Problem
We currently have more than 10 unique ways of displaying our selection of goodybags across our website and app.
Most of those are based around the idea that the key features that differentiate goodybags from one another are price and allowances for data, minutes, and texts. This is becoming a bit outdated. First of all, all of our goodybags now come with unlimited minutes and texts. While people are likely to still want that information at some point of the purchase process, it isn’t necessarily essential when comparing goodybags.
On the other hand, some of our goodybags come with features like 1 GB extra data from your 3rd goodybag onwards, or getting more data in exchange for setting the goodybag to recur, or Always On data. All of these both make the goodybags different from each other and might require some further explanation, and yet they aren’t really included in the basic display of data, minutes and texts.
We also knew from previous testing that some of the ways we presented goodybags had usability issues, like people clicking on links and expecting something different than what actually happens, or not knowing how to operate carousel-style displays of goodybags, or finding the text on our goodybag icons too small to read etc.
And finally, managing 10+ same-same-but-different ways of displaying goodybags makes things unnecessarily complex to maintain for our developers and designers.
So in summary, we wanted to create a new way to display goodybags that would
- serve both new and existing members better by providing the right information in the right order
- serve people working at giffgaff by being more flexible and efficient to manage as the goodybags keep evolving
Design process
We started by mapping out all the different places where we show our goodybag range across our channels. Then we listed all the features that a goodybag can have, and matched those with insights we had from previous research about what info people look for when choosing a goodybag. This helped us determine an information hierarchy that we felt would serve users best.
We also played around with some alternative ways to group our goodybags, and benchmarked user interface components that allow people to select and compare items while also accessing information progressively.
Based on all this, we created a few different alternative goodybag displays that we then usability tested remotely with a bunch of people, and then iterated on based on the results.
Solution
This is the basic solution we’ve settled on for now.
Each goodybag is presented as its own self-standing card component which provides 3 levels of information:
This is how they look when put together into a list:
Clicking on a card selects it and expands it to show more information. Moving on to the next step happens by clicking on a button that appears at the bottom of the screen when a goodybag has been selected:
And finally, here’s a little demo video:
We’re planning to start using this type of a display in places where we want to show our full range of goodybags and allow people to select one of them. This includes e.g. ordering and activating a SIM, buying a goodybag and changing your recurring goodybag.
There’s also a slightly different display that we intend to use in more promotional contexts, but we’ll implement that a little later.
What’s next?
We’ll start testing this on giffgaff.com/sim-only-plans this week to get some more quantitative data around how it performs against the old version. It will be run as an A/B test, meaning that some users will see the new version of the page, and others will still see the old one.
We’ll be tweaking things as we go along, so if you have any thoughts or feedback you’d like to share, those are most welcome!
On behalf of giffgaff’s Airtime team,
Riikka
