A List Apart

Erskine Design Redesign

Erskine Design Redesign

In just two years, Erskine Design grew from two people working at home into a full-fledged agency of eight, working with some major clients. Our website needed to better reflect our achievements, abilities, team strengths, and to get better information from client inquiries to help grow the business. I’ll explore our thought processes and share the decisions we made as our own client.

Time to be brave

Article Continues Below

To begin with, we felt our site lacked visual influence and variation. We’d grown into a creative and dynamic team, yet our own site’s use of color, layout, and typography was rather unadventurous.

Audience and objectives

Our main goals: to attract bigger and better projects—and thereby cement our business, see it through the downturn, and discover excellent growth opportunities. Our aim was not simply to increase inquiries, but to improve the quality of inquiries, and our internal inquiry workflow. My own very personal moral responsibility and motivation was to ensure my geniuses continued to get paid—and hopefully, get paid more.

To achieve those goals, we kept the site business-focused—no blog, Tweets, Flickr, or other cruft at this domain. We sprinkled in our personality and humor, but never strayed from the business objective: We want to work with—and learn from—the best, whatever the industry. You’re the best in art publishing? Best in government? Best in underwear? Great! We’re the best in web design—let’s get together and do exceptional things. That’s our message.

previous erksine design

Fig. 1. Our previous website.

Treat it like a client project

Internal projects drift—we all know it. Client deadlines take precedence, so we ran this as a client project. We designated a proven project manager, a design lead, development assistants, and someone who ensured we covered the legal angle. We ran everything in Basecamp and Backpack. The project was on the agenda for our weekly meetings. The core team reported to the whole team, and took the flack for project slippage.

Maintain a physical project area

We have a designated physical project space in our office where we collate sketches, cut-outs, ideas, early wireframes, iterations, magazines, and pretty much anything that inspires us for each key project we work on. It acts as one big scrapbook and a catalyst for discussion—a place to meet and drive ideas forward. We used this physical project area for our own redesign project.

Physical project area

Fig. 2. Our physical project area.

Blunt statements: sweat the copy

As we labored over our copy, we considered it essential to be friendly, yet bold and immediate about what we do and how good we believe we are. Rule number one: Make an impact and be proud. A website is often the first place to make an impression. The first words the visitor reads are:

“Hello. We design and build stunning websites.”

We then reinforce our name and reputation, and exactly why we’re responsible and “stunning”:

“Erskine Design passionately builds accessible, dynamic, and stylish websites without cutting corners. We have a reputation for stunning visual design and scalable, intelligent, website structure.”

It took us weeks to write that statement. Deliberations over “Hello” took days, and ultimately Ewan McGregor is responsible for that (long story). Our opening statement needed to sit just right. We’re English people who believe we’re very, very good, but fear appearing arrogant. Confidence is key, but arrogance won’t ever do. Therefore, we worked from our “reputation” in that opening quote. We believe we can make this statement because this is what our clients and contemporaries say about us.

Rethink your content

We’re a young company, and that can be a sticking point for larger corporations, so our Projects, Services, and About pages—combined with well-chosen client testimonials—must reassure potential clients that they’re in safe hands. We decided to promote the projects we’re most proud of, to attract work of a similar scale and ambition.

In addition to projects, we carefully considered team member profiles. We wanted to show that our team is an eclectic bunch of individuals with lives away from computers, who are all-rounders with specialist skills: This is Erskine, and this is who you’ll work with. Each of us wrote new biographies, chose our own photos from a professional shoot, and threw in a free fact for a little humor.

new site, team profile detail

Fig. 3. New site, team profile detail.

Information Architecture: iterate!

With the content written, projects chosen, and approaches solidified, we began to sketch, wireframe, and prototype. Our wireframes were rather boring—we were communicating to our team and they “get it”—so we created simple box layouts, almost illegible sketches, and an early ExpressionEngine (EE) prototype to allow us to manipulate content comfortably.

Example spread of collated wireframes and sketches

Fig. 4. An example spread of collated wireframes and sketches.

We wanted playful, intuitive site navigation that encouraged visitors to explore. For example, we wanted visitors to be able to follow a project from the homepage, spot a link to a related case study or project, hop over to a team member biography, and then perhaps visit another project from our list of key projects, and so on.

Our EE prototype allowed us to experiment with a variety of data relationships, helped us identify missing functionality, and get our custom modules and plugins to fill the holes. Our early prototype also allowed us to test some jQuery behavioral experiments, many of which made it to the final design.

Improving client inquiry workflow

We knew we wanted better information from our potential customer inquiries. We needed to reduce the number of clarification e-mails we had to send by extracting richer information upfront, and to manage the flow of inquiry information more efficiently so we could provide potential clients with well-considered replies.

As a team, we audited all the worthwhile inquiries we received to find out what made them worthwhile. We reviewed the quality and quantity of attachments, and the success of our downloadable project sheet. We also looked at the less useful information and requests we received, and analyzed the best ways to reduce them.

We made several changes as a result of our analysis. We rethought, reworded, and rebuilt our downloadable project sheet and sent it to existing clients for their feedback. We installed the EE Freeform module to help us manage our inquiries. It stores all our web-based inquiries and attachments in the EE control panel, and sends an easily digested e-mail to those who respond to inquiries. We also carefully considered, designed, and tested our Contact form.

Branding and typography: form follows function

The Erskine logotype (the handwritten name, and our little birdies, of which there are many), is our most direct use of brand. It’s fun, quirky, recognizable, and effective. With the exception of the homepage, the actual logotype is intentionally discreet throughout the site.

Selection of Erskine birds and brand elements

Fig. 5. A selection of Erskine birds and brand elements.

When it comes to typography, we use various weights of our beloved Bureau Grotesque (OneOne, ThreeThree, and FiveFive). We also use more traditional Helvetica, and Georgia Italic. Helvetica is the key: it helps to ground everything and provides a sense of authority and clarity when we’re talking about our work, but can also be the focal point of a playful page. Its genius is its flexibility, but you already know that.

Example of creative type

Fig. 6. An example of creative type—a detail from About page.

Conventions a must

Without question or compromise, we build every Erskine website with a solid foundation layer: our Conventions package. Over the last two years, the team developed a base layer of rules and conventions that act as starting points for HTML, CSS, JavaScript, and EE files. It’s a bumper compendium of connected CSS files, naming conventions, modules, plugins, and library scripts that ensures all projects stay “on convention.” This makes it easy for anyone else to step in at any time. Constantly evolving, the package is one of the most essential tools in our box.

ExpressionEngine runs the show

I built our first website in a single-handed rush, and it wasn’t truly scalable, so we decided to start fresh, on convention, building up from the new EE prototype. After preliminary data modelling (sections, categories, custom field sets, etc.), we created relationships between projects, cases, team members, and so on. We defined custom statuses to allow us to feature projects anywhere we liked outside of the usual flow of content, and used third-party modules such as REEorder, which allowed us to catalog projects in our preferred order, rather than by the default entry date.

Example of our Nature Of Relationships plugin

Fig. 7. An example of our Nature Of Relationships plugin—a detail from a Publish form.

We created several custom plugins, including a “Nature of Relationships” plugin that extends the more traditional reverse relationship approach by allowing us to add context to each relationship. For example, if our team member Jamie worked on a certain project, it connects that project to him, and vice versa. The custom plugin allowed us to put that relationship into context, explaining Jamie’s role and contributions.

The final Homepage in is entirety

Fig. 8. The final Homepage in is entirety.

After the redesign: content strategy

The new website design allows us to move content around by featuring projects on certain pages and within hierarchies. It easily accommodates new projects and occasional case studies. Our news archive grows weekly, and we’re constantly adding new content as our business evolves.

Additionally, to this, we’ve recently launched Erskine Labs. This is a blog separate from our main site that allows us to write freely. Eventually, the Lab site will also host downloads, let us do experiments and blow things up. Erskine Labs is more industry-focused and thus, we hope our two websites will reach all kinds of audiences.


A strong business is as much about perception as it is about what we produce, how much we produce, and how we produce it. We feel our new site works much harder on our behalf. Collectively, we’re now—finally—proud of the window into our world.

And, without question, the quality of job leads has improved significantly. It feels as if people treat us with much more respect—that they know we’re a serious outfit. RFPs are better and contain richer information.

We put potential clients at the heart of every decision we made, and our website now truly reflects who we are, what we’ve done, where we’re going, and why we’re great to work with. We applied everything we’ve learned—successes and failures included—and built a website that encourages serious web clients to knock on our door.

About the Author

26 Reader Comments

Load Comments