The goal
A website befitting of Amperity's ambitions where non-technical team members could add & customize content
Amperity is a late stage startup that helps some of the world's best well-known brands use their customer data better in order to create superior customer experiences. As the company grew, so did the need for a modern web practice to scale with the team's activities.
Discovery
A team of teams: different fields, same direction
We interviewed members of different teams to find out how the web contributed to their goals, and how the then-current process was letting them down and several themes emerged.
The stack was hard to work with and unpredictable — if they had a page that needed to go live they didn't know if publishing would take 20 minutes or a full day. Furthermore, it was difficult to add new designs and templates as there was no defined process or a 'product owner' to help take that process forward.
It became clear to us that it was not just a technical problem, but a process and communications one as well.
Strategy
A place for everything and everything in its place
The number one thing that needed to be done was to restore confidence in working with the website. To that end, we made decisions with the following principles in mind:
Technical systems
- Fast and stable performance: Allows for anyone's work to be well-represented, whether internally or to prospects and customers.
- Hard to break: Having the system actively prevent anyone from doing anything that would take the site down increases exploration of features and peace of mind.
- Easy to understand: Team members can have a conceptual framework of how to accomplish their tasks without surprises.
- Scalable: The system should get better over time, and has headroom to grow.
Process management
- Approachable and low-friction: The process helps, not hinders the task
- Predictable: The dependencies and outputs can be easily planned for
Execution
A headless approach backed by a documented workflow
We took a modular approach so that we could use the best available technology for each task, while also leaving the possibility of migrating to a different toolset should the need arise. Here's a high level overview of what we chose.
The technology stack
- Storybook - building to and documenting our components allows us to showcase all the variations and easily test edge cases.
- Next.js - hybrid static pages as well as server-rendered ones gives us the best mix of flexibility and performance.
- Contentful - a headless CMS that's flexible and easy to use.
- Github - version control allowing for multiple developers to simultaneously work on the codebase.
Building the process
We took a three step approach to creating resources to aid the team in the process.
- Documentation - we created documentation that described what was needed for each workflow. Interactive demos were also made available on Storybook so that anyone could explore the different variations of our modules.
- Training - training was customized to the various teams so that we could show them a step-by-step on their common workflows. For example, the content team were showed how to create a blog post.
- Automation - we created a template in our project management system so that just choosing that option would generate a list of things to do and some resources for how to think about approaching various tasks.
Impact
Infrastructure and processes that helps us to move fast, without breaking things
Since launching the site on the new platform, we've not only been more stable than we've ever been with no outages, but we've also enabled the team to push content faster they've never been able to before, all while being able to continuously add new features and improvements.