process notes: moment website

The overall idea and challenge behind our new marketing site was to create a balance between professional and minimal with bold interactive elements. Part of the task was establishing patterns of dynamic movement that accurately represented the fast paced yet steady and reliable ethos of Moment. Thinking about motion principles combined with the existing brand elements, we came up with a tool that helped us bring the concept to life.

Leaning into minimalism, we designed a homepage with no scrolling and one main brand element. The hero was about motion, interactivity and timing, there was no other way of doing this than figuring out live with a prototype directly in code, not only because it is closer to how it is going to be presented in a website, but also because it requires eye and a ton of detailed tweaking. The difference on timing and vibe wasn’t something that we could convey with static visuals: some things have to be felt instead of calculated or rather, some things have to be felt while being carefully calculated.

As the visual designer, I conceptualized and created the tool using Claude. It has three main parts: one that controls the initial state that appears right when you land on the site; a second set of controls for the render stage that cycles between a few shapes based on our harmonograph brand shapes; and a third section that customizes the transition between initial and render, as well as hover controls for both states and color.

Additionally, there's a light and dark mode, and a way of overlaying the layout of the hero to see how it looks like in context. This overlay was key in presenting the explorations in context, for us as the design team and for decision makers and leadership. As for how to compare and decide between alternatives, we created buttons for exporting/importing the settings as JSON, a recording button that exported as webm and a png that would export the current screen.

The embedded tools showcased in this article are lightweight reproductions of what each stage required so they don't have all the functionalities and are meant to show snippets of the process. They are prototypes meaning they are imperfect and were made quickly, with maybe type that is way too small, for achieving a goal outside of the tool itself.

The hero interaction represents the scattered processes and tools that Moment unifies into one platform, and so we wanted to have an initial state where you see all the particles floating around and then how they assemble into a coherent, precise and mathematical shape.

The biggest challenge of this initial state was timing, the scattered state had to be visible long enough to be noticed and also move on fast, but not too fast, so visitors would see the rendered shapes. It had to be clear and readable while also have an interesting transition into the render state.

With that in mind, we started to explore how the initial state looked like and figuring out what was a good balanced design solution. With the help of a prototype, we came up with a few different ways of showing the particles. after visualizing multiple explorations, we chose four that felt that had some potential. Potential as in they represented the energy, drive and precision that Moment has as a product and as a company.

The words that Claude used to describe the effects were: Drift, Orbits, Tide, Flock. In drift, the particles moved slowly in space, like dots in water. In Orbits, the particles were circling the center of the page, in Tide, they were ripples from the center to the outside, and in Flock, they had a sudden movement at the start and then settled into its place.

From there, we created a panel to control how everything moved. The first set of parametric sliders for the general aspect of the particles like size, density, spread, etc. One button for each mode of organizing the particles and a second set that changes depending on the mode so we can fine tune depending on the specificities of the selected effect. Additionally, a hover effect panel with a few concepts and a color selector, for deciding between our branded palette.

After playing around with the tool, exporting a few videos and comparing between versions we decided that the tide effect was the one that represented more closely the Moment positioning. Particles continue to be separated yet they're leaning into one direction, to fulfill a specific goal, and that movement is intentional and clear.

We worked with the particular tide parametric sliders that went more into detailed fine tuning: speed controls for how fast the ripples move from the periphery to the center, amplitude slider so we can tweak how far the particles get pushed by the wave so the rings will look more or less defined, wavelength for distance between these rings, falloff for attenuating the distance between the waves, and so on.

Multiple sets of sliders for more visual nuances that had to be individually constructed. It is ironic that in a process made possible by AI, the iterative design process continues to be deeply manual and the decision about what we need from the tool, what looks good or not, and what makes sense to our brand continues to be made by us.

Having decided on an initial shape, the process of figuring out the transition into the rendered shapes derived from it. Mostly because the initial state we decided on had a defined sense of directionality, it made sense to lean into the direction and made the particles gather in the center of the screen to then expand into the shapes. The challenge now was to figure out exactly how the expansion worked.

Here again we explored multiple ways for how the particles transform, alongside the timing and the hover effects, having in mind that they will form a complete interactive element, they had to be cohesive in their behavior. So the tool acted as a combinatorial playground, we came up with five modes for the transition: converge, peel, dissolve, fold and vortex and recorded how they looked like combined to compare and contrast between options.

This is where the eye, continuous iteration, trial and error to get to what feels right comes in play, as we were recording and comparing the timing for the transition started to crystalize, as well as what we wanted from the hover effects. As a visual designer, I also knew that this was an approximation of what was going to be achieved in the actual website, my tool was made with P5.js and on the actual site the result had to be replicated for performance. It was still important to me to have a defined point of view and polish the tool in order to transmit what the pov was.

What was interesting throughout this process is that every stage required a slightly different version of the tool and coming up with new interactions that represented different concepts which in turn require different sliders to control the properties. The process of expanding the tool was part of the website design process itself.

The render stage determined how the shapes transitioned between them, their individual movement as well as their duration. The shapes were created based on our main brand and each shape is mathematically created based on harmonographs and complex lissajous shapes.

This is the third section of the article but the shapes were actually designed first in the project. We arrived at them with a minimal version of the final prototype made to explore the shapes by themselves. It was important to have shapes that were different and cohesive amongst themselves.

The final list of shapes was kept intentionally short. I like a definition of design that says that design is the generation of variety and reduction of variety. Sometimes the process of generating variety expands so much that getting to the reduction portion seems impossible. Every project and every phase is different, but in the case of these shapes where basically infinite variations are possible, it was important to keep it short, as they were both a big part of the hero but not all of it and there was a real time constraint.

Initially, our main brand shapes were made out of lines, and for the new website we decided to explore what would they look like made out of particles. Since the creation of the brand, our idea was to build something that would grow over time, a flexible and expansive visual system, and this was a great moment to test that.

There was a balance to be achieved as some combination of density and size of the particles looked great, and other not so much. The parametric slides helped us with figuring out how they were spread or clustered, and because we could export the json numbers and settings, this was something that we could translate to the actual website.

Each shape had a set of sliders to define its characteristics and by tweaking these we achieved shapes that were interesting, complex, and readable. The render state of the tool also helped us see the combinations between them to decide which ones made the more sense together and how to stack them one after the other.

Much has been said recently about design in AI era, how it changed our workflows and even questioning the role of design itself. To me, AI design work is not prompting something like “give me a cool hero section, make no mistakes” and more like what the process above is describing: using AI as a tool to manipulate code, code that otherwise would be inaccessible to me, and by a series of successive iterations arriving at solutions, or happy accidents, that make sense for your specific goal or intended result. And then, using AI to create an artifact that can be used as document for a developer or a design engineer, containing the main parameters to transform a prototype and a series of interactions into a real live project.