How I approached overhauling the CurrencyFair brochure site navigation
A UI/UX case study
Introduction
This was a project that I worked on for CurrencyFair in 2020; we’re a bank-beating FX provider based in Dublin, Ireland. There are two parts to our presence online; the brochure site and the web app. The brochure site is where you first land from a web search etc. and is where you learn more about the service and hopefully go on to sign up. The web app is the logged-in CurrencyFair experience. The goal for this project was to overhaul the main navigation for the brochure site.
Why did we want to overhaul the navigation?
- Increase conversion — increase sign ups to CurrencyFair
- Improve the UX in a general sense — the navigation was confusing and didn’t inform the user of the features and benefits of having a CurrencyFair account
- Focus on B2B — The company as a whole was starting to focus more on attracting business customers and the previous navigation did not adequately attract such customers
As you can see in the above image, the links in the navigation don’t do much to tell a prospective customer what the benefits to having an account are and what use cases they can accomplish with our service.
On mobile, we have the login button hidden under a hamburger menu and at first glance you wouldn’t have any idea that there’s a separate business product.
Research
Competitor Analysis
The main research for this project was competitor analysis. For this I researched the websites of similar companies to CurrencyFair. Some would be direct competitors that specialise in FX (foreign exchange) and others would be in the financial area such as banks.
Navigation Research
I also made sure to look at websites that I thought had a quality UX or nice style and approach to their navigation. There are always design blogs and websites etc. that gather quality examples of website navigation so I leveraged those too.
I gathered screenshots into an InVision board so I could have all the examples in one location and keep everything organised.
Other than all this research, there was idle speculation from myself that the new navigation was going to be great…
Design & Testing
Initial Concepts
I began by creating a bunch of initial concepts, approximately 10, with various different approaches to how the navigation could look and function for both desktop and mobile. I then discussed these with the other designers on the team and we decided which aspects of the various concepts would be best to continue with. Armed with that information I created 3 more refined concepts for the next iteration and we chose which concept to focus on for testing.
Phase One
For the first phase of testing I used an online user testing platform called Usability Hub; it’s a very useful tool for collecting early feedback on designs. We would mainly use First click and Navigation tests and we narrowed our test user base to people residing in countries that represent our largest markets.
Results:
Desktop
- Users overwhelmingly found the business homepage
- When asked to find a specific use case, approx 50% of users clicked the wrong drop-down in one instance but 90% found it in another test so, mixed results
Mobile
- Approx 80% found the business homepage
- When asked to find a specific use case, approx 60% of users clicked the correct drop-down in one instance and 90% found it in another test so a good result overall
The main takeaway from the testing was that people were able to find the business homepage very easily on both desktop and mobile. We did see that some users got confused when asked to find specific links located under the two drop-downs; here’s an example of such a question from one of the tests: How would you find out what type of business tasks that this site is useful for? For example, paying suppliers abroad. We weren’t too concerned about this though because we only have 2 drop-downs on the menu so if it wasn’t found under one, they would find it under the other.
AB Test
When I got to a point where I was happy with the results from the testing on Usability Hub, we set up a live AB test on our homepage and assigned 5% of traffic to the B branch featuring the new navigation. This immediately had a positive effect on visits to the business page as they went up by 35% and conversion increased by half a percent; albeit for a small percentage of traffic. On the back of this we decided to up the percentage of traffic to 50% on desktop (about 25% of total traffic). When the good trends continued, we rolled out the change fully.
Summary of Changes
I made a clear distinction between the personal and business sections with a simple toggle to navigate between the two. I also introduced two drop-downs to replace the various hyperlinks that were there previously. This cleans up the navigation on Desktop significantly and supplies the user with the information that they actually need. The drop-downs are I need to and Features on the personal side and My business needs to and Business features on the business side. Having drop-downs allowed me to have more options than before and take up less space at the same time.
Since these changes, there has been a large rebrand of the brochure site so you will notice that the main navigation background colour for the business side of the site is a dark grey now. However, none of the functionality of the navigation was changed.
Head over to CurrencyFair to see them in action!
Results
Comparing 1st January — June 14th (when the changes went live) with June 15th — 31st December 2020
Conversion
People that viewed the business homepage and then went on to register for an account — Up 26%
Visits
Total page views of the business homepage — Up 149%
UX
A much improved UX — cleaner and more informative navigation
I was very pleased with the results and coupled with the recent rebrand of the brochure site, the entire experience is hugely improved.
