Experience Design | A Technical Approach to Developing Websites
Currency Solutions is a London-based FX and international payments company established in 2005.
and jump was tasked with jumpstarting growth. We helped the business find a new proposition, identified opportunities across the customer journey, transformed the experience and embedded digital-first methods and a new technology approach.
Joining up business, design, and technology is critical to success and the foundation of how we work. We believe marketing websites should be considered digital products, like platforms or APPs.
Chris Herring — our technology partner and collaborator— shares his technical perspective on the website part of the programme and how the technology supported the new business proposition, 'Putting People First.'.
Marketing websites are often forgotten children in small product businesses.
The priority of marketing websites gets regulated through a list of business priorities, as they are neither the product, APP, or supporting service, nor are they even seen as revenue-generating. Odd, given their position in a user acquisition funnel.
From a technology team's perspective, they often lack the technical challenges other areas face. Developers often see algorithms, APIs, or integrations as more exciting work than HTML, CSS, and JavaScript needed for landing pages in a marketing website—this was prevalent within Currency Solutions.
Goals
The overarching technology goal was to create speed. The incumbent website was slow to load and update content. In-house developers loathed the systems and technical approach.
Speed is vital for a positive user experience, especially on mobile. Longer page load times equate to higher bounce rates and fewer conversions, amplified with paid marketing, where serving users a poor experience wastes money and potential customers.
Efficiency and speed can also be achieved by deciding which services to build and which to pay for using a third-party service. While $50 a month may seem costly, a developer no longer has to fix bugs, maintain, or worry about the availability of the services, thus creating extra bandwidth to build more beneficial business features.
Having speed as a priority meant that whatever direction or pace the business would like to take, the technical approach would facilitate that through delivery and end-user experience.
The following activities helped us understand the direction we needed for Currency Solutions.
Audit the technology stack, deployment processes, and the team's skillset.
Use the eCommerce plugin by Google Analytics to help understand the site's business value and customer trends.
Run A/B tests using Google Optimise to test design, UX, and technology ideas and ensure the successful launch of initiatives.
Implementation
For Currency Solutions, we chose the Jamstack approach. JAMstack stands for JavaScript, APIs, and Markup (HTML), a term coined by Mathias Biilmann to describe a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.
To understand JAMstack, it's worth understanding what came before. A traditional stack would include a web server capable of accepting requests and providing a response. The LAMP stack is the most common stack made popular by WordPress. Within a LAMP stack, a user clicks a link; a PHP file gets loaded, that file makes a database request, gets some data, and that file processes that data as a template, which renders it as HTML to the user. JAMstack differs dramatically from a LAMP stack; within JAMstack, all the HTML files are generated at build. When a user clicks a link, the page is instantly loaded to the user since no server-side code exists.
We chose a JAMstack approach for Currency Solutions because of the following benefits:
Faster performance: Serve prebuilt HTML pages and assets over a CDN.
Security: No security updates (WordPress), server-side code, or server or database vulnerabilities.
Cheaper: Hosting static files is far cheaper than running web servers and databases.
Scalability: The CDN seamlessly compensates if Currency Solutions suddenly has high traffic volumes.
Better developer experience: Currency Solutions' frofront-endvelopment could focus on development rather than legacy architecture.
The approach was implemented using the following technologies.
1. Headless CMS
A Headless CMS is a backend-only Content Management System focusing on defining, authoring and delivering content as data over an API. The powerful part of a headless CMS is the API, which allows developers to choose how they would like the API to display the content across various devices, e.g. websites, apps, and smart ads. As a headless CMS decouples, the backend from the front no longer has constraints found with a traditional coupled CMS like Umbraco, Sitecore or even WordPress.
Whilst other headless CMSs exist, e.g. Prismic and Sanity, which can define Content Models, create content and manage roles, and expose content as data in REST and GraphQL APIs. We chose Contentful due to its easy-to-use interface, more options for content model definitions, and excellent features for content authors.
2. Styled Components
Applying visual styling to websites has changed vastly in the last decade. Styled components are a new way to use CSS in a modern JavaScript project. They shift the interface design focus from styling HTML elements or creating CSS classes to building components that contain their styles and are easily reusable.
3. Gatsby / React
Gatsby is an open-source framework based on React that enables you to build static websites. Gatsby is a JAMStack melting pot, bringing together React-styled components, your headless CMS of choice, and much more through various plugins via the ecosystem.
A diagram of the JAMstack approach implemented for Currency Solutions.
Results
Speed: Reduction in secs of page load times from 12 to 2 seconds
Acquisition: 100% Increase in new registrations
Brand: 7-fold increase in brand trust
Marketing: 4-fold reduction in cost per acquisition
New and improved experience
Before
After
Thanks
This project would not have been possible without the team at Currency Solutions
and jump team
Melissa Clark, Design strategy
Chris Rain, Creative director
Chris Herring, Chief technology officer
Sami Kasap, Digital marketing lead
Colin O'Dowd, Product designer
Let’s start something special
We’ve helped businesses of all shapes and sizes to grow— from small innovations to big bangs.
Change doesn't have to be scary. Whatever your needs, we are here to help.