Discovery

Rise at Seven has enjoyed enormous success since it was founded in 2019 and has recently won the Drum Digital Industries Agency of the Year award, which recognizes just how significant its performance and growth have been to date. Work with external partners had been ongoing on the development of the new site for over a year without much success. We were appointed to help fix this and to develop riseatseven.com with Sanity.io and Gatsby.

Planning

The first and most important decisions in the planning phase was to use Gatsby as the front-end framework. The deciding factors were

• Gatsby comes with its own optimization layer for images. Considering the design was very image heavy, this was extremely useful in development.
• Websites built using Gatsby are at least 2–3 times faster than other similar kinds of sites.
• With the vast number of SEO (Search Engine Optimization) plugins to use, it is a lot easier to handle SEO factors from the development end.
• Gatsby was a good option for easy internal management.

For Sanity, Rise at Seven already had the schema setup, but we decided to go with a fresh Sanity setup as the schema defined in the earlier Sanity version was not optimized for the design and content. Our key focus when setting up Sanity was how easy it was to update content for internal teams and editability of key SEO factors directly from the CMS.

After the project planning, we established a time estimation of 8 – 12 weeks with a team of 2 developers, one full-stack, and one front-end as well as input from the team lead.

The development

The whole development phase was divided into a number of agile code sprints with each sprint spanning between one to two weeks depending on the list of tasks and goals of that sprint.

One of the challenging aspects of the build was to make the site extremely fast despite the heavy use of images and videos on the front-end. The image preoptimization features of Gatsby was especially useful for this part.

Another important front-end requirement for the build was to capture the fluid and snappy animations from the designs. We used Framer Motion to help us achieve these requirements.

One of the key requirements from the client at the tail end of the project was the capability for content changes in that are made in Sanity to be reflected in the front-end instantaneously. To do that we used a hook to trigger content publish event in Sanity and a rebuild of the Gatsby application on Netlify whenever that is triggered.

The system architecture looked something like the diagram below.

QA & deployment

We worked with Rise at Seven to run QA and website quality audits before deployment, we also independently ran tests according to our own quality standards that we follow in-house before handing the site over for deployment. Stress tests, quality audits, and integration testing to name a few.

Website QA went smoothly with the Rise at Seven QA team, and we also worked in combination with the Rise at Seven SEO team to ensure the site was ready, this included things such as functionality for self-referencing canonicals by default, with the ability to overwrite.

Result & key takeaway

The results are amazing with the site perfectly reflecting the Rise at Seven brand, and the interactions and animations make for a beautiful website that provides an amazing user experience.

This was a remarkably interesting project for us in so many ways and we learned a lot throughout the process. The most important takeaway however would be how we optimize SEO factors with Sanity for headless builds.