Delivery Objectives
- HEADLESS CMS
Deliver a user-friendly CMS that enables easy and quick content creation
About Green Custard
Green Custard is a cloud-native professional services company and AWS Advanced Tier Services Partner, helping clients innovate and deliver value back to the end-users and customers.
Green Custard works across multiple sectors and with a broad range of client sizes, from entrepreneurs and tech start-ups to global enterprises and public sector organisations.
They are focused on the four key disciplines:
- IOT
- Cloud infrastructure
- Apps
- Cloud Operations
Challenge
When Green Custard reached us, their existing website was already built with Jamstack. The User Experience wasn’t bad, but because of the chosen tech stack, they struggle with scalability, new pages creation and content management.
They wanted to get a new, one-of-a-kind website that would reflect their knowledge of the latest technologies and wide experience in that field.
Website goals
- Support the Business Strategy
- Reach Potential Customers
- Improve SEO Ranks
- Increase Conversions
Choosing technology partner
Green Custard is experienced in web development, so they knew exactly what they wanted to achieve. They just didn’t have enough in-house resources to execute the whole project.
High expertise let them set clear expectations for the potential partner. They reached out to three different agencies for an offer and technical review.
Why Pagepro?
CEO of Green Custard, pointed out in his Clutch Review, why they picked us:
“We looked for web design agencies through a Google search. We shortlisted three, and they all sent us proposals. We chose Pagepro because they passed our technical test, and their offer matched how we wanted the website to be done. In addition, we liked the flexibility of their package.”
BUILD YOUR OWN JAMSTACK WEBSITE
Plan the right kickoff with our experts. For free!
Project requirements
- Easy Content Management
- Superfast Website
- High Scalability
- Secure Data Migration
Technologies
Sanity
IntegrationNetlify
Deployment
Why Gatsby JS?
While choosing the tech stack, we were also considering Next.js. We found Gatsby.js more appropriate for this project because most of the Green Custard website (besides the Contact form) can be statically generated and it’s not updated very frequently.
Our general approach at Pagepro is to choose Gatsby for smaller, less frequently updated marketing websites. Gatsby allows building highly performant websites that are easy to maintain. It also allows us to use a leverage of rich plugins ecosystem.
Even though Next and Gatsby are quite similar, they differ in the use cases they are best suited for. We’ve created an article on which one to choose and when. If you’re not feeling like reading, check out the video below:
Why Sanity?
Sanity was the best choice for this project because it provides full flexibility in content management. It was Green Custard’s primary requirement because employees from different departments were about to collaborate during content distribution.
Live previews were another important factor for the customer. Green Custard didn’t have this option in the previous CMS, so content management was time-consuming and ineffective. Live previews in Sanity enable you to keep an eye on the overall look of the content during creation. Just take a look below:
Why Gatsby JS?
- Rich plugin ecosystem
- Easy to start with
- High performance
- Easy to scale up
- Future-proof
Why Sanity?
- High flexibility
- Easy management
- Easily accessible
- Ideal for Jamstack integration
- Powerful free plan
Why did we cut the website’s head?
We decided to go headless because this is the best solution for flexible content management in future-proof projects like this one.
The headless approach decouples content management from the presentation layer, which brings many benefits, like:
- Flexibility
- High Security
- Reusability
- easy management
The Delivery
We started the project with the discovery phase, where we determined all the essential components based on the customer requirements and site map.
We delivered a document covering the components and available options for each and every page, so the customer could get acquainted with the scope of work and confirm that all the requirements would be met.
The customer didn’t establish the design, so our UI designer proposed two different style scapes accordingly to the brand visual concept.
The chosen style scape was the foundation for the components library and wireframes that we created to present the UI and UX design.
The team of four was delegated for the project delivery. It consisted of the JavaScript Developer, UI developer, Project Manager and a Tester. To run the development phase smoothly, we run the daily meetings to check the work progress and quickly deal with any blockers that could impact the delivery of the sprint.
Apart from our internal meetings we met the customer every other week for status meetings to keep him up to date with the progress.
We’ve split the development process into 4 phases:
Stage 1: Initial works
- Checking the requirements
- Creating Project Backlog
- Setting up testing environment
- Headless CMS Initial configuration
OUTCOME: Complete project backlog + New look and feel of the website + blank Gatsby site running on the test URL
Stage 2: Static Version Development
- Preparing basic project style guide
- React components and core blocks creation
- Quality Assurance
- Project Management and Communication
OUTCOME: Complete list of static components + Core Website Pages released on Gatsby test URL
Stage 3: Headless CMS Integration
- Data modelling
- Integration with Jamstack website
- Managing pages
- Quality Assurance
- Project Management and Communication
OUTCOME: Fully dynamic Gatsby website on test URL
Stage 4: Finalization
- Speed Optimization
- Data migration
- Google Tag Manager implementation
- Technical SEO Optimization
- Going live
- Quality Assurance
- Project Management and Communication
OUTCOME: Fast and flexible website on production address.
PERFORMANCE OUTCOMES
Jamstack approach in static websites like this provides an amazing website performance, just take a look at those stats:
Besides the blazing performance, the website is easy to manage now. Check out how does it looks like:
Quote from the client:
"Pagepro’s team was accommodating, and they even did small tasks outside of our contract."
Have a similar case? Use our experience!
Talk to our expert and see what we can to do push your project further.
