Future Possible Case study
CLIENT'S CHALLENGE
- Needed a complete visual overhaul for modern design
- Required improved usability and user interactions
- Implemented favorites functionality for content management
- Added advanced search and filtering options
- Developed an interactive methodology wheel
- Designed a unique grid layout for content cards
Project in numbers
Uptime
Signals
Landing pages
Client says
We partnered with FocusReactive to redesign our e-commerce site for better usability and scalability. Their team was communicative, organized, and flexible, completing the project on time even with added tasks. The final product exceeded expectations with an intuitive design and scalability, and their use of tools like Slack and Trello made collaboration seamless. We were so impressed, we’re already planning to work with them again.
David Green
Director Operations, Future Possible
OUR SOLUTIONS
- Implemented the new design using Tailwind CSS, including mobile and tablet versions
- Created a balanced tablet design during development, bridging mobile and desktop designs
- Integrated favourites functionality via API and global context for seamless use across all content pages
- Developed a semantic search system with OpenAI integration, vectorized content, and automated indexing updates
- Enabled automatic indexing of new Strapi CMS content using a Next.js API endpoint and a Vercel cron job for daily updates
Project Tech Stack
Strapi
Next.JS
Vercel
KEY FEATURES
Interactive Methodology Wheel
One of the interesting components of the project was a large methodology wheel with interactive hover behavior. Essentially, it was a complex SVG divided into layers and segments, which dynamically highlighted specific sections and corresponding labels when hovered over.
This functionality was implemented using hover event listeners, which dynamically applied the necessary classes to the target SVG segments.
Dynamic Content Grid
Another feature was the complex grid layout, designed to allow cards to expand for reading while dynamically adjusting the positioning of surrounding cards.
Depending on the initial position of the expanded card within the grid, other cards would shift appropriately. This functionality was implemented by combining CSS and JavaScript to observe screen width and adjust the grid’s behavior accordingly.
KEY ACHIEVEMENTS
- Implemented comprehensive live previews per language
- Developed AI plugin for SEO content, and advanced GDPR-friendly analytics and tracking
- Simplified the onboarding process, training new staff members in just one session
- Ensured a 100% uptime for the site
- Successfully passed the Google Page Speed test, scoring a 98-page speed based on over 1 billion points
- Secured a top 1-5 search ranking across all active countries based on keywords
Team behind the project
Related articles:
-
What is Strapi CMS?
Explore Strapi, a leading headless CMS that empowers developers and content creators to build scalable and secure online experiences. Discover its unique features, best use cases, and advantages in this comprehensive overview.
-
Headless CMS Page Builder
Discover the top Headless CMS platforms with visual page builders, designed to empower marketers and developers to create dynamic, scalable, and visually engaging content with ease
-
How to Optimize Vercel Costs
Learn how to optimize your Vercel hosting costs, compare PRO vs Enterprise plans, and explore self-hosting for better performance and savings.