Growth design audit example – Playing for Change website

Growth design audit example – Playing for Change website

At Convertux we do growth design audits as a service – an accessible way to identify growth opportunities for an online business. Our audits are prescriptive: we don’t just highlight opportunities or issues – we provide detailed descriptions on how to address them. And this is the part that frequently causes most confusion.

It’s complicated. Because each context is unique and there’s no one size fits all growth solution out there. But we hope you’ll have better expectations by looking at real work results. This is what this post about – we are including a growth audit that we did for Playing for Change – a movement created to inspire and connect the world through music. The company’s goal was to grow the number of paid subscribers.

Below you’ll find the audit as is with minimal adjustments for blog format.

Introduction

The UX audit revealed a wide array of opportunities to pursue and issues to address on UX, UI, usability, messaging, performance and other fronts, ranging from important to critical. The audit suggests implementing UI design, usability, user flow, copy and other changes.

We have managed to cover the biggest steps in user conversion flow: home page, membership landing page and checkout page.

This report consists of actionable items, grouped by screen categories, yet some of the items apply to the entire website. The actionable items do not include numerous styling micro-improvements aimed at improving the overall look and feel and usability.

Deliverables

The deliverables below include:

+ Updated copy throughout the entire checkout flow
+ Updated and reorganized checkout and dashboard flows
+ Updated layouts and user interface

1. Clickable prototype


2. Design files


3. Developer handoff tutorial

Home screen recommendations

1. Disable ‘Vinyl’ promo

Why: Vinyl Promo competes with the primary call to action (CTA) and wins more attention due a prominent to animation effect, size (in particular on mobile) and fixed position on the screen. The promo image takes 1.7mb in size, hugely impacting the performance.

What to do: hide the promo on both desktop and mobile.

2. Disable email popup

Why: Email popup doesn’t offer any significant incentive and interferes with users session during checkout.

What to do: disable the popup until a more contextual scenario and triggers are developed. Apply an email capture form to the footer with improved CTAs globally to frontend website (screenshot below, included in design).

3. Improve header navigation

Why: include a primary CTA accessible at all times throughout the website; declutter the navbar by using a more common navigation pattern.

What to do: Add a primary CTA to the fixed header, remove Home to win more space on smaller resolutions and maintain better visual hierarchy, groom the styles.
Dev note (optional): set the max width for container at 1440px.

4. Replace Revolution slider with a static image in hero section

Why: The website scores just 8 out of 100 on mobile, 38/100 on desktop in Google PageSpeed performance, which negatively affects conversion. Revolution slider is one of the reasons for slow performance. In addition, the website displays other content before the slider is fully load, making the sections ‘jump’ and adversely affecting users’ focus.

What to do: replace hero slider with a static image. Optional: consider implementing skeleton loading for the hero image: display a blurred 2kb skeleton image until the main one is loaded up, then swap with the main image when loading is complete. More on this technique.

Notes: check what Peep Laja of ConversionXL (one of the biggest authorities in CRO) says about using slider carousels...

5. Improve calls to action: contrast

Why: On sections with large photo backgrounds CTAs fail to capture enough attention due to low contrast and make it harder for the user to follow the layout pattern.

What to do: increase font size and weight of H tags, saturate font shadows on top of photo backgrounds, add an overlay for photo backgrounds to improve text contrast. Remove graphic content non-related to the CTA. All the changes are implemented in the designs.

6. Improve calls to action: copy

Why: the copy in headings across the website could use more calls to action to entice the user become a member / sign up for newsletter, etc. In info sections the headings could do a better job communicating the value of a program, etc.        

What to do: We have updated the copy globally and suggested improved versions – feel free to apply it as is or modify if necessary.

Current vs suggested
7. Improve contrast and consistentcy of buttons

Why: the website has at least 6 different buttons styles, while some of them have no fill and lack contrast on image backgrounds.

What  to do: For consistency purposes we recommend to stick to 2 button styles with a solid fill (updated in designs).

Membership landing page recommendations

1. Shorten and optimize the conversion flow

Why: the current flow could be simplified so the user complete the checkout goal faster. Currently the users can go to different pages to obtain different memberships. In reality, we have just 1 membership with 2 pricing options: monthly and annual. This allows us to remove 2 pages in between payment form.

In addition, to complete checkout user has to submit additional fields (such as password, username, about, etc.), that are technically not critically required until the transaction happens.

What  to do: Enable the users sign up for a membership right from the landing page and complete registration later. Condense the form to payment info + email. Enable the users easily switch between the membership.

2. Make the form easily accessible from any area of the page

Why: making the form easily accessible landing page may lead to a conversion rate increase

What  to do: Implement anchor links for the page with smooth scrolling

3. Improve value communication for premium content

Why: the value points are scattered throughout the page, making it complicated to understand what’s really in premium membership.

What  to do: Condense value proposition in a single statement, improve communication of premium content depth. Make the premium content more enticing by adding ‘membership only’ previews.

4. Improve the value communication of education support by giving more details

Why: a huge chartity initiative is communicated in just 1 sentence, a link to ‘learn more’ takes the user away from checkout.  

What  to do: Highlight the program achievements, remove the external URL.

Current

Suggested
5. Optimize payment form

Why: the form could be simplified to enable users make a payment faster

What to do: take the following steps:
1. Use white space and updated input designs for easier form scanning and handling  
2. Make switching between membership plans faster and easier, eliminate page reload
3. Display the savings advantage with an annual plan
4. Display a breakdown of premium features so knows what they  sign up for
6. Since there is no solid evidence that repeating a password or email inputs lead to better UX (less mistakes, less password recoveries, etc.), hide the inputs that require the visitor to ‘Confirm’ input.
7. Open PayPal in a new tab if the user clicks on Checkout with PayPal to cut down the number of form interactions.
8. Apply styling updates (included in design).

6. Items 6 to 12 hidden for privacy reasons

This audit included 6 more items that are hidden for privacy reasons as they address sensitive payment processing info.

Results

The business achived an impressive conversion rate improvement after the first round of changes.

“By following simple and straightforward guidelines we lifted up the conversion rate at PlayingForChange.com by up to 600% at a peak season.”

Feel like your website could perform better? Let us do the growth audit and show you where and how you could do a better job.