Page Buddy — Marketing Site

Page Buddy is a word processor, a product category that entered the mainstream in the nineties, an era marked by kitsch desktop publishing and beige corporate culture. The challenge was twofold: to create a website and brand that sheds these associations whilst exciting and attracting new users, without alienating pros; and to demonstrate how Page Buddy is innovative, intuitive, and superior to existing products.

Taking inspiration from twentieth century designs such as Dieter Rams and modern studios like Teenage Engineering, the design aims to strike a balance between the clean professionalism expected of a productivity tool and the fun excitement of a new tech product. The website employs a bold color palette, strong type, simple geometric forms, and a number of playful visual metaphors. As the user scrolls down the page, elements of the app UI, weaved throughout the website, spring to life, and through animation, give the user a preview of Page Buddy and its various advantages.

The website is instrumental to Page Buddy’s launch strategy and has already received significant traction, delivering Page Buddy its first set of users. It has also helped establish the Page Buddy brand and visual identity, setting the app apart from its competitors.

One of the most striking features of the website is the title section. As the user scrolls, a piece of paper flattens itself, while the app UI animates in. This effect was achieved by running a physics simulation of a piece of paper blowing in the wind, then raytracing the results to produce 75 still images that can then be played in the browser on scroll. To achieve the website’s other animations and transitions, a new animation library was developed. This library uses the motion of a simulated spring to interpolate between keyframes based on scroll position. This has two main advantages over more traditional animation systems, as animations can be updated or interrupted mid-flight without any jank, and animation characteristics can be controlled by setting physical properties, like the mass of a moving object, leading to more natural motion.