Different Process; Different Result.
The most valuable lessons I learned on a 1.5-year design project.
I recently finished a big branding and web design project, a year and a half in the making, and there’s one lesson I learned that stands above the rest.
If you want to create something truly different, you must let go of the process you’re used to. You must discover a new process. Design a new process. I’m convinced that’s the only way to arrive at a truly different result.
The following are stories and practical lessons about how profoundly this recent project was affected by embarking on an unconventional process—from finding inspiration, to experimenting creatively, to engineering solutions, to managing the project itself.
The website was for French Press Films—a creative agency from Oakland, California specializing in film and video. They’re not your skinny-tie ad agency—they’re down to earth, un-pretentious people who doodle caricatures and make fart jokes. Their office has a dinosaur head coming out of the wall and comic books on the coffee table.
I first began working with French Press five years ago, and have seen them grow from three friends making videos to an agency of six full-time employees (and a huge family of contractors) working with top clients. The company was entering its seventh year, and they had outgrown the “clean and professional” Squarespace site I’d made in 2013.
They were ready for something different. Different from how they’d presented themselves in the past, different from how other creative companies presented themselves online, and different from the status quo of websites.
Finding Inspiration Differently
As the founders shared websites, comic books, film posters, and art that visually embodied their personality, I realized this project was going to look different from anything I’d ever created.
The priority was to make something unique — rather than making it quickly — so instead of coming back to them a week later with mockups for conventional website layouts, I began learning everything I could about their inspiration. And pretty soon, I was adding dozens of pieces to our collection.
Without a doubt, the most invaluable place where I learned and found inspiration was the Letterform Archive in San Francisco. It is heaven on earth for type and graphic designers, and if you live in or visit the Bay Area, you owe yourself a visit. They exist to inspire designers.
Nearly all of our inspirations were made before computers, and some were entirely made by hand. Animations achieved through stop-motion and optical filmmaking techniques. Jazz album artwork from the 50s and 60s. Old airline travel posters. The film posters and title sequences designed by Saul Bass for movies like Oceans Eleven and Anatomy of a Murder.
We didn’t pull inspiration from any other website or app. No digital things. No dribble searches.
I feel strongly that web design has become far too homogenous — ignoring the diverse history of graphic design in favor of modernist aesthetics and ease of build-ability. Where we find our inspiration can change that.
Regardless of what medium you’re working in, I encourage you to look for inspiration outside of that medium and by digging back through history.
What they needed; not what they asked for.
When I began the project, we intentionally decided to reduce the scope by not redesigning the logo and visual identity—which I myself had designed 5 years prior in 2013. But it was immediately clear that French Press’s old detailed circular logo (and light, balanced typography) could no longer convey their personality. Nor could it integrate seamlessly into any of the design styles from our inspiration boards.
I wanted to distill the logo down to a form versatile enough to fit within numerous design styles. One day, I wondered if a french press could be conveyed through a handful of basic shapes. This fleeting idea turned into a tiny doodle, which turned into an afternoon of excitedly cutting out black paper and rearranging the shapes on my white table.
I surprised the French Press founders with these concepts at the end our next meeting, along with a typeface that seemed to perfectly convey their balance of professionalism and funkiness. With a short presentation, I walked them through why we needed this, and how I’d arrived at these results.
They loved it.
But even if they hadn’t, it was critical to identify the limitations of the current logo and typography and have a discussion openly with the client. After all, I was trying to help achieve their goals and follow their inspiration.
If they hadn’t approved these spontaneous concepts, I also would have needed to assess whether the visual identity issues could be solved within the project’s existing scope, or if we would need to adjust the scope. The latter ended up happening at a subsequent crossroads in the project, and is almost inevitable when embarking on a different process (more on that, below).
Uncharted Waters — Experimenting Differently
Perhaps due to its roots in engineering, the digital design community seems to widely accept that visual design and style should come after content, layout, and UX have been determined. But our project seemed to reject that.
My intuition kept telling me that the style of this project needed to be more than an afterthought — more than a pretty layer of paint applied to some generic wireframes.
The style would be a fundamental — almost philosophical — stake in the ground, affecting everything from the content, to the layout, to the final layers of visual polish.
It would be a visual language. First I needed to discover what that was. Then I needed to learn how to speak it. How to design in that language.
Over the course of several months and frequent meetings with French Press’s founders, I prolifically experimented in that visual language — cutting shapes out of paper, playing with ink, designing typefaces, and coding technical experiments. While many of these didn’t make it into the final product, they were crucial stepping stones during the experimentation phase.
There were days that I never opened my computer—working only with paper and ink to solve key aspects of the website design. It felt strangely healthy.
The most notable thing I made during this time was a collection of little posters describing French Press and their values.
In retrospect, creating these posters was essential to discovering our visual language, and they became the building blocks of the website.
But that wasn’t clear at the time. Four months into the project, we still didn’t have conventional wireframes or website mockups, and we didn’t know how these posters were going to get us there. We were in uncharted waters.
This could have been exceedingly nerve-wracking. But because I had enough web experience under by belt, I trusted myself to deviate from a typical web design process and still hit the deliverable. Equally essential was the client’s trust in me, which we had built up over years of collaboration. Constantly exchanging ideas with French Press’s creative director allowed me the freedom to explore while having a partner for key decisions whenever we came to a creative crossroads. The founders were involved but they also let me be their guide.
I remember reflecting with them after one meeting, saying:
“I know how to make a website; that’s not the concern. But if we want something truly unique, we need to first discover what that is and not assume that the same-old web design process is going to yield a different result.”
We were all excited about where the project was going, even though, if you’d asked us, we wouldn’t have been able to tell you how we were going to get there. We were putting one foot in front of the other, and it was leading us in the right direction.
The Business Side of “Different”
So how the hell do you bill and set client expectations for a creative process you haven’t gone through before?
You need time.
First of all, you need time. Period. Different won’t happen by next week. You need to give yourself plenty of time and set those expectations with the client as soon as you see the need or potential for something substantially different. Time-constrained projects may need to go in a more conventional or familiar direction (entirely or partially).
“Different” isn’t right for every project.
Aside from timeframe, the needs of a project might be best served by a more conventional or straightforward approach. Different is just another option, and it’s not for everyone.
Digital projects need a prototype.
I also want to acknowledge something that I did not do differently: making wireframes and a prototype. I firmly believe that before starting development, it’s critical for both designer and client to have wireframes and an interactive prototype. The Flinto prototype I made was entirely grayscale and had few animations, but it immediately gave us a tangible sense of what we were committing to. Prototypes in particular are invaluable for getting a resolute approval from the client, and for estimating the costs of development. Speaking of money….
Be transparent about time and money.
It took us six months before I could quote for the project. Six months before we’d discovered what we wanted to build. And as we transitioned into development, I glimpsed the mammoth engineering task in front of us. It would be the biggest project I’d ever lead.
As you might imagine, our ideal site required spending more time and money than we’d anticipated. So I put myself in the client’s shoes, ran the numbers, and came up with a few options for how we could proceed. Then we jumped on the phone.
I’m convinced there were three reasons our conversations weren’t difficult:
- I was having these conversations with French Press’s CEO, who was in charge of their funds. Having these conversations with a marketing person, for example, would likely not have been as fruitful or efficient.
- The CEO and I are accustomed to having (what most people would consider) “uncomfortable” conversations about money, so we could talk openly and maturely. Design is commercial by its nature, and everyone’s financial needs must be acknowledged.
- We discussed timing and cost early in the project and again every few months. From day one, it wasn’t taboo to approach those topics. Furthermore, I was honest about when I needed to say “I don’t know yet.”
One solution we used was figuring out a monthly budget and agreeing to cap how much I invoiced them. If I worked more than the maximum, the difference was added to a deferred payment balance — something they could continue to pay off after I’d finished the project.
Many creative projects can be accurately estimated beforehand. This wasn’t one of them. More than anything, following a different creative process required both designer and client to be transparent about time and money every step of the way.
Different in Every Detail
Like Pandora’s box, the more a design is fundamentally different, the more every little detail needs to be different too.
In terms of our project, the more we followed our Mid-Century-ish paper and ink style, the more out of place anything not in that style appeared. Everything from buttons to the podcast’s audio player needed a custom design in order to fit alongside everything around it.
In addition to these small details, two parts of the French Press website—the portfolio and the podcast—became projects of their own, in order to cohesively fit within the whole.
Presenting the Portfolio
How could we display dozens of video projects — each with wildly different imagery — on the same page, without breaking the site’s unique look & feel?
It took months of bad ideas before finding the right one. Part of the answer was to represent each project with a poster (instead of a video thumbnail), all of which followed a consistent style. But it wasn’t until I began cutting icons out of paper — the same analog process that gave birth to the logo — that a full solution to the portfolio took shape.
The Podcast Identity
In the past few years, French Press has been interviewing fellow filmmakers in an informal podcast, called “Why We Do This.” The show had no visual identity of its own — just a name and twenty-two episodes.
But much like the project posters, we needed the podcast to fit into this highly art-directed website, while elevating it to look like a serious project. Spinning off French Press’s new identity, I created a logo for the show and a template to generate album artwork for each episode.
We had taken the rest of the website so far creatively, that to stop at the portfolio or podcast would have made them feel out of place. I’m immensely proud of these projects. But they’ve also made me realize how much I underestimated that if the design foundation is different, everything on top must be different. A small project can quickly become a big one if you’re taking the path less traveled.
Engineering Differently
This holds true in development too. The more your design deviates from common uses, the more likely you’ll need to engineer custom solutions.
No Perfect Rectangles
Some of our biggest technical challenges came from the fact that computers think in terms of perfect rectangles. On a typical website, everything from sections, to photos, to buttons is a rectangle of some sort.
Our design had zero perfect rectangles. It could easily be made from paper and ink, but in so many ways it went against the grain of what computers want to render. This required clever solutions in places where most websites rely on a standard rectangular layout. The navigation pane, for example, performs trigonometry (live in the browser) to help achieve its angled layout.
I plan to write another whole article focused on the cool technical solutions I discovered for achieving these unconventional designs on a website in a lightweight, performance-friendly way.
That’s a font?
One particularly unusual solution uses almost no code: the colored shapes in the podcast episode artwork.
I wanted each episode to use different shapes, and to do so automatically—without needing any design work. The solution was to write each guest’s initials in a custom font comprised of distinct polygons.
Engineering is all about creating logical systems to solve abstract problems. Both the trigonometry-powered layouts and the podcast’s colorful shapes required me to step back from what I had designed and ask: “how can I build a system so that this thing feels less computer-made and more handmade?” The answers were often as unconventional as the design itself.
The headline of this article is that designing something different requires discovering a different process. But I’ll go a step further: embarking on a different process is a commitment. It begins romantically with a creative exploration phase, and ripples into everything from project management to engineering puzzles. It’s a lot of work. But it is formative and rewarding work.
I hope this project serves as an example of what can come from leaving behind safe waters. May the wind be at your back!
Now, if you’re curious to see the end result….
