The Invisible Hand of UX

Branding

The name "Invisible Hand of UX" stems from the concept of an invisible hand guiding a country's economy. In this case, I wanted to apply that metaphor into the design world. I knew that I needed to include a literal hand in the branding to solidify the metaphor. This is how I ended up with the finger gun symbolism. Initially, the logos were relatively static and monochrome. But the mickey mouse style hand infused it with a bit of charm.

I wanted to imply that the interface is the one "in charge" of the user's experience. That this "hand" of intentional design is not to be underestimated, even if users believe they can sidestep design nudges. This is where the "shooting through the text" concept came from.

The branding evolution.

I implemented the blue color palette after looking over the aesthetic of denim brands. Old Navy and the Gap were major influences on the visual style of the project. Using solid opaque blues, especially in the dark mode, project a sense of depth and sophistication, without being monochrome and boring to look at. The contrast between those colors and the inclusion of the mickey hand gives the project a balance of depth and playfulness.

Prototyping

Once the branding was finished, I began brainstorming the layout of the site. Docusaurus did a ton of this work for me. Since it's built for documentation, it has a ton of features to sort and organize the content you're looking to present. Eventually, I settled on 5 distinct categories to organize the terms I was presenting.

These 5 categories neatly mapped on to the terms I wanted to cover (more or less). Given the theme of the aggressive branding, I wanted to focus on principles that leaned manipulative, and these choices encapsulated that sentiment. The interface itself presents relatively minimal to make space for the content to speak for itself. Despite this project being meta-textual, the demos should be the focal point, not the scaffolding around it.

Development

I spent a TON of development time refining the animations and demos. Even though AI was scaffolding a lot of the component architecture, there was still a ton of manual tweaking that needed to be done to make it feel right. And as good as these models are, it surprised me how often its visuals felt stiff.

Animations

First off, the animations. In order to make the animations feel springy, I needed to use math to give the animations a bit of inertia. This is where the concept of a bezier curve came in. To demonstrate this, here is the CSS for the finger gun animation that plays when the user hovers over the menu icon.

@keyframes logo-recoil {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.navbar__logo img {
  transform-origin: bottom left;
}

.navbar__brand:hover .navbar__logo img {
  animation: logo-recoil 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

There are a couple pieces to this. To start, the @keyframes bit defines the initial animation. It consists of a rotation that starts at 0 degrees, pops up right at the beginning of the animation to simulate a recoiling gun, and then slowly returns back to 0 degrees. The transform-origin: bottom left; bit is important to ensure that the rotation pivot is set at the bottom left corner of the icon.

The part that makes it actually springy is in the cubic-bezier(x1, y1, x2, y2) bit. This function defines the way time progresses through the animation. The x1 determines when the motion starts accelerating, the y1 determines how aggressively it launches, the x2 determines when the animation starts settling down, and the y2 determines where it ends up. Try it for yourself here!

css - interactive

/* matches logo-recoil timing */

animation: logo-recoil 0.5s cubic-bezier(x1 control point,y1 control point,x2 control point,y2 control point) forwards;

Easing curve (time → value)

logo-recoil preview

Replay animation

Graph updates live; preview replays shortly after you change a value.

Demos

The demos ranged a lot in complexity, but the biggest principle I needed to adhere to was re-using components as much as possible. This A: saved me AI tokens (which is ultimately better for the environment) and B: made the development process a little speedier.

The most obvious re-used component was the MacOS style window chrome that wraps around a ton of the demo content. If there is a need to separate something from the page or give it its own "container", I would just throw it in this generic window. It saved me a ton of time that would have otherwise been spent on creating new window frames for each demo.

I also noticed that a lot of the terms I described could be pretty eloquently explained through the use of a pricing ladder, especially in Anchoring. Being able to re-use this same pricing ladder cross-terms saved me a ton of time and effort that could be spent making the other demos as good as they possibly could.