The Five Stages of Grief: How we finally built ourselves a new website
Design agencies are like fairy godmothers: so busy fixing other people’s lives that they’ve got no time to stitch themselves a new dress. But one day we decided, *enough*.
Asking ‘how important is it for a design studio to have a great website?’ is a bit like asking how important it is for a cat to have a shaft of sunshine to sprawl in: the answer is ‘very, obviously’. This is literally the thing we’re putting ourselves out there as being really great at doing for other people — so if we can’t do it for ourselves, who are we going to convince?
Back when we were starting out, and had a fair amount of time on our hands, we built ourselves what at the time we felt was a pretty cool site — and it seemed like other people agreed, because quite a few of our early clients came to us essentially asking for a riff on the same theme.
But just as the successful shoemaker apparently never has a pair of shoes to wear himself [note: I don’t actually know any shoemakers personally], design studios like ours — those fortunate enough to have gotten busy with a steady slew of projects — very often find their own online presence beginning to get neglected. And that’s pretty much what happened to us.
To be fair, the reasons for this situation coming about are not that hard to fathom: our time is mostly taken up with our clients’ projects, which have firm deadlines and clearly demand priority. Earlier on, we supposed there must be going to be a time when the pace of new things coming would slow, and then we’d be able to focus on our own stuff for a bit. But it didn’t happen. And so it dawned on us: if we wanted to do this, we had to stop making excuses and find a way.
When you spend your days building websites for other people, it can be difficult — and even traumatic — to take on board the fact that you need to completely revamp your own. But as we discovered, if you go through the process one step at a time, you’ll eventually come out the other end realising that there was nothing to be afraid of all along.
So, here are the five stages of grief that we went through to get to our new website.
1: Denial (is the place where we used to live)
“Not now…”
“We’ve got too many projects on at the moment…”“Let’s come back to it in six months — maybe things’ll have quietened down by then…”
Sound familiar? You’re not alone. If you’re lucky enough to be a half-way successful young studio, then we hate to tell you, but you’re primed for denial. At first, it comes from a sense that the wave of incoming projects you’re riding can’t possibly last: you’ll surely have some slow months before long during which to catch up with your housekeeping.
But then, if that point takes a while coming, you might well just slip into complacency: before long you’ll probably find yourself asking, “if people want us this much as it is, why bother spending loads of time making ourselves a new site?”
If this all rings true, you’re already waist-deep in the stagnation trap. The good news — and the deeply-necessary warning — is that the sooner you start genuinely struggling (as opposed to just complaining), the better your chances are of escape. Your tastes may not have changed since you made your old website, but you can be sure that the world hasn’t stopped turning on its axis — and that means you need to keep moving as well, if you don’t want to be left behind.
In our case, the denial stage lasted for ages — two years, to be exact. It wasn’t that we didn’t know we needed a new website; no, we could see our site was becoming outdated, and we even designed not one but two replacements for it, and had our developers implement them. But in the end, we never released them — there was still always something more urgent to do.
We remained stuck, spinning in the whirlpool. And there was only one way to escape…
2: Anger (starts with ripping off the bandaid)
Complacency can be a warm and comforting place to live — but at the moment it gets punctured, and the cold winds of reality begin to blow in, you may find yourself experiencing a rich and ripening sensation of rage. But hunkering further down in search of shelter is a recipe for defeat. No — you need to confront your fate head-on. You need to rip off the bandaid.
My own particular way of doing this was to lock myself in a room where I knew nobody could bother me, interfere with me, or try to tell me that there were ‘more important things’ I needed to be working on. The goal of our website-to-be was to stand out among those sites that already stood out — and since that was what everyone was trying to do, it wasn’t going to be easy. And then there was the unholy trade-off between the essential elements of our own approach to style, and the trends at large in the world. We knew that bloodyminded intransigence wouldn’t get us anywhere — but at the same time, there was no good in letting go of what made us us.
My first concrete move was to create a series of mood boards — both to cement my own idea of what I was going for, and to let the rest of the studio know what was on my mind. My inspiration came from the best of what I saw around me: namely, grunge posters and book covers (for those that’ve seen the site, that’s where the big titles and overlapping elements come from). It was also clear for me from this stage that I wanted to push the bounds of what would be considered ‘normal’ — which is something central both to my own approach and to what we at Zajno stand for as a studio.
All told, the design process for the new site took me about two weeks of sweat and tears (technically no blood, but there may as well have been). Normally, sharing drafts with the team is a core part of the design process — but this time, I kept everything to myself so as to make sure I didn’t get blown off course. When I finally showed what was still a first draft to my colleagues, I was relieved and humbled to discover that they liked it. And so it was that apart from a few tweaks, the first draft became the final one.
(but after that comes the teamwork)
By this point, it was only the design part that was finished — a miniscule fraction of the wider job of creating a living, breathing website. Ripping off the bandaid had been a good start, but it was far from the whole story.
When I showed my team the design of our future website, and told them that this time we were actually going to do it and do it fast, they were as excited as I was. I need to say at this point that I have a chuffing amazing team — when I truly threw down the gauntlet of creating us a new site, they took up the challenge with relish. Frankly, if they hadn’t, I wouldn’t be writing this now.
Each team member contributed in their own unique way, often going way beyond the scope of their responsibilities to help move the project towards reality.
But of course, with a project like this, there had to be a structure, too. Early on, we got together for a whole-company meeting, where we made an exhaustive list of what we needed to do, plotted a timeline, divided up responsibilities, and finally fed everything into Asana. The deadlines we gave ourselves were absolutely skin-tight — a strategy that carried some risk, but which we thought was needed to keep us on our toes and ensure that this time, we saw the thing through to the end.
(and also some major photographic teamwork)
Gathering the photographic content for the new site was almost a separate project of its own — for the simple reason that we wanted to design and create our own photography from scratch. This was something new for us, but we knew it was an essential part of making the site truly our own. And we weren’t talking about one or two pictures: this project was to have a lot of photographic content.
The real challenge here wasn’t the actual shooting of the pictures, but the preparation. It had been easy enough for us to decide that each picture needed to be laden with meaning while at the same time not being too obvious — but deciding exactly how to put this into practice required detailed consideration. This was all the more true of the pictures showcasing our work — we needed images that would convey they idea, message, and vibe of each product we had created a website for.
The process of thinking up the ideas for these pictures became probably the biggest brainstorming sessions in the history of our company. Everyone was involved, and sessions went on for hours, sometimes long into the night, and produced dozens of wild and outlandish ideas en route to the ones we would eventually actually use. But the process was wonderful: every single member of the team had a chance to let forth all those bits of creativity that they mightn’t usually have an outlet for.
The result exceeded even our very elevated expectations. Not only were the final pictures absolutely sick — but we also had a really important bonding experience as a team in the process of creating them. The whole thing also brought us even closer to all the great projects we’ve worked on over the past few years.
3: Bargaining (without bargaining away our future)
By the time the design stage of creating the site was complete, with graphic and text content honed to perfection, our developers were chomping at the bit to get going with their work. Their process was every bit as creative as the design ideation and photo content creation stages: and accordingly, it began with a brainstorming session involving every member of the dev team (something that was then repeated with each new iteration).
Lots of bold ideas were born at those debates, including the “KEEP AWAY” button. Don’t press it. Really — just don’t! It’s fulfilling a very important design role right there — take it away, and the whole thing will fall apart. So NEVER PRESS IT!
And so, yes, not everything was easy — far from it. That’s where the bargaining came in: it turned out the big titles and the animations we’d wanted were too “heavy” in terms of website optimization, so they just wouldn’t work as planned. Were we then to have smaller titles? Or maybe simpler animations? Surely code must hold the answer to implementing even the craziest of designs. But of course, code does have limits.
4: Depression (and how it can cure itself)
After the creative high you’ll have been on for much of this process, there comes, if not a low, then at least a lull. Everything’s basically done — everything’s there — but it’s not quite as you’d imagined it. It’s understandable that anyone would feel a sense of despondency at this, but the good news is that all this is simply a signal that the next stage is at hand: it’s time to optimize.
We’d known from the start that to succeed, we’d need not only to apply all the front-end knowledge and skills we had, but also to learn more — much more. Every project involves learning new stuff, and we were used to being constantly pushed forward by our work — but this time we had a truly quintessential learning experience on our hands. The tough side of this was that there was a huge amount we had to assimilate in order to make what we’d made look and behave exactly as we’d envisioned.
For example: it turned out that HTML elements that are ‘heavy’ (in terms of layer composition) work way better when implemented with a WebGL canvas. That meant that in terms of efficiency and optimization, it made perfect sense to move these elements into a canvas, so that composition would remain static, and moving the content during the page scroll inside the canvas would ‘cost’ almost nothing. So we developed a script to port most of the HTML elements to a WebGL canvas — and it gave us a bunch of benefits:
- All elements can be set up in HTML+CSS, just like normal
- HTML elements aren’t visible in the desktop version, but they work on tablets and mobiles
- Not only can ‘heavy’ elements be moved ‘for free’, but they can even be embellished with some cool effects. This paved the way for the little easter egg we left for you — did you find it?
The bottom line, we’re very happy to say, is that we were finally able to code the whole design down to every detail, and to enrich it with complex animations and satisfying effects into the bargain. Our dreams came true, basically — and all because we let depression hit us, but then hit it back, harder. What’s more, we significantly leveled up our skills across the board, tamed Pixi.JS, and inducted ourselves further into the mysterious lore of optimization.
Acceptance
There is a delicate art to coming to terms with what has been, what is — and when to stop. The design stage of this project took just a couple of weeks; content creation lasted around a month; development and optimization another month more. We kept on dreaming up new ways to improve things — but at a certain point, we realised that we had to put our foot down and accept that now was the moment to let the thing we had created out in to the world.
And that was it — acceptance. The moment when the weight lifts, you step away from the miniscule (but previously world-overshadowing) things that are still not perfectly as you’d like them, and then are struck by the profound completeness of what stands before you. To speak simply for a moment: we’re damned proud of this site we’ve built for ourselves.
But there’s one last thing we need in order to live the dream we’ve been nurturing all these months. We’ve long nursed an intense longing to win website of the day on FWA, CSS Design Awards, or Awwwards. We’re now just one step away from this dizzying achievement, and it’s in your power to help us realize it — and to make 19 people unfathomably happy.
Click below to become the best person in the world.
UPD: The website became FWA of the Day 20 JUL 2019 and Website of the Day 12 JUL 2019 on CSS Design Awards.
