AMPLIENCE - GET STARTED GUIDE
Next.js in Action: Building an Interactive Guide Demystifying CMS’s Capabilities
About The Client
Amplience the AI Content company, brings together data, performance insights, and generative AI that helps merchants and developers deliver persuasive content for every shopping context that fuels truly personalized, connected experiences. More than 400 of the world’s leading brands use Amplience including Crate & Barrel, Ulta Beauty, Coach, OTTO Group, GAP, Currys, and The Very Group.
Challenge
Amplience stands as a specialist in the realm of technology, focusing on an API-first, headless content management platform. They understood that the core of its expansion hinged upon enabling effective developer adoption, yet they faced the challenge of explaining how the platform and dynamic content there really worked and how beneficial it was. They knew that for devs, the interactive environment is much more effective than providing another long documentation. To accelerate a top-tier developer experience, Amplience aimed to create an interactive "Get Started" wizard guide for developers.
Amplience, prioritising core product development, had to strategically allocate their developers across the projects. Striving to maintain velocity across multiple high-priority tasks, the company required a swift and efficient solution that would not compromise the quality of the developer guide. And that’s why they were looking for an experienced React JS Development Company.
This strategy is not uncommon among software providers with established, proficient development teams. Often, these teams are fully engaged in advancing the existing product and lack the bandwidth to embark on new projects. Rather than investing in long and risky hiring new developers, these companies seek experienced teams that can exhibit strong performance right from the outset of their collaboration.
Want to Build Your Web App With Next.js?
Tell us about your challenge, and let's get the ball rolling.
Solution
In response to the challenge, Amplience visualised a proactive solution that aimed to demonstrate its platform's capabilities for developers. Rather than solely explaining their wide offerings, Amplience thought of a more hands-on approach. They decided to create a practical trial environment – where developers could engage with the system directly and understand the nuances of dynamic content creation.
This creative solution contained a three-stage pathway to developing dynamic content, a process integral to Amplience's system. Understanding the potential value in a practical, experiential approach, Amplience provided developers with trial access to a specific segment of their system. This decision allowed developers to interact directly with the platform and experiment with these components.
Given our previous successful collaboration during building documentation for their Developer Portal, Amplience turned to us to address this challenge. Remembering our React expertise, Amplience decided to one more time use our experience for streamlined project execution and frictionless development. It's worth noting that after the first project, we had the pleasure of meeting the customer face-to-face! This priceless interaction provided the opportunity to gather feedback and solidify our compatibility for this project.
How did we make the development frictionless?
We chose the modern and most efficient tech stack: Next.js, Storybook, TypeScript, Tailwind CSS and Jest
We set the progress tracking independently from the Amplience API to prevent changes in the pre-existing solution
We reshaped the custom library components we created at the beginning of the project to meet the rebranding requirements that occurred during the project
We crafted a Next.js web application based on detailed designs and a complete working prototype Amplience provided us. This app, linked to their expansive platform, is propelled by an API they also provided.
Knowing Amplience's preference for an Agile approach, we structured our work using the Scrum framework. Guided by our experienced Project Manager, who also served as a Scrum Master, we ensured every aspect of the project flowed seamlessly. It empowered us to adapt swiftly, fostering collaboration and delivering results that aligned precisely with Amplience's evolving needs. To this project, we delegated a team of 5:
Adam Chylinski
Senior Project Manager
Scrum Master
Kasia Krawczyk
Front-end Developer
Michal Moroz
Front-end Developer
Daniel Nizynski
React Developer
Rafal Mieczejko
Tester
Development
We built a web app that's a crucial part of the extensive Amplience Developer portal, ensuring it aligns with their operational conditions. We developed the app as a microservice that is displayed in the iframe inside the developer portal, and connected it with their CMS by the API, to fit into the complex platform which is based on smaller microservices.
Tech Stack
Since we were building the app from scratch, we were also responsible for choosing the tech stack. We know how technologically advanced our customer is, so we had to choose the best solutions that won’t influence their growth. Our choice was:
Next.js for building a highly efficient web app
Storybook for building the components and gain feedback from the customers simultaneously
TypeScript chosen as the standard in our projects now because of its efficiency and testing capabilities
Tailwind CSS for rapid and consistent styling
Jest for testing to ensure the reliability and stability of the application
For our core technology framework, we opted for Next js, the best choice for crafting modern web apps. It was a great option for this project also because of Amplience's previous projects that were built with Next js, such as their website. This shared alignment made it the perfect selection for smooth integration and ensured a consistent developer experience across their projects. Moreover, Next js's robust features in dynamic content rendering further strengthened its suitability.
We began development by reviewing the designs and acquiring two dedicated libraries, which we had to integrate to facilitate effective communication within Amplience's platform. Additionally, Amplience provided us with a fully functional prototype, which served as an example of how the platform should work.
Taking charge of the complete UI development, we crafted every aspect to ensure pixel-perfect precision. We recreated UI components and app sections within the versatile environment of Storybook, enabling isolated testing for our customer’s technical experts, who maintained continuous access to Storybook, and, as a result, speed up the development timeline.
Midway through development, Amplience initiated a rebranding of its entire platform. Given that the components we created were initially aligned with their previous branding, they provided us with the updated designs. We took on the task of reshaping the custom library to mirror the new designs, a process that demanded additional UI development hours. We recognized the importance of this initiative to our client, so we swiftly adopted the challenge.
All of the content in microservices available on the Amplience platform needs to be managed via the Amplience CMS, connected to the apps through the API. Their API, while not custom-tailored for our specific project, introduced some complexities in efficiently tracking user progress. In response, we devised a resourceful strategy. By assessing completed content pieces during user login, we recognised their advancement. It eliminated the necessity for any modifications to Amplience's pre-existing API, putting the task of adjustment firmly in our capable hands.
“Despite complexities introduced by the API, our strategy dynamically tracks user progress by evaluating completed content during login. This approach streamlined content management and integration of the 'Get Started' wizard app without altering Amplience's API."
Adam Chylinski, Senior Project Manager at Pagepro
As an added option, we conceived a small, supplementary microservice. It provides developers with a dynamic preview of their content in a real-time context, offering an enriched developer experience and streamlining the validation of content.
Results
The recently launched Get Started guide has swiftly generated positive results for the Amplience business within the initial few weeks and secured 8 subscriptions in just a few days.
Accompanying this achievement, the acquisition of several prospects and 3 promising leads underscores the guide's efficacy, particularly given its recent promotional efforts and forthcoming campaign plans.
33 accounts have been successfully established, predominantly by partners who will further disseminate the guide to clients.
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
- testimonials
Pagepro was excellent from a project management perspective, thanks to their budget flexibility and timely adherence to our deadlines.
Nick PiperDirector of Product, Amplience
HAVE A PROJECT?
LET’S TALK ABOUT IT!
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
- THE FORM
Tell us more about your project
Please provide detailed information about your challenge, and our tech team will promptly review your submission. Expect to hear from us within 24 hours with tailored next steps and insights based on your request.
Book a Meeting With Our CEO
Upon receiving your form, we typically recommend a briefing meeting with our CEO to explore the specifics of your project. Schedule your meeting now to kickstart a tailored approach.
Chris Lojniewski
CEO & CGO