Experience Design | A Technical Approach to Developing Websites
Currency Solutions is an 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 websites should be considered digital products, like platforms or APPs.
This article looks at how the technology supported the new proposition, 'Putting People First.” Chris Herring, our technology partner, trusted expert, and collaborator — and without him, this project would not have been possible — shares his technical perspective.
Marketing websites are often the forgotten child in small product businesses.
The priority of marketing websites gets regulated through a list of business priorities, as they are neither the product, the app, a supporting service, or even not 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. Algorithms, APIs or integrations can be seen by developers as more exciting work when compared to 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 created by deciding which services to build and which to pay for using a 3rd Party service. $50 a month may seem costly, but a developer no longer has to fix bugs, maintain or worry about the availability of the services, thus creating extra bandwidth to build more business-beneficial 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 to ensure initiatives launch successfully.
Implementation
For Currency Solutions, we chose the Jamstack approach. JAMstack stands for JavaScript, APIs, and Markup (HTML) — 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), no server-side code, no 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' front-end development 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 with the sole focus of 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 frontend, we no longer have constraints found with a traditional coupled CMS like Umbraco, Sitecore or even WordPress.
Whilst other headless CMSs exist, e.g. Prismic and Sanity, that gives the ability to define Content Models, create content and manage roles, and expose content as data in REST and GraphQL APIs. We choose Contentful due to its easy-to-use interface, more options for content model definitions, and some 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
