Urban.co A headless CMS
implementation project that
gave marketers full autonomy
Let’s meet Urban
Urban is an app/web service for booking treatments from the spa and the clinic, like massages, beauty treatments, osteopathy and physiotherapy, to your home in just 60 minutes. It couldn't be simpler to use; just choose your treatment, pick a qualified therapist and set a time and place.
For busy professionals in the city, it’s a smart, simple way to fit relaxation and self-care into a hectic schedule. They can trust that they're only booking the best therapists, too, thanks to Urban's stringent vetting process, plus the support for reviews, bios and ratings for each therapist.
And for the practitioners using Urban to connect with clients, it’s a new way to earn more working to their own hours and on their own terms.
Urban's there to support them along the way, offering pay when they need to take time off sick, and helping them manage their finances.
Since its founding in London in 2014, Urban's community of therapists has grown to over 4,600, with over a million treatments delivered across four cities: London, Manchester, Birmingham and Paris.
Along the way, Urban's acquired over $35M for further development. But part of Urban's plan for future growth has been to double-down on SEO strategy, especially in the area of content localization and management, as well as SEO strategy implementation.
What the client wanted to achieve
Urban approached Naturaily with a request to discuss the development of their new Jamstack website. This involved a couple of goals.
Firstly, they wanted to implement a headless CMS that gives more possibilities for easier and quicker content management, and removes the need for developers to be involved in the process at the same time.
Secondly, Urban strongly desired to use a solution that gives more control over SEO strategy implementation for different markets and locations.
They also needed a solution that makes particular sites’ customization and localization easier and smoother for content marketers.
Finally, by implementing new designs to the site, Urban aimed at offering a better UX for anyone visiting the site (making it easier to find a treatment or practitioner, alongside live chat implementation).
Need more background? Read on!
Moving forward with the website’s architecture
Before we started the cooperation, Urban had their website created in the traditional – or you can also say – monolithic approach to web development. It didn’t work perfectly for a few reasons.
Firstly, any content changes on the website, design or copy related, or new content, had to be implemented by a developer, posing issues in terms of resource prioritization and efficiency. This meant that the opportunity for testing and optimization was fairly limited, especially for something like SEO, which is so reliant on targeted and structured content.
For the dev team, building an in-house CMS to enable the marketing team to have more control over the content would be unrealistic and very labor intensive.
Secondly, the monolithic architecture started to cause problems and inefficiencies when it came to linking everything up with their implemented original booking system solution.
The front end and the back end were tightly coupled with each other, and it was the engineering team that was responsible for implementing even small changes to the website.
The team at Urban wanted to move the design and content creation to the marketing department, and they needed a comfortable and intuitive solution for achieving that.
Scaling up and going Jamstack
Another key factor in the choice of technology and headless CMS provider was the ability to localize content based on the targeted market and make better use of their comprehensive SEO strategy, including a specific approach to translation, localization and treatments’ targeted promotion.
In other words, Urban wanted to have more control over structuring, targeting and designing their particular pages for particular groups of users. This was important because local markets tend to be diversified in many ways, including legal, business, or demographics factors.
They also needed a performance boost as Core Web Vitals are crucial for Google’s ranking and, thus, SEO.
To meet all the goals, we needed to change the stack and architecture completely.
And since the monolithic approach wasn’t actually the best solution here, we were keen on changing it for the Jamstack architecture.
But why Jamstack at all? It gives as much flexibility as you wish to have, with achieving great web performance at the same time.
Thus, we were more than happy to start the project since we create websites not only because we like it (we do!). It’s providing clients with platforms they need to grow their business with that make us engaged in the whole process the most.
What we had to face
From the most general perspective, our main aim was to change the website’s architecture from monolithic to headless. It sounds like a regular job for a Jamstack agency like ours, but we know from experience it’s a more demanding process than it seems.
With Urban, going Jamstack also meant implementing new designs, developing responsive content templates, changing the developers’ experience with the website, equipping content marketers with skills to manage content and design new pages, transfering the know-how to the client’s development team, slightly recreating the UX… and many more.
For example, there was a strong need of achieving balance between giving freedom to content marketers in terms of designing the pages on the one hand, and maintaining the consistency of the design system on the other. It required well thought-out tactics. Also, maintaining the authenticity of the brand while giving enough room to edit the content in terms of the visual layer was also indispensable.
One of the most important parts of the project was achieving an efficient content migration from the previous site to Storyblok. This was particularly challenging given that the structure of the new front end differed from the previous one. We were also tasked with improving the performance of the website and, at the same time, we were restricted with the customer’s hosting solution and didn’t have any space to change it.
Last but not least, the website should be modern enough to be easily and seamlessly expandable with new services in the future.
Doing all of this at the same time always comes as a challenge. And yet, if you add an additional requirement that the whole platform must cooperate with an already-implemented original booking system, and if you understand it’s strictly intertwined with many pages, the challenge becomes somehow bigger than usual.
But… totally doable. Read on to learn how we did this!
How we chose the stack and strategy
As for switching to Jamstack architecture, we were on the same page from the very beginning. Urban approached us with a clear message: we want a Jamstack website because they’re quick and flexible.
The main cause of imperfect workflows was the way content was added, structured, presented, translated and optimized for SEO. We knew we wanted to implement a headless CMS… but there are over 100 headless CMS on the market. Which should we have chosen, then?
To recommend an optimal solution, we wanted to know how both engineering and marketing teams work and what they’d require from the future tool. There were two crucial factors.
Firstly, the CMS itself should be intuitive in use and easy to learn for content marketers; it should be also effortless for them to design single pages without the risk of compromising the web and the need of contacting web developers frequently.
Secondly, we should be using Styled Components for styling; also, we couldn’t change the hosting set up. After some discussion, we collectively decided to go with Storyblok CMS. What were the deciding factors and what did we implement?
Storyblok can function as a convenient inside-CMS web builder making the design of the site highly intuitive for content marketers, as well as safe and predictable for the technical team (e.g. imposed styling frameworks placed directly into the code). Storyblok also supports differentiating users’ access levels to almost every component and feature; this basically gives the utmost flexibility in terms of setting up the behavior of the whole content management system and its dependencies.
What’s more, it has an actual visual editor with a preview giving content marketers the possibility to quickly check their modifications (still not so obvious in the headless CMS ecosystem!). With components-based website design, every component can be reused: copied, moved to another page and modified with only a few clicks within the Storyblok CMS.
Thanks to folder-level translations instead of field-level translations only, Urban’s marketing team is able to change the setup of particular language versions and is not limited to the same structure of pages. SEO-related elements, like meta titles, descriptions, tags, categories, slugs, OG, and Twitter tags are easily editable per page, in order for Google and social media platforms to render the right data.
Choosing Storyblok was backed with the use of Next.js and TypeScript for making code creation easier. Regarding the building and deploying of their websites, Urban opted for staying with their previous solution, Cloudflare Pages, and it was one of the few aspects we couldn’t alter.
Technological stack
-
Storyblok
(Headless CMS) -
Cloudflare Pages
-
NextJS
-
TypeScript
-
Styled-
Components
Team composition
-
1
3 Front End
Developers
(Naturaily) -
2
1 Project
Manager
(Naturaily) -
3
1 CTO
(Urban) -
4
1 Product
Owner
(Urban) -
5
1 Web Developer
(Urban) -
6
1 Marketing
Specialist
(Urban)
What we accomplished
In three months, we managed to successfully guide the change from a monolithic to Jamstack / headless architecture. Together with Urban’s content and engineering teams, we refreshed the website's stack, changed visuals, migrated content, and redeployed the website.
Our work resulted in:
-
Increasing the performance of the website
-
Implementation of a headless CMS that makes content management easier and quicker
-
Implementing new designs and UX to the site
-
Adding the marketing team more control over SEO strategy, including implementation for different markets and locations
-
Making the customization and localization of specific sites easier and smoother
-
Transferring the Jamstack and headless know-how
-
Decreasing amount of work for the engineers
We’re happy we provided Urban with a key tool to expand and scale up their business: a B2C Jamstack website. Urban is no longer confined in terms of website architecture; they’re now equipped with a future-proof stack that is simply more flexible and adjusted to the modern digital environment, with easier possibilities for further modifications and API integrations.
The marketing team now works in full autonomy since marketers don’t need to wait for a free slot on the development team’s product roadmap (they can now easily do A/B tests, make edits for SEO purposes, change image descriptions or edit the URLs themselves).
The marketing team can manipulate and arrange the content easily: pieces of content that needed a full month to be completed can now be finished within just a week.
Marketers can also easily use Storyblok’s content editor to design new pages on their own, with the use of tailor-made and modifiable components; this was preceded with creation of a design system that serves as a framework for content publishing purposes.
They can also prepare different treatments for pages as needed for the specific location.
Some numbers (we all like numbers!)
-
100%
reduction of the web
dev team's time needed
to manage content -
12.3%
increase of organic search
impressions after 2 months -
1
week needed to
finish content processes
that had taken a month -
96
Lighthouse performance
score when going live
The Storyblok's content localization and adequate-to-location SEO possibilities already paved the way for better connection with customers (the ranking for top and important keywords has improved dramatically, as Urban is now able to gain the top 3 positions in SERPs easier. After only 2 months of launching the new site, the organic search impressions have increased by 12.3%).
Web developers and engineers now have more time to deal with their core responsibilities (the time spent on supporting the content team has decreased by 100%, meaning the content team is more autonomous).
To make sure everything goes smoothly from now on, we passed the know-how to the teams so they're absolutely familiar with their new platform.
Despite not being the most important issues, we also did some work to improve the customer experience. Visitors can more easily start a conversation with customer service thanks to a live chat solution (we used Salesforce).
The refreshed design and UX make key information more accessible for visitors, and the list includes treatments' descriptions, prices and benefits.
The performance change of the website goes as follows:
-
Performance score (GT Metrix)
60% 74% -
Performance (Lighthouse)
30 96 -
Cumulative Layout Shift (CLS)
0.02 0.001 -
Largest Contentful Paint (LCP)
3 s 1.2 s
What our client says
Throughout the collaboration, Naturaily demonstrated a strong ability to push for answers that allowed us to fine-tune the CMS to meet our specific needs.
Elsa Favario
Marketing Director at Urban
One of the key things that stood out about Naturaily was their ability to communicate with non-technical project managers on our side. This made the collaboration process much smoother, and allowed us to work together effectively to achieve our goals. Overall, I would highly recommend Naturaily for their commitment to delivering a good product. Their willingness to listen to feedback and incorporate it into their work was also greatly appreciated. They were instrumental in helping us migrate to a system that gave us the autonomy we needed to effectively manage our content.
Read the whole review on Clutch
Urban’s case is a prime example of how we migrate websites to Jamstack
We’ll drive you through the whole process seamlessly