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#section2
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#section3
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.
Fig. 1. Our previous website.
Treat it like a client project#section4
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#section5
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.
Fig. 2. Our physical project area.
Blunt statements: sweat the copy#section6
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#section7
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.
Fig. 3. New site, team profile detail.
Information Architecture: iterate!#section8
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.
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#section9
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#section10
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.
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.
Fig. 6. An example of creative type—a detail from About page.
Conventions a must#section11
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#section12
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.
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.
Fig. 8. The final Homepage in is entirety.
After the redesign: content strategy#section13
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.
Conclusion#section14
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.
Great read. Really love reading the process of others. Makes it much more worthwhile to hear the story behind the story.
Great article ! I know you from the Agile Record website for the upcoming Expression Engine 2 and I love your style and the clean & great job you’re doing.
I think I’m going to suggest this physical project area thing to my boss, it’s such a great idea !
I also saw that you had nice relationships for the “key people” blocks on your website and I understand now why it was useless to crawl the web to find this plugin. You’ve been developping yours 🙂 Is there a way I could get my hands on it ?
Anyway, keep it up, Erskine rocks !
Great article.
The Erskine Design introduction statement reads, “*Erskine Design* passionately *build* accessible, dynamic and stylish websites without cutting corners.”
That’s an interesting collective noun. I expected to see _builds_, the singular form, rather than _build_. But, given the right context and goal, it may be desirable.
This point keeps cropping up, and I agree its confusing, but apparently the copy on the site (that part at least) is correct. To think I have A-grades at English and still don’t know. Oh dear.
We (especially our admin/proofer Vicky) double-checked when we first relaunched, and we’ve had quite a few emails about it, so naturally we triple-checked since. I suppose that because Erskine Design is a collective or group of people, it helps to think of it as “we build”, rather than “we builds”.
I still wouldn’t bet my house on it though.
In reference to a comment about this above, I’ve been chatting with our man Glen, who built that plugin. We did have plans to release it as we often release our plugins and modules. Mind you, our Jamie suggests that similar functionality can be achieved with Brandon Kelly’s FieldFrame or Leevi Graham’s LG Data Matrix, or one of those. Sorry to be fuzzy – we will write a Labs post about it. Its on our list.
Thanks a lot for your very fast answer ! Too bad Playa can’t do such a thing, maybe in the 3rd version 🙂 I’ll take a deeper look at FieldFrame and LG Data Matrix waiting for your post on Erskine Labs.
Thanks again !
Wild guess: That Ewan McGregor thing refers to his saying “Hello there!” in _Star Wars: Revenge of the Sith_. Am I right?
@Reverend Duck: Wrong! If I was ever going to use a Star Wars line it’d be the oft used “I have a bad feeling about this”.
However, it is a film reference. In _Trainspotting_ when he’s kipping on a settee in a hallway, somebody walks by and – dazed – he says “Hellooo” in a friendly, confused way.
Since I saw that in 1994 I’ve always preferred to say “Hello” rather than “Hi” or “Alright?” as it just seems infinitely more friendly, more approachable. This was my argument for “Hello” when designing our homepage.
Long story for a tiny detail, but there you go.
@Simon: In that case, here’s hoping we’ll get to see “Hello there!” in your _next_ redesign! 😉
Thanks for this timely article. We’re in the process of redesigning our own website, and if there’s one thing to take from this (as the PM) it’s to run it like any other client project.
Oh, and the concensus here is build not builds, in the same way that Amazon sell books, rather than sells books, but this could be a US/UK thing.
It’s funny to see how this article about redesigning websites differs from Lea Alcantara’s. That means there is no always-fitting solution—you can treat your redesign in the same way as you treat projects for clients, like this article describes. Another possibility—presented by Lea Alcantara—is to set one’s own personality as the initial point. But in both cases there is the same intent: to create something exceptional.
I thought “Hello” followed by a brief summary of the website was simply a mandatory addition to all newly made websites these days? =)
“We design and build” is a statement about each individual group member. “Erskin Design passionately build accessible…” is a statement about the collective entity, and thus should have an “s”.
Erskine Design members build websites, Erskine Design as a collective builds websites.
If you think of “Hells Angels” instead of “Erskine Design”, it would be “Hells Angels builds websites” when referring to the group. However, if we’re referring to individual members of Hells Angels, we would say “Hells Angels build websites that are generally about motorcycles”. Right?
I absolutely love that you labored over the content so considerably. The design and verbiage are so intrinsically linked. It would be insulting to assume (as so many do) that we should spend infinitely more time on the design, than the content. Obviously the design takes more technical time to implement. But getting the words “just right” can be a laborious process as well!
Cheers.
@Bjorn: “Hello” certainly isn’t unique, but I’m pleased we can justify its use in terms of it representing our own friendliness, our attitude and so on. Many others use “Hello”. We think we use it well. Its funny that we actually analyzed it, and then went with something so obvious, but why avoid something so natural? Maybe it wa sa mistake to write about it, but I value that first impression so so much. Some agencies have extremely awkward introductory text, which we were keen to avoid at all costs.
That said, many are keenly pointing fingers at our introduction. In the Guardian today, we have David Mitchell (UK comedian) bemoaning the casual use of “passion” or passionate” in today’s society – such as the “we have a passion for cleaning drains” over-usage we see everywhere. We of course declare that we build websites “passionately” – and we stand by that too. We’re very bloody passionate about it. Honest.
More potent for us is this kerfuffle about “build” versus “builds”, which is getting me down a bit after a monsoon of tweets, emails, DMs and comments. I’ve already explained it a little on the previous page of comments, and I explained that we had double-checked our usage eight months ago, and triple-checked our standpoint after initial feedback from the grammar police. Today, many more people have waded into the argument.
Bjorn, your last paragraph seems to see it from our viewpoint, which is comforting. Now, I am not angry with the wider feedback, but more fatigued by this. So, this is no rant. It is another opportunity to work this whole thing out. So…
One person said in our defense “Strictly speaking we’re talking a singular noun here. But it ain’t life and death. Modern conversational vernacular often matches singular nouns with the plural verb form.” Others agreed that it is now a choice rather than an exact rule. Many have been quick to launch themselves in to urge us to stand our ground as they believe we are correct
That’s us, you see. We are _The Modern Conversational Vernacularists_ – a very dangerous, free-thinking gang of radicals.
Another Twitterer said “You do need to start conjugating your verbs the Amehrkun (sic) way”, and plenty agree that we are wrong to use “build”.
There you are. I think we English use this more liberally, depending on how a sentence might read. Its fair to say that there is “English” and the “American English” variant (as proven by Adobe, Apple, our education systems, and many other examples) and the differences cause many an argument over exact usage of words or phrases, or spelling of course.
To expand upon your example regarding us, we’d say that Erskine Design isn’t singular. Erskine Design is a team of people. That is how we’re constructing that introduction. We are thinking about ourselves as a group of individuals who act as a team/collective to do what we do. We are autonomous, free-thinking beings, not one singular brain.
As my colleague Glen stated, “I build, he builds, we build, they build. They and we don’t builds. At least I don’t think they do, and I know we don’t.”
We think of “Erskine Design” as “we”, and thus “we builds” is a bit odd. Perhaps that is the wrong way to look at it. I keep thinking, “Amazon _sell_ books”. You might prefer that “Amazon _sells_ books”. Personally, I prefer the former.
It is telling that the ALA editorial team have – I failed to notice at preview stage – added the “s” in the article. I trust them a great deal, so certainly for an American audience, I shall accept that “builds” is correct. However, they were OK with our screenshots and our usage on our site (I think) and as I say there should be an understanding of how we English construct our sentences in a common sense fashion.
Ultimately, I’m getting hammered about one missing “s” and its doing my head in. I have to consider that although we can justify our usage of “build”, and that many people support that, we could be turning away grammar-minded potential clients who perceive this as a lazy mistake. Thus, as a businessman I am considering the idea of adding a bloody “s”, at least for some peace and quiet. But then many think the “s” feels wrong. Aaaaarrrgghhh!!!
Hi, Simon,
I was the one who made the “Amehrkun” crack, so I wanted to clarify that I think the people telling you to add an _s_ to _build_ are wrong to do so. (And not just because they wish to impose US grammatical “rules” on you.)
I love the English English treatment of singular nouns that represent plural concepts–especially when it comes to organizations. Using a plural verb with a singular name more effectively conveys the idea that an organization isn’t some monolith, but instead a reflection of the many individuals that allow/cause it to exist. As far as I can tell, this usage is especially appropriate in the case of Erskine Design.
“Erskine build” and the like are a noun-verb combination that make(s) me wish it felt more natural to me (and to my fellow US English-speakers).
Great article!
Re: the _build versus builds_ issue: _build_ seems much more natural to me (I’m in the UK, by the way). Anyway, who cares, really??!! The trouble with discussions online is that they always descend into ridiculous triviality.
Oh, and thanks for clearing up the Ewan McGregor thing: when I first read it I took it to mean that you _literally_ discussed the issue with Ewan McGregor (as the saying goes: if I had a brain, I’d be dangerous!).
@Jordan: I absolutely agree. That, and tones can be hard to read. 🙂
@Simon: It was a great article that I enjoyed reading, especially as I am currently working on the next version of my personal site. I am too pleased that you can explain and justify your usage of “Hello”, etc. and hope that my attempted pleasantry was not taken the wrong way.
I hadn’t realized the scale of this build/builds debate and certainly only intended to help, rather than further frustrate you!
This is a fantastic article – I love that it nails home the fact that it’s something you labored for that you could be really proud of.
Just out of curiousity – how did the name, “Erskine”, come about?
Thanks everyone for your comments over the last couple of days.
@Bjorn: No worries my friend. Your comment was just a reminder for me to address it in more detail.
@boon: There is a note about the name on our “About”:http://erskinedesign.com/about/ page. To summarise:
“Erskine is, amongst many other references, a town in Scotland. The name comes from “˜Eriskyne’, a contraction of the Gaelic “˜air an sgian’, meaning “upon the knife”. Feel free to draw your own conclusions as to why we chose that name.”
And when it is British English versus American English it is doubly so.
Thanks for the great article. We have gone through a few site revisions here and it is hard to get a rediegn in as a project. THe new site looks great!
Love the approach you took from the beginning. I know how hard it can be when you design and develop something for “yourself”.
Great read nevertheless.
May I suggest you create a Mac version of your Project sheet. Maybe just a pdf version or something.
Cheers.
Sorry to raise the build/builds issue again. For me, “build” clashes, but for others it clearly doesn’t. The problem is that the name Erskine Design will conjure different images for different readers. Some will picture a single entity, others a group of people. Thus you can’t win, whichever way you go.
In this circumstance, I always prefer to rephrase. For what it’s worth, here’s my take:
“At Erskine Design, we passionately build accessible, dynamic and stylish websites without cutting corners.”
It’s not perfect, but clears the confusion.
It’s worth noting that the name Erskine is sometimes used as a singular and sometimes as a plural noun across the site, as in:
“making Erskine a unique partner”
“Erskine look to protect the investment you make”
Sorry for ths pedantry. I should also say thanks for an informative, open-hearted and engaging article!
@segen: Thanks for your comments, and the note about a PDF project sheet. It is a good idea that has already been discussed and something we may well provide. Despite what a lot of people think though, we will continue to provide a Word version as this is important for numerous UK sectors and companies under the evil regimes of outdated IT teams who enforce Word and IE6, still acting as though it is 1999.
@Ralph: I might surprise you here, but I have decided to use your suggestion! Your compromise still allows us to describe Erskine as a group of people rather than one single-brained entity, and still allows us to use “build”. Ultimately, I have to make a change for fear of turning away possible clients who think we’re lazy with grammar, especially in the States.
I feel like I gave in, but still won. Result!
I’m glad the suggestion was useful!
Albeit with some trepidation, I feel I should point out that the background image on your About page also presents the same issue.
Good luck with all your wonderful web design work. I realize this is really a side issue!
I really enjoyed reading that in treating your organization like a client, you focused on the content first. “With the content written, projects chosen, and approaches solidified, we began to sketch, wireframe, and prototype.” Yes, yes, yes! It’s such a simple thing, to consider what one should say before figuring out how to package that communication, but all too often clients ask us to redesign without first addressing _what_ they’re designing and communicating—and many agencies happily comply.
Kudos for forcing Erskine to be a role model of the kind of process and behavior you promote with your clients.
I love the idea of developing a questionnaire for prospects to complete before they ever contact you. It’s a great way to get them thinking about their site in terms of your work, and I’m sure it leads to better conversations from the start.
I work for a small agency, and we’ve been trying to implement something like this for a while. But our account managers always argue that visitors won’t fill out long web forms, much less a 5 page word doc.
Do you have any insight on how many people take the time to complete your worksheet? Or value judgments on the quality of the responses you’ve received so far?
Thanks for a great article!