Web and Rockets

16612648098_e250cfeab8_k
United Launch Alliance Atlas V, Photo via NASA

Launching Rockets

My father’s a guy who builds rockets. And I don’t mean that he builds the model rockets you see at the park that get blown onto neighbor’s roofs by a slight wind, I mean that he builds the giant Atlas V rockets that launch actual shit into actual outer space.

So when I was kid, there were key points I can remember when we’d all head down to the pizza place closest to my dad’s plant to watch his and his coworkers’ work launch satellites into space. It’s a unique experience to witness your father witnessing his own work do something so mind blowing.

post-illustration.png

Launching Websites

So while my father builds the rockets that launch satellites into space, I manage to do some (much less complicated, and much less tension-inducing) building and launching of my own: I work for the company that builds WordPress.com, the platform I’m blogging on right now, and we just launched some pretty cool stuff that we’ve been working on for quite a while.

I’m very happy to share that as of today, Automattic has released the source code for Calypso, our JavaScript- and API-powered interface that runs on WordPress.com. This has taken a huge effort on our part for the better part of two years, and I couldn’t be prouder. This comes with a shiny-new interface that we also used to build a Mac app.

So, is your website a satellite being shot into orbit? Not quite, but it wouldn’t be far off to think of WordPress.com as an Atlas V rocket to get your site on the web, anyway. ūüôā

Design Space: Wall Street on Demand

In September 2005, I was 26 years old. A decade ago.

I called Scott Upton on the phone and asked if he was happy at his job and if they were hiring. A week later I’d had my interviews, handed in my resignation for a¬†second time¬†at¬†Spiremedia and began¬†a new chapter in my career: I was about to spend 4 years at a company in Boulder called Wall Street on Demand.

Bull Markets and Bear Markets and Financial Collapses, Oh My

Wall Street on Demand specialized in taking hundreds of live-streaming stock market data feeds and turning them into beautiful interfaces for making financial decisions. We designed and built investment research interfaces for everyone from the E-Trade home investor managing their retirement account to the Merrill Lynch institutional investor trading hundreds of millions of dollars at a time.

These were not small local clients whose deadlines could slip when the process didn’t go according to plan, with business plans I’d seen a hundred times before. These were clients like investment banks and cable TV news networks who demanded financial visualization expertise from our staff¬†on a daily basis.

If I put¬†a percentage instead of a dollar amount¬†in a table cell¬†showing¬†Earnings Per Share, it would be called out long before my¬†work made it to the client’s inbox. The amount of training to be done with¬†new hires was incredibly high before we were allowed to run our own projects without a CD at the helm, something as a Senior Designer I was expected to do fairly soon.

Ponds and Fish

Jeff and Aaron

Competition is not the best way to get ahead

We had posters on the walls extolling the virtues of collaboration. The design team at Wall Street was not competitive: as a team of teams, we had a lot of design leadership and structure facilitating our collaboration at every level. The structure looked like this:

  1. Company Creative DirectorChris Allegra was at the top.
  2. Team Creative Director – My team lead was Kent Hollrah. We had about 6 other CDs at this level when I joined.
  3. Senior Designers – Many on each team
  4. Designers – Many on each team

Before my tenure was up, we’d add a couple new titles, Associate Creative Director and Junior Designer. It was a unique system that¬†had¬†the added benefit of Chris, the company¬†Creative Director, essentially working at the C-level¬†with James, the CEO and Catherine, the COO: all three of them were related.

This was more or less a design-focused, family-run business with Goldman Sachs as the Board of Directors.

Chris had domain expertise in interaction design and financial design. He’d been educated at Johns Hopkins for creative writing and this education gave him a passion for concise, effective communication. He’d later go on to do¬†post-grad work at UCLA for data visualization¬†and¬†he was a god-damned whirlwind to work with. It was exhausting to try and keep up.

This was by far the most design-led organization of which I’ve ever been a part. There was a truly talented design brain with actual power in the executive suite who demanded at the highest level that¬†our¬†own organization be true to a specific design philosophy.

Yield Curves and Learning Curves

Notebooks
I filled book after book with notes. This began my usage of grid-lined Moleskines: perfect for drawing charts.

There was a lot to learn. There was new, insane shit showing up in front of my eyes every day. Page designs containing¬†ideas more complicated than I had ever imagined myself designing¬†were casually discussed over cubicle walls, all around me. It felt like being in college again ‚Ästexcept everyone was obsessed with the stock market for some reason.

I’d had a similar¬†feeling before in my life: junior high school with my friends, coding Pascal and BASIC. I’d had it at Spire when I was 20 years old, coding Flash animations for websites whose domain names cost 10 times¬†my salary. It was the feeling of being a little fish in a big pond, and it was good for me.¬†“I will never know everything there is to know here” was something I thought to myself¬†on a daily basis.¬†I engaged in learning without fear, and applied¬†that knowledge immediately.

The design staff carved out many physically-communal design spaces. We started out having our design meetings in a room labeled Aspen, named after the trees that swayed right outside its window. When we leased more space across the street, Chris oversaw the entire design and construction of the new office, building it specifically for designers and developers to collaborate.

We had two rooms separated by a substantial but removable accordion wall made entirely out of whiteboard. These rooms were named after Charles and Ray Eames and were reconfigurable as we needed.

We’d gather every Friday morning, bright and early. Coffee in hand, we’d file into whichever space we were using at the time and we would nerd out as designers together. We’d discuss three things:

  1. We’d discuss the work we were doing. We’d show what was near or just-launched. This work often wasn’t being displayed for critique but for us to ask questions and to learn from the decisions they’d made. Gathering feedback from the team on how to update the project wasn’t usually the point. Pointed critiques were sought on a 1-to-1 basis during the workday.
  2. We’d discuss design in general. We’d save up URLs to send to who was running the meeting each week, and view those pages as a group. If we saw a new visualization we liked, or an interesting layout or graphical treatment, we’d put these up on the screen and critique the hell out of them. Other people’s work was up for grabs, critique-wise. What would we change about this? What worked for our clients, and what wouldn’t? Where would you take this to push it further? This way, we’d all critique something together, with no one in the room defending the decisions or backing up their work with client quotes. It was all about working together as a group and creating rapport as well as building our¬†own critique skills so that we¬†could look at our¬†own work with a fresh set of eyes if we¬†needed.
  3. We’d discuss and iterate on our own internal processes. What about the design process wasn’t working for you? What was? How did you manipulate the normal flow in order to reach that really excellent level of work you just did? ¬†New ideas were brought up and digested. If there was promise, we’d try out¬†new¬†official¬†policies, organically growing them¬†and leaving them¬†by the wayside as needed.

We all sat near each other in the office. We went on design- and art-oriented outings together, and we created a culture that really worked to get beautifully-finished work out the door.

Just Pull Up a Chair, I Guess

Eames chairs

The funny thing about all of this collaboration was that I resisted it at first.¬†We had a global Creative Director running the entire Design & Development division and I had Kent, a Creative Director, directly managing my work. I’d never had this many bosses before. During the first few months, I was a little unhappy about how much direct contact I was having¬†with Kent.¬†It was the first time in a while where I was working directly beneath someone who checked in on my progress¬†multiple times a day.¬†He’d show up right behind me at my desk and pull up a chair:

Whatcha up to, Kev?

was his usual phrasing.

Fuck you, Kent.

was the¬†usual response in my head. I didn’t say it. I’d stop reading the NY Times article that was probably on my screen, tab back over to Photoshop, and show him my work.

He’s ask me questions that would make me frustrated, because of course I wasn’t done with it yet. He’d ask me something I hadn’t gotten to¬†or¬†he’d challenge me on basic things like color usage:

Why’d you use yellow here? It’s not in the palette.

for instance.

I’m designing the¬†warning panel you assigned me. I chose a yellow with similar attributes to¬†the family of¬†colors already on the page, so it works to add it.

and he’d go

Ok.

to which I would again in my head reply

Fuck you, Kent.

This didn’t last long, and I’m giving Kent a hard time about it.¬†We got past it and I moved on to learn an incredible amount of data visualization and general financial knowledge directly from him.

The moment of truth was when¬†work started getting really hard. I was¬†driving home to Denver every night in¬†a daze, feeling like I wasn’t keeping up. Kent’s own design work was taking up more and more¬†of his time, and yet¬†I was not owning much about¬†my designs or my clients. Even though he didn’t change my work¬†much any more, it¬†all seemed to hinge on his opinion, and so I felt powerless. The day¬†he shocked me out of my daze was when¬†he sent me a heart-pounding email. It said simply:

Kevin,

I need to you to engage now.

‚Äď k

I had no idea what this meant. I went to Chris and asked him what on earth I was supposed to do with this. Chris told me:

If you ask me, it sounds like he’s saying it’s time for you to jump in. If you don’t know what that means, then it’s up to¬†you to decide.”

I was afraid at first. I was the only designer on a project for the very first time here, and I knew I didn’t know very much yet. All of the¬†experienced designers were¬†working on the cool stuff like¬†stock charts for BusinessWeek and CNN. I was designing UIs for people to get email alerts. I wanted the big-name work, but was terrified when I was given something serious to handle on my own.

Designer-Driven Design

We had beautiful digital displays in our space, showing daily market data trends

I decided it was time to start using my design skills to actually get design accomplished. I started drawing diagrams of how I understood the system I was designing to work. I took these diagrams to the client and then to my company’s developers and we iterated on them until they made sense and everyone agreed. Then I started wireframing in HTML. We had clickable prototypes with no CSS before we had a design language, which followed on quickly. I scheduled meetings with people downstairs I’d never met but with¬†whom¬†I needed to create relationships because my client was requesting a brand-new way of handling incoming data feeds, which needed to be written¬†from scratch. I worked closely with the client to determine their systemic and¬†visual requirements. At the very end,¬†some crucial¬†final understanding of the client’s needs came from Kent’s involvement in days-long meetings.

By the time it launched, I’d written the final production HTML and had handed it to our¬†developers who plugged in the data calls and re-arranged things to work with our nascent pre-ajax technology.

In the end, what got us ahead and to a good place was that the whole team came together and collaborated, not that I could do the design work perfectly in a silo on my own, which was what I thought my role as a designer had been up to this point.

At the end of that project I had a sense of pride I’d never felt before. Many teams worked together, and I learned to lean on my team lead at crucial moments, pushing through a UI I knew was up to speed with what the rest of the design staff was producing.

Past Performance is Not Indicative of Future Results

Designed by Chris Allegra
Detail of an internal award I won for work performed in 2006

I just described¬†an intense project, and it was the first of many to come. Over the next 4 years, I’d learn that some¬†resistance from the first-floor engineering teams was something of a common theme. As we grew and grew quicker and quicker, more inexperienced project managers were being hired to manage more and more work.

By 2009, people like me who’d been at the company a while and had shown leadership promise were moved into new positions. On the design team, this new position was called Associate Creative Director. It was our job to essentially work closely with our CD and start adapting their responsibilities into our workflow, namely managing the relationship alongside the Account Director and selling the client on new work at every turn.

This was new! And challenging! And I didn’t take much to it.

What I could do: execute high-quality UI and UX work on a weekly basis, in a novel and compelling way, driving the less-experienced designers on my team to do the same. As Associate Creative Director I really tried to know everything there was to know, just like it looked like the other CDs were doing when I started, and I began to lust after the wrong thing: prestige.

I started forgetting to collaborate. I’d react strongly in internal meetings where I felt developers didn’t care as much as I did about turning out a great product. I’d push clients toward what I thought the correct solution was, without really listening to what they were trying to accomplish. I’d bully other designers into trying to learn to code, despite their protestations that they just never really understood it. “Every designer should learn to code!” I’d say, dismissing their views entirely.

And so I burned myself the hell out. I burned everyone around me out on working with me. It’s true that when I left this job, my clients called emergency meetings in Boulder to plan the roadmap for how they were going to continue working with Wall Street in my absence, but I was fending off internal talk from above that I wasn’t quite working out in this position. What I needed though was something I couldn’t find at this company¬†anymore: I needed to be a little fish again.

I needed to learn to collaborate with other designers again, without the ego attached as I rose the ranks and earned respect. I didn’t know it yet, but what I needed was to go work at¬†Automattic, something I’d have the chance to do sooner than I’d know.

Why I’m a Designer Part 4: Ego and Empathy

This post is part 4¬†of a series. You can read¬†Part 1,¬†Part 1.5,¬†Part 2¬†and Part 3 if you’d like.

Web 2.0

Then something funny happened that we weren’t expecting, but sort of hoping for: the web became a tool¬†everyone used, all the time, for a ton of reasons.

New users were arriving¬†online every day, and new services were popping¬†up in droves to give them fun stuff¬†to do there. Years after Wall Street left the “dot-coms” to die in the gutter, the former employees of these companies built new tools, with new ideas about what a web interface could accomplish.

Web users adapted and started to actually love the products they used online. Flickr, Twitter, Tumblr, Del.icio.us: we all have memories of what was new about these things when they first appeared that delighted us.

The web was a super-fun place to be, both as a user and designer.

2001 – 2010

I spent the intervening years doing the following:

  • Being unemployed¬†Lots of freelance
  • I built a web page with only 5 kilobytes of code
  • Building PHP and MySQL from source on Mac OS X
  • Building custom Content Management Systems in PHP every time I launched a website for a client
  • Getting a job where I helped Einstein sell bagels on the internet
  • Securing just a few long-term freelance clients that would support me for years
  • Getting a low-paying job for health insurance reasons, then quitting that job because I found myself editing .NET code in a shirt and tie
  • Getting a job doing¬†data visualization and financial design for investment banks
  • Traveling to New York to work with clients on Wall Street
  • Learning and forgetting Flash, ActionScript and Flex
  • Building in CakePHP and taking offline a web app for people to record very personal data
  • Spending 6 months¬†designing a 15×10 GIF (among many other things) for the front page of the New York Times
  • Getting a job where I designed screens for people with mental disabilities as well as for¬†people¬†whose job was¬†to support¬†those¬†with mental disabilities
  • Watching the idea of “mobile”¬†evolve¬†from WAP-based apps rendered on Handspring devices to¬†the responsive web and iOS/Android apps we have today
  • Getting a job at Automattic, working on the blogging system I’m using to publish this very post.

I can honestly say that during those 9-10 years, my work was used by¬†millions of people, and that by 2010 my work reached that many people daily. I learned a lot during this time about how people use web applications, how they share content on the web, and how they talk to one another with the tools we build.¬†I learned what my medium was being used for (fun fact: in 2002 I owned the domain “automaticmedium.com”) above and beyond what I was personally using it for. And all this time, I blogged.

The Importance of Blogging in Earnest

4366124780_62b1ff018d_o

I blogged when Napster was shut down, I blogged when the Twin Towers fell, I blogged when Apple launched the iPod, I blogged when my son was diagnosed with diabetes.

I used a system built in PHP3 my friend Tai and I paid $500 for and then I ported that blog to a custom system I wrote in PHP 4 which I then wrote a custom importer for in 2007 that pulled it all into WordPress. Blogging was and is important to how I work.

Ego & Empathy

While designing and building the tools my clients asked me for, I was simultaneously either plugging away at a new CSS idea on my blog, or trying out a new language to build a web app. My craft and I grew up at the same time and I tried to stay involved in it above and beyond my client work for two simple reasons:

  1. Ego: I needed a place to play. Client work was now very serious and very important and playing with new ideas often wasn’t the best choice for these projects. Not to say we didn’t pitch new¬†ideas, they just often weren’t chosen for development. Knowing I should and could keep my code chops up by playing on my blog was important to me for increasing the quality of my work.
  2. Empathy: I really wanted to have my own site with an audience and user base that I considered my own. This way, I could truly understand a client’s desire to do right by their users because I spent evenings and weekends making something for my own group of people I wanted to please.

These two concepts seem diametrically opposed: Ego and Empathy. I contend that to design a web application that people want to use on a daily basis you need both the ego to say:

“I can make something people will want to use that’s better than what exists”

and the empathy to listen to what your users actually say when you launch it. Additionally, your empathy for what you’d want on the screen you’re designing goes a long way toward making something your users may want to use.

Try All of the Things

How do you build this empathy? One of the ways besides maintaining a web app by yourself is to be a die-hard trier-and-user of any and all web apps. Really use them for really real things. See what making boards on Pinterest is all about. Follow art blogs on Tumblr and check it every day. Try Snapchat and get confused and close the app forever. Stuff like that.

You can start¬†to understand what else the rest of the world is¬†doing with their digital devices on a daily basis; you can see where your app fits into your users’ lives, not just how your users’ lives fit into your engagement cycle.

Empathize with what your users do on a daily basis with your tool by doing the same things¬†with it and by doing the other things they do on a daily basis on the web, too. Pay fucking attention to what works and what doesn’t and why. You can start to synthesize¬†this information with the designer’s¬†ego telling you that you actually can produce a better product. What can result is remarkable: an app that people love using.

That’s¬†always been my¬†goal for my work on the web:¬†to make something that people love having in their lives, something that feels like humans made it for other humans.¬†They’ll come back over and over and give you their money for things you’re building that they want to use. You won’t have to beg for money from people who want to pay you for what you make.

Up next, part 5: Designer-Driven Design

Why I’m a Designer Part 3: Finding Order in the Chaos

This post is part 3¬†of a series. You can read¬†Part 1,¬†Part 1.5¬†and¬†Part 2¬†if you’d like.

Y2K (Contd).

Last time, I mentioned that we had 2-3 designers simultaneously pitching ideas to clients. What I omitted then but would like to clarify now is that each designer determined for themselves absolutely everything they pitched:

  • Navigation structure and labels
  • Content blocks and layout
  • Interactive tools &¬†functionality
  • Branding &¬†logo work
  • Visual design system execution

What this meant¬†was that often a client would see different versions¬†of all of the above in the same meeting. They couldn’t focus purely on the competing designs’ visual directions because they’d also be picking a navigation structure and maybe¬†even a logo at the same time.

This was a pretty terrible process. Factor in that Project Managers also didn’t exist and unsurprisingly lots of confusion resulted all around. Designers would pitch competing and usually slightly misinterpreted ideas the client floated in earlier discussions. We’d catch a glimpse of the other designer’s work and decide to incorporate some of their concepts, creating a miasma of ideas presented all at once, similarly sourced but¬†slightly tweaked.

Then Jen showed up.

Office Cell Phones and Pinball Machines

The subject of the all-employee email read

“Has anyone seen the office cell phone?”

These were incredibly rare devices and when our new office manager Jen Mylo (née Wells) needed to find it, there was something about her wording that immediately made me envision our plastic brick of a cell phone sitting on a bar stool, smoking a cigarette, talking shit about the employees that lugged it around the city. It cracked me up.

I immediately replied-all and said “I saw it a bar last night; it doesn’t want to see you.”¬†My intention was to be funny and set a new employee at ease, that we had fun at this company. What actually happened was that she thought I hated her, which I learned a few days later when we were both part of a small group tasked with picking out a new office pinball machine.

I think I was the only one with a car at the time so I offered to drive. It was on this formative drive to Lakewood when I learned:

  1. Just how professional, detail-oriented and experienced Jen was and
  2. Just how bad¬†I’d made her feel by being unprofessional over email.

I’m incredibly lucky that we cleared up the misunderstanding that day, chose a sweet new pinball machine¬†for the office, and made friends for life (so far).

Roping the Dude Ranch Operator Back to the Web

When she spoke¬†to Spiremedia co-workers about her life and work experiences, she was quick to mention her time on a dude ranch in Arizona, as an activist for Greenpeace,¬†as the supervisor of a food co-op and¬†many, many others. What she’d purposely be quiet about, and left off her resume entirely, was her time working on the web as an Information Architect. She was at the moment living and working in Denver along with her boyfriend, and wasn’t sure if she was staying long, so doing serious web work here wasn’t really on her list of priorities. “I really don’t want them to know I know how to do this” she’d quietly mention.

Of course “they” did find¬†out about this unexpected IA on staff and¬†quickly put her to work on our clients. By this time we had a team of 8-10 designers pitching¬†sometimes totally off-the-wall ideas to clients and generally running the asylum. There was one incident where I went on vacation and left another designer in charge of my client work, only to return to a totally¬†functionally-altered concept. Jen changed all that.

With the addition of Jen to our design team (as well as three experienced project managers: a lot changed for us at once), the process started to resemble something sane:

  1. These newly-added PMs would work closely with Jen and the client to determine what the site actually needed at a functional and content level
  2. Jen would propose and refine a site architecture and content deck. She would then wireframe this architecture and content layout, staying as design agnostic as possible. I still wish I understood how to do card-sorting as well as she did then.
  3. These documents would stand as blueprints for the designers to start molding into a visual model. Any specific design decisions in the wireframes were up for interpretation (size and placement of content, visual relationships, etc) and a serious effort went into the visual impact of the site.
  4. Once this work was complete, our developers now had both abstract definitions and concrete examples from which to synthesize the working site.

Clients no longer had competing, complete design philosophies to pick from all at once: each visual design was now proposed with the same labels, the same content, and the same architecture as the others in the meeting, and it had all been already determined. By working with Jen first, client expectations were set for what to get from the visual design staff and our expectations were set for what the client actually needed.

She enabled success on both ends of the spectrum by advocating for the users to the client early in the process, and then she’d pivot and¬†advocate for the client and users to the designers when we came in later.

I now had two mentors helping me establish two keystones of my design philosophy:

  • Scott Upton solidified the value of designing for the web by using the fabric of the web itself: HTML and the browser. He taught me that using your interface as your design it is the only way to know it works.
  • Jen Mylo locked¬†in the absolute necessity of hearing what your client and their¬†users are¬†saying, filtering it through the way your experience has shown¬†you that people actually use the web, and turning that around as smart recommendations and decisions upon which to base your visual design.

I’ve plotted¬†just about my entire career path between these two ideological pillars of how to build for the web. I’ll explain in Part 4 what I’ve done in the last 15 years with this foundation.

Why I’m a Designer Part 2: View Source

This post is part 2 of a series. You can read Part 1Part 1.5 and Part 3 if you’d like.

1999

As I stood in the cramped first-floor hall of the 300 building at the Art Institute of Colorado, my heavy bag of supplies dug painfully into my shoulder. I was with a friend and we were looking for jobs on the board, a task I undertook when I found myself in each of the three buildings we had on campus in Capitol Hill for the first time that week. As soon as we walked up, one posting in particular jumped out at me and I forgot all about the huge bag on my shoulder. It said in stark Franklin Gothic Condensed type:

SPIREMEDIA IS HIRING A RECEPTIONIST

which I’m sure doesn’t sound to you like that big of a deal, but to me it was like that paper was etched in gold. I’d been doing web design hourly for a small shop owned by a man who ‚Äď in a daze of inspired light and beauty ‚Äď named his company The Internet Design Firm. During my first week at this job I AltaVista’d (we didn’t Google back then) “Denver web design companies” to see what was happening in town, and to find work that could inspire me in times of need.

Spiremedia was an agency I found during this search whose portfolio suddenly redefined for me what a web site could look like, what the web could be. I had already spent a lot of time on their site, poring over the portfolio looking at the decisions the designers made on each piece, trying to determine what I could learn from them.

“What about this work is applicable to my own? What can I discard? What can I change about what I take, to make it my own, my clients’ own? How did they code that?”

It wasn’t just their client work, either: their own site was an excellent example of the thinking that went into everything they designed. I never dreamed I’d actually end up working there. I was a student who had done a total of 10 months of contract work in the industry, not one of the professionals these people clearly were hiring. I’d click “view source” in my browser, copy out some of their clever HTML code, and learn from their ideas.

And so but here was this flyer stapled to the wall, telling me they were hiring a receptionist. The privilege of my education leapfrogged me past wanting to apply for the job for which they were actually hiring, so my email’s subject line said “I don’t want to be your receptionist” and the body included a link to my portfolio telling them I’d admired their work for a while, and that I wasn’t a very good receptionist but I was wondering if they were hiring designers. I couldn’t have been happier when the reply came that they wanted an interview, but I had no idea what to expect.

Spiremedia's location in 1999. Imagine it without the hulking monstrosity behind it. Photo by Flickr user elmada
Spiremedia’s location in 1999. Imagine it without the hulking monstrosity behind it. Photo by Flickr user elmada
What I found when I showed up was incredibly disorienting: the building was out past Lower Downtown (the newly-named LoDo), on a street no one I knew had heard of. When I pulled my car into the dirt expanse in front of the building, I suddenly recognized it: this was the terrifying part of town where we parked our cars back in high school to go to St. Mark’s Coffee House. The concrete and abandoned 5-floor building at the edge of the dirt lot wasn’t so intimidating during the day, it seemed. What on earth was I going to find inside the warehouse across the street?

I couldn’t have guessed that it was going to be about 5,000 square feet of exactly what I’d been looking for since junior high, but this was not an office that my work experience had prepared me for. There was no sterile drywall bound by drop-ceilings and cheap carpet. There were no medical-grade waiting room chairs or neckties. No one was freaking out about the dogs wandering around and no one appeared to be over 30. Everyone wanted to be there.

A video created by Scott Upton with an original iBook and external video camera

Thick, wooden warehouse columns broke up the space into distinct areas. Existing long before many floors of offices had been built around them, they stood like stoic Redwoods throughout the office, ancient and real. I marveled at how many people must have done how many kinds of work in this building near these columns, and noticed this group of people covered them and the exposed brick in artwork and ethernet cables. The waiting area for clients was made up of a duo of (also wooden) old-timey school chairs which faced pinball and Asteroids machines. The music was loud and the person interviewing me had about 1,000 toys on his desk in the only private office I could see.

I was home again.

The Year 2000

Spirexmas99
Spiremedia Holiday Party, 1999.
Spiremedia often worked in a traditional design agency model: 2-3 designers were assigned to each new project and tasked with designing something totally different from their counterparts. The client would choose a design (or they’d make the worst of all possible decisions and combine two of them), and the designers whose work wasn’t picked would go on to new projects. The selected designer would work with the client to design each page, using whatever tools necessary, and hand it over to development to build. This was and continues to be a super common way to do web design, but the end result is that you’d usually get your designs built not quite right by the developer.

Part of doing web design was (and continues to be) understanding what the medium is capable of. If we designed something crazy or just not-quite-possible, we’d get an approximation of our designs live on the web and this was a thing I’d get sort of sad about. I wanted my pages to look and work how I designed them, dammit.

What Sucked About The Web

I alluded in Part 1 to a tendency of entirely visually-focused graphic designers to make fun of the web in 1999. At the risk of sounding incredibly “get off my lawn” about it, here’s an incomplete list of things we didn’t have as web designers when I started out:

  • Fonts. We could set our page’s text in any font we wanted as long as it was Verdana, Arial, Trebuchet, Georgia or Times as these fonts were available on most platforms. Using one of them ensured your pages looked similar to the highest amount of potential users. Want a different font? Time to make a bunch of header graphics!
  • Fast Internet. Most of us still had 56k modems at home but at work we used expensive lines that still were geologically slow by current standards to build and launch sites that hoped to gain mass adoption. We were building tools that aimed to be useful in a technical universe that hadn’t quite arrived yet.
  • Colors. “Colors are darker on Windows” was a common refrain heard around the office. Clients never saw the colors we saw on our Macs because have you ever tried to color-calibrate your client’s Windows NT-running-computer’s monitor? Of course you haven’t because it’s impossible. We always assumed the colors we chose were mere suggestions for how the end-user’s computer would render them.
  • YouTube. Seriously, think for a second about the web before YouTube or much video of any kind. See also: Google, Facebook, Twitter, Blogs, Spotify, StackExchange. We did have the real Napster, though.
  • Standards. Jeffrey Zeldman is my hero for starting the Web Standards Project and getting the dialog between browser vendors started. A standard way to write HTML and Javascript for all browsers simply wasn’t present at first.  Zooming out a bit from the idea of technical web standards, we also didn’t have much in the way of usability research or prior art. Each client was an opportunity to try something new so something as basic as a site’s navigation was up for grabs.

What Was Awesome About the Web

Without a clear mode of operation to follow, we got to make things up. We tried to figure out what this new “web interface” idea should really look and feel like, given the limitations of the browser. We couldn’t do the UI heavy lifting you had on the desktop, and the whole idea of pages broke the application metaphor anyway.

We improvised and we changed course quickly because that was and continues to be the benefit of designing for our platform:

  • We weren’t desktop software designers because they had low-level control over their UI and could respond instantly to user input. Flash was the closest we could get but it felt like cheating to use it.
  • We weren’t graphic designers because we had web text to deal with, and navigation, and clicking, and scrolling. People had to use what we designed, not just look at it.
  • We weren’t multimedia designers because we used a document markup language to code our screens and we had to factor in a page load between each click.
  • We weren’t developers because they used ColdFusion and SQL and PHP and other acronyms I didn’t understand.

Linking Leagues and Asking Why

My first two clients were businesses commonly referred to as dot-coms to denote their internet-only status. My official title was Production Artist and my job was loosely defined as helping designers put their work on the web. My first two projects ended up being simply design projects that I used code to produce, which has impacted my entire career to-date.

LeagueLink was a startup aiming to enable recreational sporting leagues to self-organize tournaments and practice schedules. It combined elements of e-commerce (for gathering league dues), messaging (for inter-team communication), and content management (publishing league and team news). The only Javascript this app used was for image-based navigation rollovers. Ajax would be just a cleaning supply for another 5 or 6 years. Click: page load. Click: page load.

Why.com (forever embedded in my brain by its clever logo leveraging a question mark for the dot: Why?com) was assigned to me at the same time. This was a search engine that included a social aspect: other users were able to rank, rate, and recommend search results for given terms. Apple launched a service called iReview not long after, effectively killing the company. Two things stand out during my time working on why.com: it was the first time anyone in our office had heard of Google, which powered our search results (we thought it was a weird choice), and it was this project that provided me with my first business trip.

I didn’t realize it at the time but Scott Upton, my lead on the aforementioned projects, was also the designer whose work I’d most admired in the company’s portfolio from afar. I still haven’t had a creative director quite like him for three reasons:

  1. He was doing the work himself, and his structural decisions cascaded down to the specific screens I was working on. Any style I’d developed in school or on my own was out the window, it was time to explore someone else’s partially-defined design system and extend it.
  2. There were no Photoshop files, as he was building a clickable prototype, a shadow-version of the functional web app being built by the client. The code wasn’t for production but it made the creation of new screens so much faster and more compelling than doing flat Photoshop work. We could use our site as we designed it, and could tell when an idea wasn’t working long before users or the client saw it.
  3. He was patient and always advocated for the user’s best experience. I envied his ability to sketch in front of a client to get buy-in on a better idea than what they were floating back to us. Cleanly-drawn lines and clear ideas won out ‚Äď most of the time.

For the first 6 months of my professional career, code and design were one and the same. There wasn’t a developer alive who’d touch Flash at that time and having our hands in the code of a site, no matter the language, gave us a control over the end-result that no amount of wire-framing or Photoshop mockups could give us. The client would usually see screenshots of our work, but that work’s production had a web-native methodology baked into it; we knew the screens we designed could be executed in code because we were already doing it.

Why I’m a Designer Part 1.5: Design Emergencies

This post is part 1.5¬†of a series. You can read¬†Part 1,¬†Part 2 and¬†Part 3¬†if you’d¬†like.

Some common stressful situations that could have ruined your day circa 1999:

“There’s a typo on the final production graphics that millions of people are looking at right now.”
  • Print Designer: “Well, fuck.”
  • Web Designer: “Here’s a new version, I’m overwriting the old one over FTP immediately.”
“Users hate the new placement of the button for the feature we shipped last week. No one can figure out where to find it and they’re throwing bricks through our windows.”
  • Desktop Software Designer: “We can hide under our desks until the next release literally ships to physical stores 12 months from now. People will have to drive a car to buy it.”
  • Web Designer: “I just moved it back. Let’s figure out a way not to have that happen again. But if it does, we can still just move it back.”
“The colors aren’t right. The red is too purple.”
  • Print Designer:¬†“It looked fine on my screen. I must have put the wrong QuarkXpress file on the Zip disk.”
  • Web Designer:¬†“Yeah, that’s gonna happen. There’s no way to enforce color consistency across platforms right now, so that’s what the¬†colors look like on your monitor. Unless you use this incredibly constrictive web-safe color palette, that’s just the way things are. It sucks but there’s not much I can do.”
“No one is clicking the BUY NOW button!”
  • Print Designer:¬†“Talk to the web people.”
  • Web¬†Designer:¬†“Well, fuck.”

Why I’m a Designer Part 1: A Timeline

This post is part 1¬†of a series. You can read¬†Part 1.5,¬†Part 2¬†and¬†Part 3¬†if you’d¬†like.

1979 – 1991

Me at Sea World before we knew it was evil
Me at Sea World before we knew it was evil

I was an “Arty Kid.” I have no idea whether this is because my genes conspired¬†to make art a thing I could do or if¬†I simply had¬†enough people tell me I had artisitc ability so I internalized it as best I could, but either way my childhood included an awful lot of drawing. The neighborhood recreation center was where my brother played basketball games, but I remember it as where I attended my first art class at¬†7 years old.

Art taught me how to create a space in my brain to play with a visual idea, and how to make that idea happen on paper. It also taught me how to learn from a failed experiment and try again on a new piece of paper. I often used my worksheets for this instead doing of the boring work that I already understood on the front, to many of my early schoolteachers’ chagrin.

I was also a “Computery Kid” but I don’t remember anyone telling me I was a Computery Kid because computers weren’t readily available until I was about¬†7. Once I started using them, I never wanted to stop and I was comfortable enough with computers that by the 3rd grade, when our classroom received an Apple ][ that none of the adults knew how to hook up, I could look at the wires and see where each one fit. By¬†just trying¬†them out I¬†got it working, and I think that was probably the first time I was called computery.

When the Macintosh came out, my first exposure to graphic design was alongide my cousins as we used MacPaint to print out 10-page-long banners connected with¬†that special dot-matrixy paper. As we spent hours designing Happy Birthday banners, I’m sure we used tons of my uncle’s paper but he never seemed to mind. I loved computers when I was a kid: they were clearly tools for making art.

1991 – 1994

For junior high (grades 7‚Äď9), I attended a computer-math-science magnet school that bussed kids in from all over San Diego. Each year, along with our intensive math and science classes, we also attended programming classes. I took my first coding class at¬†a public school when I was 12 years old in the early 90s, something I could never have appreciated the rarity of back then, but now I know that access to educational programs like this is an opportunity not afforded to many young kids.

Bell Hr. High
Bell Junior High School, San Diego, California, 1993. Taking Instagrams before it was cool.

We didn’t have enough machines in the labs for each student, so we were paired up and wrote our code as a team¬†for each project. The first team project in¬†7th grade was to create a frame-by-frame¬†animation in BASIC by coding each individual frame’s pixel’s placement on an 80×80 grid, wiping the grid, and drawing the next frame. My partner Quentin and I coded¬†a windmill that had two frames so that when it looped, it looked like the windmill’s blades were¬†spinning. I like to think we were making 8-bit animated GIFs before browsers were invented.

While it’s true that this was my first exposure to coding, it was conveniently also a visual task: I was making art with computers. For all I knew, all of programming was about putting cool stuff on a screen for people to see.

hypercard_help
Help screen for creating a button with HyperCard

In the 8th grade, we learned about scanners and my partner Kenny and I used HyperCard to make an interactive Myst-like game, introducing me to my first onMouseUp event, a concept¬†I had no idea I’d implement over and over again during my adult years.

Freshman year was where things got harder: our code was now to take¬†a user’s input, use¬†functions to¬†perform¬†math on that data and return the result to the screen. As we coded Pascal-powered forms to tell us how many cords of firewood we’d get from a theoretical tree, I again focused on the way data looked as it was displayed on the screen.¬†My partner Lauren had a much stronger grasp on the math and data-processing side of the language and without her as a partner I doubt any of my projects would have gotten completed.

What I learned that semester, at Lauren’s expense, was that when the code had to start doing things that strayed too far away from a¬†visual result, there were¬†other people in the world who took to¬†those kinds of hard jobs better than myself. My skills came into play when something needed to happen on the screen. As I later learned ActionScript and JavaScript, I had clear recollections of Lauren’s patient tutoring on how to use closing curly brackets.

What I was beginning to experience in school was an environment I’d essentially continue to search for my entire career: a smart, diverse group of collboratively-focused and really smart people working together to make digital art.

1994 – 1997

As my time at Alexander Graham Bell Junior High came to a close, the gap between my art and use of computers started to widen. Now attending a much more tradtional high school in Colorado, my access to technology in creative capacity was very limited for my sophomore and junior years. The ironically much better-equipped computer labs at my new school appeared to be used entirely for things like Excel spreadsheets and Word documents: the kinds of things that made me want to bang my head against the keyboard and start drawing on the margins of the page again.

My move to a suburban school in Colorado also came with a huge cultural shift for me. Saying I didn’t fit into my new school is an understatement¬†as there were particular groups who¬†actively and at some points¬†violently rejected weird people like me. I turned to artistic pursuits to make it through this time and reconnected with the self-expression and healing that art could¬†provide.

Making drawings, writing angsty poetry and playing my guitar filled my afternoons and weekends. This technical and cultural dark age was crucial to me finding the self-validation that art could provide and it gave me the time to get better at it. As long as I was expressing my emotions with art that improved in quality over time, I could deal with anything the lacrosse players wanted to call me in the hallway.

As senior year came into view, things started looking up. I had found a large group of outcast and cynical people at school like me and it was with this re-found confidence that I joined the school newspaper staff as an elective and found myself once again staring at a computer that expected me to make something with it. My first year on newspaper staff as graphic artist and music columnist also marks the first time a high school newspaper was 100% digitally-produced in Colorado. Every other high school here was still mocking up their pages with printouts and glue and tape, sending camera-ready art to the printer instead of digital files.

Macintosh Performa 5200 LC
Macintosh Performa 5200 LC, only available to education markets. My music column was called Cognitive Dissonance, I shit you not.

While the writers on staff used the 9-inch black and white Macintosh Classics along the edge of the room, I was allowed to use a much larger PowerMac 5200 LC that had a scanner attached to it and Photoshop 3.0 installed.

I felt home again.

I made graphics for the newspaper during school hours, but after class I’d hang out, scan my drawings and edit them in Photoshop. I’d go on the weekends and take photos downtown, then I’d scan the prints so that I could blend them into weird images to print and hang in my locker. I still wasn’t sure what the words “graphic design” meant but when my newspaper teacher suggested I do an independent study on¬†it for the second semester, I jumped at the chance. Overseen by both the newspaper teacher and the director of the art department, I was allowed to investigate what graphic design was, produce pieces that no one had assigned to me, and get ready for college: a graphic design program at art school.

I simply cannot overstate the importance of a few key teachers in my life as well as the technology available at school and in my extended family’s homes during my childhood. I can’t imagine who or where I’d be without them.

1997 – 1999

I worked through college¬†doing digital pre-press 3 blocks away from campus, spending my working hours pre-flighting and printing many of my fellow students’ work. I’d punch out and stay after countless evening shifts to continue printing and mounting my own work, supplies for which were available to me at a steep discount from my employer. I was spending 10-12 hours a day thinking about and producing design work.

I spent so many hours staring at this thing, hoping it would do what it was supposed to
I spent so many hours staring at this thing, hoping it would do what it was supposed to do

But something about the print world didn’t feel quite right. The amount of work that went into taking a QuarkXpress file from someone’s Zip disk and getting it to print correctly from our digital printers was obscene. There were crucial details that could be easily overlooked by the customer, rendering their prints completely useless. As school got closer and closer to completion, classes¬†started leaning heavily on the student’s ability to go and get offset prints produced: an expensive task that I had zero interest in learning how to do.

The web was an obvious alternative as I could start going behind the scenes on the computer-side again. Instead of using someone else’s interface to create art, I was back to writing the code for a UI itself, a task I’d been introduced to with HyperCard stacks 6 years earlier.

The web was also a weird choice for a designer to make at that time. I’d be giving up fine typography control, throwing any semblance of faithful color reproduction out the window, and embracing lower resolution over higher. And I did this willfully and aggressively because I could make something, and I could make it fast, and people could see it anywhere in the world in seconds. Why on earth would I care about printing things?

As my formal design education was nearing its end, I landed my first salaried¬†web design job in 1999 without a resume at a company that wasn’t hiring a designer. I simply emailed them a link to a portfolio I designed and built in Flash. Within a week I had an interview and I started work less than a week after that. I could now call myself a professional designer.

Up Next:¬†Why I’m a Designer Part 2: View Source