Virgin Experience Days Website Redesign
There comes a point when you’re just adding fix onto fix, allowing for no more flexibility of the system; this was the issue we faced with the old Virgin Experience Days site. This wasn’t just a redesign, it was a full redevelopment of how the site was built from the ground up.
The redesign was commissioned to fix UX issues with a strong emphasis on mobile; allow for more growth of the website with more flexibility; and to allow us to test more easily.
We took on the challenge to start a fresh, trying to (as much as possible) forget about all those old bits and pieces that had been added on over the years to fix a problem here and there, to give us as much room as possible. This isn’t to say we completely disregarded them, but if we could solve the underlying issue one of them fixes were trying to make, there would be no need for that fix in the first place.
Redesigning a site is a huge risk, which is why we’d always gone with the applying fixes route, but we needed a fresh bed to start on. From the offset we made sure what we were designing would be flexible and modular, making us being able to test new features with ease.
The previous site got made responsive with a bit of an afterthought, and wasn’t a great experience on mobile, so this was another one of our key points the redesign had to address. From the beginning we designed everything mobile first, ensuring we had all the critical information infront of the user, in a optimised page, then adding in features and more advanced layouts as the viewport grows. [ note: the site wasn’t actually built in a mobile first approach, only designed ]
We also used a lot of data that was available to us to help with the redesign, nothing was built just for the sake of it. Using tools like Google Analytics, HotJar, and customer feedback, enabled us to get a wide range of insight into the issues people were facing with the site, and helped us prioritise what features were a must have.
The Big Changes
Some of the big things that were completely redesigned include navigation, product listing and checkout.
Navigation was changed to the more standard ‘mega nav’, enabling us to showcase more categories to the user, therefore allowing the customer to dial right into what they’re after, and leading to lower abandonment rates.
Another area to help the user get right to the product (or category) that they’re looking for. Our web development team Intuitiv build a new search feature from the ground up, matching against various criteria such as keyword, matching category, location or postcode, with all different types of logic involved to make it really smart. It’s still in development, but the first stages went live at launch whilst the rest gets really thought out.
As well as changing up all the matching algorithm behind search, we changed up the front-end styling of it. Showing matching categories as autocomplete options helps the user find what they’re after, as well as showing suggested products that match to get right into product.
Product listing was changed to include a new ‘Grid View’ layout. One thing that showed up from both heatmaps and polls was that customers were wanting to see more products per page. The most clicked thing was the ‘next’ button. Switching to a Grid View enabled us to show 3 times as many products on a single screen compared to the listing view. We did still keep around the listing view, as it does show more information about the products. We have the ability to choose the default view for each category, for example with a category like Special Offers where there are a huge range of products, showing grid view makes more sense, but if the customer has gone into a third level category, they’re at that stage where they’re more wanting to compare the products, so showing list view enables that.
Checkout was one area we felt that worked fairly well on the old site, but could use some improvements to make it feel more secure. Adding lots of visual cues to hint at this with simple things such as a padlock icon on the checkout button, really helped make it feel this way.
Software and Tools
My tool of choice when designing interfaces and websites is Sketch. Allowing for structured documents, with artboards and pages to have the entire website designed out in a single file. We used MarvelApp to showcase journeys through the new designs to help people really visualise how the site would look; this was especially helpful on mobile.
We kept the web dev team, who’d be completing the build, involved from the beginning, always checking what we were doing was possible and that they were onboard with it. Being able to code myself enabled me to lend a hand on situations where they weren’t entirely sure what i was meaning with a design, i could build a quick mockup in CodePen and send it over for them to dissect and implement.
I was in contact with the dev team on nearly a daily basis as they asked questions about designs, showed off progress, and talked about alternative solutions.
We always knew with a rebuild this big that there would be issues, and we’d run into disagreements on what should and shouldn’t be. As much as possible we used existing data to provide the answer, whilst making note of these things to be tested at a future date. The rebuild is just the beginning, the site will now be in a continual phase of testing (a/b, multivariate, and user) to make it as optimised as possible.
The site launched successfully on the 24th October 2016. The site has only been live for a couple of weeks, but initial results look promising. We’ve always known this will be the lowest point that conversion will hit, due to our new test driven approach to the site, so look forward to sharing more in the coming months.
And as explained above, this is just the beginning of planned developments to the Virgin Experience Days site with new features and enhancements being added all the time.
Have a look around the new Virgin Experience Days site, would love to hear your thoughts and comments!