Confetti.co.uk UX improvements

• 10 min read

A bride and groom.

The Brief

Confetti.co.uk is one of the UK’s leading wedding planning, advice and inspiration resources. We’d like you to look at the homepage to identify improvements from a UX perspective and present your findings back to us. This can be in the form of a written list, pen and paper sketches, wireframes, a working prototype or a presentation (or anything else!), it’s up to you. But please be prepared to talk us through your process and what you have proposed.

For info, the four main areas of the site are:

  • Venue marketplace
  • Supplier marketplace
  • Shop
  • Everything else (inspiration, advice, content, planning)

Introduction

Given that this brief is fairly broad, I’m going to do a high level overview of the areas I’d be likely to highlight for improvement if I were to be offered the position.

There are many factors to consider when thinking about UX. I prefer to think about the experience as a whole; Not just the interface, or what happens when you click a button, but rather the entire journey.

Having said that, as time is scarce I'll just touch on some of the main areas that will often yield the biggest UX wins.

First Impressions

Confetti.co.uk’s first impressions are strong, there’s no mistaking what you’re going to find on this website. The wedding imagery is professional and the design of the user interface complements the content and helps to set the tone.

confetti.co.uk homepage

Without access to the analytics data, and me preferring to be led by data I'm going to verify what you consider the top content using a tool called Ahrefs to get an idea of the top performing areas.

  • 1,672 results /shop/
  • 1,610 results /wedding-venues
  • 946 results /wedding-suppliers
  • 378 results /bridalwear
  • 1,363 results /wedding-advice
  • 68 results /wedding-fayres

Great stuff! Now I know we’ve definitely got the basics right. The navigation menu closely reflects the biggest sections in the search data.

Though frankly, I'm surprised that popular wedding hymn suggestions is the second biggest traffic page. Do people still sing hymns?

confetti data in ahrefs

Competitors

With a little help from Ahrefs it’s easy to identify our top ten competing websites, using keyword comparison we can see who we're up against in search results.

  1. bridesmagazine.co.uk
  2. weddingideasmag.com
  3. youandyourwedding.co.uk
  4. onefabday.com
  5. hitched.co.uk
  6. bridemagazine.co.uk
  7. bridebook.co.uk
  8. wedding-venues.co.uk
  9. weddingwire.co.uk
  10. brides.com

A glance over the keywords for these sites shows me that hitched.co.uk is one of our bigger keyword competitors. So we’ll use their site for direct comparison, given more time we could look at our competitors in more detail.

hitched.co.uk homepage

Hitched is very similar to Confetti, it’s menu options and wording are positioned almost identically. The page layout is similar too, use of big hero images and smaller links for each section break up the page and give each section its own identity.

Hitched have very cleverly used a combination of both serif and modern sans-serif fonts that gives their typography the edge. These two opposing typefaces help make clear what is part of the interface and what’s content.

Their fixed header follows you as you scroll the page. User testing I’ve done before has shown that this is good for getting users to interact with menus and search more.

Content

There’s more crossover in content than I expected to see here which leaves me very little to say on the subject. Confetti has 32 pieces of image content that are also links, where Hitched has 23.

In my personal opinion Hitched are getting this right, by teasing the websites top areas and keeping competition and promoted content to a minimum we're not trying to throw too much at a user.

Confetti:

  • Wedding venues and wedding suppliers
  • Shop
  • Competitions
  • Inspiration
  • Fairs Events & Shows
  • Planning Help
  • Featured Venues

Hitched:

  • Planning
  • Search
  • Advert for related products from Not on the High Street
  • Inspiration
  • Venues
  • Wedding Team (Suppliers)
  • Dream Dress
  • Complete your look (More shop sections)

Performance

In this mobile world, it’s important to make sure our product works for everyone. Benchmarking the confetti homepage shows us that we’re already performing better than Hitched. Performance is one of the metrics that Google use to help with ranking as of July this year. There’s a lot of small changes we can put in place to improve this further.

Confetti.co.uk

confetti performance stats

Hitched.co.uk

hitched performance stats

Straight away, looking at a more detailed trace we can see that a speed index of 33 seconds is way too long for the first page load.

wep page test results

Digging into the details of this reveals that implementing lazy loading would improve this and time to interactive by about 10 seconds! This means that images only load as a user scrolls down the page. Saving bandwidth for users that don’t scroll and means the page can finish loading a lot faster.

We’re already using a brilliant image CDN called IMGIX (Also in use here on my personal domain). And there are more out of the box features we can use to make pages even faster with minimal work. Dynamic image formatting delivery and SRCSET sizes, are simple to put in place.

According to the Chrome User Experience Report data, we rank 6th for median page load time among our competitors. It should be our aim to outperform all our direct competitors.

Google speed scorecard

Check the live scorecard data here

“For every second delay in mobile page load, conversions can fall by up to 20%.” - Think with Google

We can estimate how much extra revenue we are currently missing out on due to poor performance.

If we matched the speed of weddingwire.co.uk at 3.4 seconds we could be making an extra £75,721.89 in revenue every year.

Of course, this is an estimate and I've used approximate values. I suspect that the AOV for a wedding is a little more than children's parties and fancy dress.

Google impact calculator

User Feedback

To get some initial user feedback I forced politely asked my girlfriend to give me her opinion on both websites. Her first impressions were far from ideal. On her iPhone, only the first slider image displayed!

broken on iphone

I investigated this missing content and it seems that it may have been a one-off problem. I did notice that when using Adblock the same content was not displayed. But that wouldn't explain why it isn't working on her phone, it’s something I'd be happy to look into further.

Anyway...

Despite the missing content in the slider she still felt that the presentation of the website was professional. She recognised the brand but had never used the website before.

I then asked her to identify what she thought were the main areas of the website, and what they offered. She Identified the following based on the content outside of the slider.

  • Venues
  • Photography
  • Dresses
  • Flowers
  • Accessories

She had completely missed the shop and the inspirational / advice content.

When looking at Hitched she identified that their main sections were.

  • Planning
  • News Articles
  • Wedding Venues
  • Wedding Team (Photography, Flowers etc) claiming that it “sounds pretentious”.
  • Dresses
  • Accessories
  • Adverts

She felt there wasn’t much aimed at men on this page, and found the competitions and promoted features distracting. She liked how short their page was in comparison with confetti. This helped her navigate and understand the website offering much faster.

Apps

I did notice that Hitched have a native app for iPhone but not for android. If you’ve not heard of progressive web apps, then I’d love to talk through why your products are a great candidate for becoming one.

hitched app banner

We could change Confetti.co.uk to be a web app, giving us access to native features and keeping us ahead of the competition.

  • Worthy of being on the home screen When the Progressive Web App criteria are met, Chrome prompts users to add the Progressive Web App to their home screen.
  • Work reliably, no matter the network conditions Service workers enabled Konga to send 63% less data for initial page loads, and 84% less data to complete the first transaction.
  • Increased engagement Web push notifications helped eXtra Electronics increase engagement by 4X. And those users spend twice as much time on the site.
  • Improved conversions The ability to deliver an amazing user experience helped AliExpress improve conversions for new users across all browsers by 104% and on iOS by 82%.

Read more about PWA's https://developers.google.com/web/progressive-web-apps/

Brainstorm & Wireframe

Okay so we’ve got our initial research now, it’s time to get thinking. My first thought is to prioritise the content that's most important to both the business and the users.

Step 1

Make the main areas the main focus above the fold. Taking away some deeper site links from top-level pages helps users by removing choice paralysis. This is a psychological concept that can cause anxiety in users when they have too many options.

new confetti homepage wireframe

This initial design displays the main four areas of the website at a glance to any user visiting the homepage.

“Obvious always wins.” - Luke Wroblewski, Product Director at Google

Step 2

When we look at the research into the ergonomics of mobile devices. We see the vast majority (some 97%) use their phone holding it portrait with one hand, and scrolling with their thumb. We can use this data to inform decisions about where to place content on the website, keeping it within easy reach as much as possible.

mobile touch ergonomics

Here’s an example of the level of comfort to use your thumb on different phone sizes. Called the Mobile Thumb Zone.

When we apply this concept to our site we can identify that the menu and search buttons are in a hard to reach area. Moving those buttons to the bottom of the viewport would help users to reach them a lot easier.

Search is always a popular feature for mobile users, given the nature of how difficult it is to navigate through websites. Giving the search box more prominence, provided the search experience is good, is incredibly helpful.

bottom nav bar

We’ve now moved the controls into a much easier place to reach. Take a look at this overlay. I’ve placed the Inspiration and Advice link towards the top, this would be based on it generating the least revenue of our four main areas. We make it the least easy to reach while scrolling.

bottom nav bar with touch overlay

These concepts are unique to mobile and smaller tablet devices due to the nature of how they’re held.

Step 3

What we need to think about for the desktop experience is delivering the same content, but formatted using common design patterns (know as Axioms). Confetti already adheres to some design axioms, using a navigation bar with a mega menu.

desktop homepage layout

We’ve not changed very much here in terms of layout or content. With one big exception, the slider. There’s significant research that shows sliders actually perform poorly.

shouldiuseacarousel.com and Yoast wrote good articles on the subject.

Sliders aren't the best way to deliver content. John Lewis A/B tested their sliders against big statement link images, and since their new branding went live the sliders haven't been seen.

“Not using a slider means no JavaScript to run it, so your page is faster.” - Me

We can still use big hero images, we must remember that doing so might mean pushing other important areas of the site below the fold. Things like this should be A/B tested to inform any decision.

There are a lot more changes I could think of for the layout and presentation of the homepage alone, and to steer those ideas I'd need more data.

Here are two more examples, introducing a value proposition feature that doesn't need to be clicked on, so the main content is easier to reach. And a floating action button from Google material design, an alternative to the bottom navigation elements.

wireframes that include a value propostion

Summary

We've touched on a number of different areas that affect the choices we would make along the way. By presenting the key areas at a glance to all users on mobile and desktop we could expect to see an increase in click-through rates.

Our mini competitor analysis has helped us to identify our direct competition and we've benchmarked our performance against them setting ourselves a target.

We would test removing some of the deeper site links to help with choice paralysis. And speed up the delivery of the homepage by removing the slider. The menu and search buttons are now much easier to reach for mobile users.

Given what I currently know about the business, I would prioritise the following actions, and ensure we understand the impact of each change.

Short-Term Actions

  • Improve Performance using lazy loading and dynamic image type serving.
  • Fix Accessibility issues.
  • Fix SEO issues.
  • Create a series of small A/B Tests that will inform every design choice we’ve made during this process.

Long-Term Actions

  • Improve Best Practices of front-end implementation.
  • Plan to refine performance to surpass the competition.
  • Continuously perform user research to discover and solve website usability pain points.
  • Invest time in making the site a progressive web app, to improve performance and increase engagement.

“To create unbeatable insights and experiences to help our customers succeed” - Ocean Media Group Mission

All the choices we've made align with Oceans mission and core values. We've put the customer first by trying to deliver the highest standard of user experience.