The UX Playbook for Finance is an essential resource for web designers and UX professionals. This deck offers practical guidance on UX design, UX research, collaboration with stakeholders and more.
The UX Playbook collection offers a goldmine of information for website owners and designers. Google describes them as a “Collection of best practices to delight your users.”
The Playbooks are often referred to as “leaked” documents, likely because they were quietly placed on the services.google.com domain without much fanfare. However, when you start to explore the documents in more detail, it certainly feels like you’re back in school and have stumbled across the answers to your next exam.
There are seven UX Playbooks available, covering Retail & E-Commerce, Lead Gen, Travel, Finance, Real Estate, News and Content Sites, and Auto.
You can find them all here:
This article will explore the top UX tips gleaned from the Google UX Playbook for Finance to help you provide your customers with a better experience while using your website.
The Google UX Playbook for Finance
This extensive document offers 106 pages of insight, examples and recommendations. But before you get started implementing any changes, Google reminds us that all recommendations should be A/B tested.
Because what works for these sites might not work for yours.
The recommendations identify six key areas of a financial services website:
- Homepage/ landing page
- Menu and navigation
- Product page
- Compare/ pricing page
- Conversion flow
- Form optimisation
There are also additional recommendations for websites with further goals. These include:
- Signup/ Sign in
- Driving app downloads
To save you time, we’ve extracted the key takeaway from each section so you can start implementing these changes in your own business.
UX recommendations for your home page/ landing page
Your homepage or landing page is often the first impression for users. Google UX Play recommends the following:
- Include a clear CTA above the fold. This should be your main value proposition.
- Prioritise the primary CTA with colour, contrast and size.
- Where there are multiple products and services, display top categories to make it easier to navigate.
- Use social proof to increase trust in your audience.
- Don’t use automated carousels. More information means less retention. Instead, always make the movement user-initiated, so they can choose to scroll across once they have retained the information they need.
UX recommendations for your menus and navigation
- Consider keeping your menu on a single page to guarantee ease of access. Dynamic menus or expanding buttons also increase accessibility by providing a large space for users to tap.
- If a call is the most crucial action a visitor can take, display a “click to call” button in the upper navigation.
- Make sure support and post-sales actions are included in the menu. Don’t assume that your website visitors have yet to convert.
- With a larger site, consider adding search functionality to the menu.
- Use autocomplete in the search to make life easier for the visitor. This should display the number of results and offer to filter the results.
UX recommendations for product pages
- Like your home page, each product page should display a clear and descriptive CTA above the fold.
- Make sure the text size and touch targets are large enough to be used on mobile.
- Make the most of the visual space. For example, on mobile, use icons, bullet points and headlines to make it easier for the user to skim the data.
- Video is an excellent way to educate visitors and explain complex ideas in a simple way.
UX recommendations for price comparison pages
This page typically has the most information, and it needs to be easily accessible to the visitor. These are Google’s recommendations for getting it right:
- Allow users to sort, filter and narrow down their search.
- Anchor products and pricing for ease of use.
- Make your comparison categories consistent.
- Explore horizontal and vertical scroll to make it easier for users to explore the products available.
- Think about the responsive design and how this will impact the way information is displayed.
UX recommendations for conversion flow
This more general section takes a broad look at the user’s journey from discovery to conversion. Google offers the following recommendations:
- Include a value proposition at every stage in the user journey.
- Prompt users to call you at every stage in the journey if this is your preferred method.
- Include a progress bar, so users know that is involved in the enquiry process.
- Limit the exit points during conversion by making it easier for users to move forward, even if they are struggling.
- Try limiting the menu options once they are on a path to conversion. For example, instead of your entire menu, add a link to customer service and a “how it works” page.
- Use descriptive CTAs to drive the journey forward.
- Display your security credentials clearly, particularly when users are handing over sensitive information.
- Use the conversion flow to upsell your financial products.
- Make it simple to convert on ANY device.
UX recommendations for form optimisations
As Google points out, typing on mobile is HARD, so make things easier for the user with these UX optimisation tips.
- Use inline validation and autofill to take away some of the work. This avoids the user getting to the end of a form, submitting and discovering information is wrong.
- Reduce the number of fields wherever possible. For example, instead of splitting first and last names, ask for their full name.
- Explain why certain information is needed. For example, outline that you need an email address to provide a quote.
- Never use a drop-down menu when there are fewer than three options. This can be replaced with multiple-choice buttons.
- In general, drop-downs should be a last resort. Exposing the options available will ensure users understand their choices.
- Never use a drop-down for birthdays. No one wants to navigate through decades to find their birth year.
- Always use the correct keypads for the information you are collecting. For example, switching to a numeric keypad to input a phone number will streamline the process.
How to implement this on your website
Use this as a checklist and run through the conversion process on your website. Put yourself in the position of a customer and try to run through the conversion process. Mark each item on this list as a pass or fail and then use these to implement A/B testing on your site.