Think Through Nutrition (TTN) is the UK’s leading voice on the link between nutrition, brain health and behaviour. We recently helped them move their site from Squarespace 7.0 to Squarespace 7.1.
Unlike a fresh site build, Think Through Nutrition already had a great website that accurately explained what they do and why to their audience. However, Squarespace’s new 7.1 version provided several significant updates, including universal templates, which prompted TTN to transition.
Moving to Squarespace 7.1 is complex. Unfortunately, some fundamental site options were altered, while other valuable features, such as the indexing feature, were removed, which limited how TTN could display information moving forward.
Additionally, a one-click switch was not possible, and instead, the site had to be rebuilt from the ground up using the new settings and processes that Squarespace had put in place.
With over 90+ pages, making this change was not an easy endeavour. Nonetheless, we worked closely with TTN to ensure their website was successfully updated while meeting their requirements.
What We Did
Since moving the site to the newer version required a fresh rebuild, we had to treat this project like we were building a new website. Doing so from scratch would also allow Think Through Nutrition to optimise/streamline some of its pages. A mini-rework to some core areas would take additional time but be substantially easier to do at this stage and would prevent us from doubling up on work in the future.
To do this, we split the project into four distinct stages:
1) Page Organisation & Site Styling
The first stage of the rebuild focused on two elements:
- Understanding the site layout
- Optimising styling with 7.1
We communicated with Think Through Nutrition on their plans to streamline their pages, including merging key navigation elements into new parent pages. Merging this way meant we needed to restructure some child pages for them to make sense under the new navigation label.
With direction from TTN, we curated a new navigation that better suited the user’s intent while looking for information. This also included merging key pages, streamlining the information-gathering process for the user, and minimising clicks to additional pages.
During this process, we also began to understand the 7.1 changes made to site styling and colours. Our developer optimised each site palette to match the previous site, including text spacing and font size.
Once we had the foundations in place, we tested these components by building two main pages of the site. This process was a core time-saving component, enabling us to see how these stylings worked with the newer version and whether any tweaks needed to be made before we started the site rebuild.
Once confident, we completed the bulk of the website in one fell swoop.
2) Page Rebuilds
The benefit of working on a rebuild is that it will always take less time than starting on a new design. That said, with over 90 pages, rebuilding took considerable effort to achieve. We needed to rebuild the pages and ensure they were mobile optimised, that we used the same imagery and that links were correct and pointing to the right destination.
As we regularly work on new website builds and SEO optimisations, identifying these elements is always at the forefront of our minds. During the rebuild, we picked up on a few core optimisation changes that we could implement. These included:
- Adding an organic “next step” call to action at the end of each page. In the previous design, the end page call to action would link back to an “overview” page, which created more steps for a user when seeking information.
- Streamlining how information is delivered by effectively using accordion blocks and image blocks. This limited the amount of information users could see when they loaded the page, giving them greater control over seeing what they wanted – a small change that vastly cuts down on the scroll length for mobile users.
- Removing coded sections where applicable. Some sections on the previous design were hard coded in – for example, a bordered table. While these sections look good, they are very challenging to edit as a user unfamiliar with the code. Similarly, altering any information within these sections would break the formatting and cause issues on both desktop and mobile. Instead, we replaced these sections with user-friendly blocks that anyone can edit without causing an SEO impact.
- While not front end, we optimised the admin’s page locations and folder structure. The restructuring will allow the Think Through Nutrition team to navigate their pages better and find the content they want more quickly.
Additionally, we made some minor tweaks to some pages regarding how links were shown. Ensuring that in-text links were generally opened in a new tab and deadlinks removed where applicable.
3) Site Checks With the Client
Once we completed the initial rebuild, we passed the site over to the client to check. Having them check is a crucial step, as regardless of the time we have spent with the site, Think Through Nutrition will be far more familiar with their site than us.
There is also the possibility that specific changes made may be undesirable, which happened to be the case.
One example of this is the publications page. We changed how this page functioned by adding an additional page that acts as a categorisation page, allowing users to select which publication category they want to read. After communicating with Think Through Nutrition, they expressed their desire to have this process as streamlined as possible, which meant removing the additional one or two click-throughs we had implemented.
A key note when rebuilding or redesigning is acknowledging the relationship between user experience and purpose. These conversations are vital to helping both parties find the perfect set-up for each page. In this case, we focused on the user experience, highlighting how an additional click may make traversing these pages easier. However, TTN identified the core purpose of the page – quick access to the complete list.
Think Through Nutrition did their due diligence, which was highly appreciated and came back to us with a list of notes and questions regarding the rebuild. In addition to this, there were a few styling and sizing issues across the site. Some of these were due to 7.1’s global text sizing, which we could rectify.
Some, regarding functionality changes, we weren’t able to solve. With the shift to 7.1., Squarespace had removed some functionality that meant we could no longer implement some features the previous site had in place.
4) Final Amends & QA Checks
After multiple rounds of changes and numerous back and forths with the Think Through Nutrition team, we successfully rebuilt the website on 7.1 and, where possible, included all functionality and design components as the original.
Our final steps were to complete a full site QA check. Here, we do three things:
Check the admin layout and page structure to double-check that everything is present as was on the original website.
Navigate the complete website on the desktop version as though we were a user. This allows us to test user experience as someone using the site, test links and see if there are any load issues.
Navigate the complete website on mobile. This allows us to check mobile formatting and spacing and ensure we have optimised each page for mobile users.
Once we completed our checks and were happy, we asked the TTN team to check the website themselves before giving us a final sign-off to ensure everything functions as they had intended.
Wrapping up With TTN
Projects like this help us enhance our internal web development skills while working with passionate teams like Think Through Nutrition.
We were proud to complete the project within a tight time frame and with the flexibility to optimise the site as necessary.
The updated website remains true to TTN’s mission and branding but with improved functionality and design. Check out the new site here:
And if you’ve seen their previous site, you may be thinking, “what’s the difference?” – and that’s precisely the point!
Here’s what Think Through Nutrition had to say regarding working with us for this project:
“Working with Yoke on this project was a pleasure. They handled the migration process smoothly, and we were delighted with the final result. The team’s flexibility and expertise allowed us to make important changes to the site, which will enhance our user’s experience.“
Tahani saridar | Ceo
