Crafting multiple websites at the same time from nothing, or how I introduced order to chaos
How I contributed…
Led the initiative to implement the beginning of a design system for the creation of websites on tight timelines
Crafted hi-fidelity mockups for multiple websites on a simultaneous timeline
The impact I had…
Using GA saw an increase of 67% user engagement
80% reduction in mockup creation time for developer handoff
Things I’m proud of…
Crafting pixel perfect work on an extremely tight timeline
Implementing atomic design as a standard for digital design in our 40+ person team
It’s a beautiful day. The office is quiet, my emails are minimal, and most of my work is circulating in review with editors and client services. Sure, I’ve got a couple meetings today, and some projects in the pipeline, but nothing I haven’t handled before.
There’s a small buzz going around that we’ll get word of a brand in market research today and be able to start finalizing campaign imagery and color exploration. Once that happens, projects will begin to fall into place pretty quickly, so I try to enjoy the calm while I can.
Me thinking it’s going to be a normal calm day. Screenshot of Ken and Barbie singing from the Barbie movie.
When the PM is stressed, you put on your battle armor and get ready to solve problems
The PM walks in: “How feasible is it to make 4 websites in the next 12 weeks?”
“Staggered timelines?” I ask, my pulse accelerating.
“No.”
12 weeks. Including review time with both the internal team and external stakeholders, as well as development hand-off, that would leave us little over 2 weeks for initial layout. Of 4 websites.
I meet my PM’s gaze and nod slowly: “We can do it if I get started right now, today, and I split the sites with another designer.”
Because I’m never one to back down from a challenge. Or maybe I’m just naive.
Meme by KC Green that reads “This is Fine” and shows a dog sitting at a table in a house on fire.
The War Meeting, or where I decide to implement atomic design and create a design system to meet our goals
Six of us are sitting in the only open conference room: client services, the PM, the UX designer, the art supervisor, the copywriter, and me. This is a war meeting and we need a battle plan. I lay the nonexistent map on the table. If we’re going to survive the coming onslaught, there’s a few things that have to happen:
Copy needs to be finalized
Wires need to be started
Branding needs to be decided (without market research feedback)
Normally, these three things alone would take weeks by themselves, but we’ve got a few advantages if we change up the order of things. If the websites need to happen simultaneously, so does everything else. Art can’t wait for copy or wires. Okay, so let’s regroup. What do we actually have? What can we actually accomplish while we’re waiting for wires?
We can’t lay anything out. Okay, that’s okay (it’s not okay). The process might lay in tatters, but my sense of order was still intact. And like a bolt from the blue, I knew what I had to do.
Screenshot of Game of Thrones characters sitting around a table with a map laid out in front of them.
Putting on the best jams and getting to work while time is against me
The only way out was through. The wires would be done in 2 to 3 days, which meant I had 2 to 3 days before layout began in earnest. In 2 days I vowed to put together a rudimentary design system/UI kit that would stand as the template for all 4 websites. It would have everything we needed to make hi-fidelity mockups quickly, in addition to deciding major branding decisions for digital assets.
Finishing on-time and saving the client almost $100,000 thanks to my system
It wasn’t perfect (there were so many variables we couldn’t account for). Most early systems aren’t. What mattered was if it could get the job done. And by golly gosh, it did!
My art supervisor and I rock-paper-scissored for which 2 sites we would take (professional or patient) and then got to work. After a few more days, it was clear that not only would we be finished on time, but that we’d cut the timeline in half and head into hand-off 2 weeks early (saving the client nearly $100,000 in the process).
The real question was how our work would hold up in development…
If you want to hear more of the story, schedule an interview. 😉