Fibery Website: When Failure Is not an Option

What are the people in Mission Control really like? Weren’t there times when everybody, or at least a few people, just panicked?

— No, when bad things happened, we just calmly laid out all the options, and failure was not one of them.

1. The manifesto.

It is hard to find a balance between things that predictably work and a fresh approach. Modern marketing has all facilities to increase conversion and kill creativity. People get tired of the same landing pages, but the familiar structure, beautiful illustrations, simple phrases, and imperative verbs do their dirty work. They work. At least, according to Google Analytics.

How to invent something that still works but won’t be perceived as yet another landing page?

I stumbled upon to the Bret Victor’s quote from the Magic Ink

I don’t know the solution to cultivating a culture of good taste, but I believe lessons can be learned from the emergence of industrial design, about seventy years ago.

At a time when many products competed on ornamentation, the simplified, functional creations of industrial designers were too untraditional to sell on looks alone. The salesman made inroads by directly touting the tangible benefits of good design, such as comfort and safety. He would demonstrate to a homemaker how his vacuum cleaner or iron was designed to reduce fatigue and cramping. He would demonstrate to a farmer how his machinery was designed to eliminate the finger-severing accidents that were, to that point, distressingly common.

Explicitly informed of the benefits, people gradually came to demand, then expect, such conscientious design in their everyday products.Today, software consumers demand technological features because software marketing presents features. Consumers ignore design because marketing ignores design. The cycle is vicious, but perhaps vulnerable too — some brilliant new software with engineering, design, and marketing all in sync may raise the bar for everyone.

This was my main concern — people perceive software products as a bunch of features because we presented them in this way. What if we explain why this product was invented, and what quality it can bring to life. What if we illustrate these ideas with pure abstract animations.

The very first prototype was raw with poor copy and low-quality graphics. It resembled a manifest or long read, not a product page.

There were many doubts about the number of screenshots and the amount of text. It was not bad but might seem rather boring than unusual. The very first concept of the Fibery website — 2

2. Diversity

I continued working and remembered my old idea of site constructor for the Fibery private beta campaign. Fibery is a tool that adapts to teams and companies like Lego, and the website could become the same. At that time, guys decided to make a simple text page. The initial idea was to assemble the page from random blocks so that the user would get the unique solution each time. That would be fun to take the interactive beyond the browser with the main interactive element — Refresh Button. There was one problem with this concept — people wouldn’t be able to find a specific block if they wanted to. So it could become annoying and unpredictable. I transformed this concept into the four stable, separated versions that should be loaded randomly. The logo and branding with different colors supported this idea. The second concept

The first prototype Illustrations Abstract animation showed values of the product. “Build” animation illustrates custom domain creation. Create App animation Create App storyboard “Use” animation illustrates unique transforming flows. “Use” animation “Grow” was adopted from Kandinsky’s original drawing “Free Curve To The Point“ and grows like the workspace in Fibery. Kandinsky’s original drawing “Free Curve To The Point” and Fibery domain “Grow” animation Screenshots should’ve supplemented animations and become a picture of how these abstract intentions are converted into concrete decisions. But in reality, it was difficult to perceive changes in several places simultaneously, so I rejected this idea. Screenshots prototype One additional animation showed how Fibery could adapt and transform. An attentive observer can find a reference to the Feynman diagrams. Fibery adaptation The team took this concept coldly. There was a lot of doubt — will people understand what fibery is? Is this design too elegant for our crazy self-ironic team? There were no jokes. The color seemed not vivid enough. The website didn’t resemble the product style. It was a failure; no one believed it would work. 3. Build After several days of anxious thoughts and sleepless nights, I came up with the “I don’t get it. Explain differently” button. Every time the visitor pushes this button, we will explain all product ideas differently. If she still doesn’t get anything after several versions, we just show her the crazy version and describe everything literally without marketing efforts. I’ve converted negative feedback into the concept. Evolution of an eye Evolution of an eye illustrates evolution of the Fibery concept We split serious versions between Michael Dubakov, Anton Iokov and me, and explained Fibery in our own way. This decision saved from tedious disputes and brought the sweet spirit of freedom. The Build version told about the benefits and functionality, Connect — about the profit that users will receive, and Freedom — about the values. In the end, with God willing and Anton’s help my Freedom turned into a manifesto ✊🏻, so I’ve accomplished initial intention and closed gestalt. Final concept CPU struggle I found a beautiful Voronoi diagram based on d3 voronoi.delaunay library. Volodya helped me create a background based on it. It turned out interactive and beautiful, with white circles. Background for the Build version Build bg with Voronoi But it extremely overloaded CPU, so we were forced to refuse circles and left only polygons. In fact, we still have some problems with CPU due to the simultaneous video and canvas rendering, and still in search of the right solution. I created an interactive background on p5.js. I have long dreamed of using generative graphics in a commercial project 😌. Background for the Anxiety version BTW, some of the backgrounds are clickable. Background for the Connect version Connect bg Background for the Freedom version Freedom bg CSS and JS experiments Dasha created neat CSS animations of the abstract figures. My husband helped me to create parallax on scroll. Everything was in full swing. 4. Anxiety + Fun = Funny Anxiety Anton writes his genius copy Anton writes his genius copy I intended to change the marketing phrase with a literal description of each picture with unexpected jokes. But guys came up with something funnier — honestly tell about all product problems with screenshots of bugs, infinite loaders, and bad testimonials.

It was wild and bold; we laughed like crazy. It was definitely needed to try. Anxiety https://fibery.io/anxiety 5. Launch The madness started on Twitter. A big wave was coming from the hacker news. Post on Hacker News Come back to Twitter, LinkedIn, Youtube, and it is still spreading.

I just watched, read tweets, and wondered how the project considered a failure one month ago spread around the world. Visitors location from Google Analytics It was not a failure; it was an option. We just proceeded to make decisions and got the project done. Everything can turn out in the right way if you listen to the surrounding, trust your gut, and work with cool people. Happy New Year!