I’m also going to give a slight plug here to my co-host Ryan, as he’s just published a video interview with Elliot on his site havocinspired.co.uk where he asks Elliot about his career and how he got where he is today. Both definitely recommended viewing!
I’m also going to give a slight plug here to my co-host Ryan, as he’s just published a video interview with Elliot on his site havocinspired.co.uk where he asks Elliot about his career and how he got where he is today. Both definitely recommended viewing!
Paul talked about microcopy last week and another article passed my way which further highlights just how powerful microcopy can be and how A/B testing can help to improve your calls to action. Dustin Curtis performed an experiment over the past few months where he tested a specific call to action on his website which prompted people to follow him on twitter and measured the number of clickthroughs various versions generated.
He started with the statement “I’m on Twitter.” Which led to a 4.7% clickthrough rate, then switched to a command “Follow me on twitter.” which resulted in an increase of 55%. He then went on to try a stronger personal command “You should follow me on twitter.” which increased even more and finally added a literal callout “You should follow me on twitter here”.
Overall, the clickthroughs increased by 173% showing just how much of an impact microcopy and A/B testing can have on your site and it might be something you want to look into.
Sometimes I sit back and wonder what life would be like without IE6 and the whole world is sunny, I sit in a lush meadow with my laptop, coding away without a care in the world… If only.
Every so often someone sets their sights on IE6 and declares war, most of the time we scoff, knowing IE6 has too many troops to be defeated, but two new armies have stepped into the ring, and they’re big armies at that. Digg.com and YouTube have both recently announced that they will be taking sides against IE6 sometime soon. This was highlighted in a blog by Chris Heillman.
Admittedly, the audience of Digg might be slightly biased towards a more tech-savvy crowd, so these results might need to be taken with a potential overdose of salt, but it’s encouraging to see a fairly large outfit taking the time to research the situation and I’m sure that they’re not going to shut off support completely, but concentrate their bells & whistles on the newer, more capable browsers leaving just the content accessible for IE6.
He also points out that both Digg and YouTube are social web sites, which are normally blocked by the kind of organisation which forces their users to use IE6, so the true impact of this news remains to be seen.
Ryan: OK, joining me today is Simon Collison. Hello, Simon.
Simon: Hello, nice to be here.
Ryan: And we’re here at the Future of Web Apps tour in Leeds, and you’ve just done a talk this afternoon, it was a very good talk, I really enjoyed it.
Simon: Smashing, thanks for that.
Ryan: And we thought it would be really good for our listeners to just cover a few of the things you talked about in that talk. Now your company, remind me your company name.
Simon: Er yep, Erskine Design. Or Erskine if you’re looking to impress, I think. Not quite sure where to stand on that.
Ryan: Where did that name come from?
Simon: It is, I think the origin of it means ‘upon the knife’, which is quite interesting. So, obviously, it’s a place in Scotland, it’s also an old saying and if you tweak it or someway, in this day and age, it means upon the knife, which we quite like for a design and development agency. We often feel as if we’re on the knife. So, it works quite well.
Ryan: Cool. And you started off your talk by telling about your biggest disaster, which I thought was quite interesting, but you were quite open about it and that was the Vanilla Pages.
Simon: That’s right.
Ryan: Just for the benefit of us listeners, would you like to tell us what the Vanilla Pages was, is…
Simon: Sure, definitely past tense, um yes. The Vanilla Pages was an idea that was brought to us and we worked on that for a client team, so it’s very important to stress that; it’s not our disaster, as such; we may have facilitated it. Basically, the Vanilla Pages was an idea for a web app that fitted a perceived niche in the fine food and drink arena. THe idea for the Vanilla Pages was that is was a 24 hours a day, 365 days a year tradeshow. Suppliers, wholesalers, buyers kind of creating links and making connections and finding new sales opportunities. On the face of it, we thought this was a good idea. Also, Erskine had only just begun, so we were looking for new and interesting clients and we met with the client we thought they had some good ideas and we spent some time discussing what the process would be. Now, obviously this was 2 or 3 years ago and our process is very different now – very well honed – but at the same time we had enough experience as a team then, we were kind of discussing the need to understand the audience, really get to the bottom of this niche and find out: “What do people really want, will they use ‘X’, will they want to do ‘Y’ abd so on”. And initially, it was like “Yeah, this sounds great” and we signed everything and we began work and instantly we found that our suggestions were being thrown out. There was very little room for us to use our experience to make suggestions and say: “have you thought about this?”, “why don’t wet a focus group together, why don’l;t we ask some retailers some questions” and so on. And as I showed in the presentation today, we then started to receive incredibly detailed and colourful Excel documents, pretty much telling us everything we needed to do, every nuance of the user experience was being dictated. Now, we’re not fools, we stood up for ourselves and we illustrated many warnings but it didn’t really happen and we continued the project and we launched it. It received quite a lot of advertising and it failed. And so, yeah, today I introduced the presentation with a video that was created for it and then proceeded to rip that video apart.
Ryan: Which was quite amusing.
Simon: And used that as a basis for everything else.
Ryan: I know that Ryan Carson’s been recording the talks, I’m sure that will appear on there.
Simon: Excellent. I’m sure this will come back to haunt me. I’m expecting an email from that client in the next few weeks.
Ryan: But you telling us about that site set up the entire theme for your talk, which was collaboration and the process of collaboration with your users and you came up with some, a list of points, a process that you kind of went through which; the first one was collaborate and then research and then… Can you just take us through that process?
Simon: Yeah, sure. I mean, to address the point of collaboration, I think, a point I made today was that it’s a collaboration across all kind of boundaries, so on one hand it’s the design and development team itself. So, to quickly summarise that, and this will be old news to many listeners, but essentially, the designer can talk to the developer; the project manager or, heaven forbid, account manager knows as much as the designers, the developers and so on; everybody is aware of every aspect of the project, or as much as possible. This gets away from that production line approach and allows the developer (to use labels here) to dictate, or suggest ideas, to the designer, and so on, because he or she is armed with enough information and understanding, through the process, to feel that they can contribute, that they’re not going: “I don’t know if this is relevant, but…” why not make the suggestion? So, a lot of collaboration within the office, if you like, if it’s an app for a client, then obviously look to collaborate with them as much as possible, so it’s not just a one-way process, so as many opportunities for focus groups, workshops, talking to stakeholders, investors, whatever that might be, and key to that, the intended audience, which was the main point today, as well, to collaborate with them from the earliest stage as best possible. In terms of the process, yes, collaborate at the top, it’s more of a reminder, through the process. So, we looked at things like research, prototyping, testing, rinsing and repeating that process really. If there’s an agile approach to what’s happening, then you know, there may well be a product launch, then loop back and go through the thing again. Yeah, and to summarise there again, it’s, we were talking about whether it’s waterfall, agile or a fast sprint. We wouldn’ make that decision until we’d spoken to the audience and we’ beginning to get an idea of what they might need, or how best to pitch this website or application.
Ryan: Which, I find quite interesting, because I seem to get the impression that, as a company, you don’t have a set process, so you basically, you know, a new client comes in and you’ll look at the audience and then you pick whether you’re going to through an agile process, or a waterfall process, whereas, you know, we hear a lot about, you know: “you must use agile, agile, agile, agile” or, you know: “waterfall’s best, waterfall’s best” and you seem to, you referred to it actually as: ‘Organic Collaborative Process’
Simon: Yeah, absolutely. I mean, it is very difficult to, in most situations where there’s a client involved, you need to respond to an RFP, or some kind of brief, you need to reach an agreement over what’s going to be done before they’ll say yes, we’ll give you ‘X’ amount of pounds and we’ll build this together hopefully. It’s very difficult to say “take a leap of faith with us, we will put some of the pieces together, shortly into the process, we need to find out more first, and get under the skin of what you want, what you’re intended audience might want.” So, that’s quite tricky, some of the greatest things we’ve worked on have been based in that leap of faith and we’re taking one as well, working with a client sometimes, you know. We’ve learned that it doesn’t always work out as it might look and they take a leap of faith with us. I guess a lot of it is, kind of, proving through previous work and illustrating how that process worked. So, it sounds a little trite and I never want anything to sound arrogant but a level of education, I think, commissioning for the web is difficult for a lot of people. If we can help them understand what they need to do and how we meet in the middle and how we collaborate then, you know, we’ll do everything we can, because that’s a great foundation for the project.
Ryan: Maybe slightly off the topic of collaboration, but do you price differently for different processes, so whereas agile’s much more extensive than just a waterfall method. Would you look at the project, pick which process you want to use, and would you price accordingly, depending on how thorough the process is, or do you look at a project and, you know, just price it the same across the board.
Simon: Yeah, that’s a killer question. It’s the… First of all, we try and be as flexible as possible and again that comes back to that leap of faith situation. There may be a ballpark figure involved early on. The ideal situation is that, if it’s a pitch, for example, we would kind of get the go ahead, if we’ve been fortunate, without having to be too specific. Hopefully, the illustration of our process and what we’ve done previously, and what we’re aiming to do can be enough. That is difficult. If the approach is going to be typically agile, it’s obviously a very different beast to a waterfall process, where you can pretty clearly define, you know, we’ll do A, B, C, D, we’ll end at Z – job done. With agile, who knows, because exactly how many kind of releases might there be? What’s going to be involved after the initial launch? So, very difficult. As a team, we democratically discuss everything, everybody is involved, and again collaborates on how we approach a potential job. Like a lot of people, and I’m sure there’ll be plenty of people listening who’ll empathise with this, we’ve burned many times, so we are extremely careful about it now. So, no set answer. We work with whatever flexibility we’re given.
Ryan: OK. Moving slightly on. You talked about logovisual thinking and these weird disk things
Simon: Yeah
Ryan: Which you looked to have lots of fun with, you put pictures up and everything and you want to just tell us s little bit about that?
Simon: Yeah, sure. The product itself is, yeah, LogoVisual Thinking, I couldn’t even begin to tell you why it’s called that.
Ryan: It’s the ‘logo’ bit, I can get ‘visual thinking’, it’ the logo bit.
Simon: Yeah, I’ve no idea. Maybe Mr Logo invented it, I’m not sure. That would be a great name. The URL, I’m pretty sure is logivisual.com, in fact, it is and they produce loads of products. I’m not affiliated with them in any way, I should make that clear, but I do wax lyrical about this stuff. Essentially, they are magnetic hexagons, but they also do all kinds of shapes and different tools and I think they’re really, they’re used a lot in business. You can just imagine the dry management meeting: “come on everyone, we’re going to imagineer for the next half an hour” and they’ll break these things out. It’s possibly easiest for people to think along the lines of Post-It notes, or using something like that. A classic example where we would use them is we would get a stakeholder or workshop team together and a few of us and we find that there are people in the room who are contributing a little less, you’ll have, you know, Johnny Smartpants who knows everything about Web 2.0 and he’s throwing all these ideas in, and there are some other people and you think “I wonder what they’ve got to contribute”, so give them a pen and a pile of magnetic hexagons and then give them a, let’s say, for simplicity sake, “list all the kinds of user you can foresee using this product or website” Go into detail, rather than say ‘government’, talk about specific roles, you know, what kind of people within a government department might use this thing and why. They all go away and, because there’s no pressure, the write whatever they want. We bring that together and then we’ll look at grouping these items in a particular way. The example I used today was audience grouping. We prefer to work with a broader brushstroke than the typical user persona, so you’ve got Johnny or Mary who, you know, Johnny does this, Mary does that, she knows about this but not that etc. Sometime we, and⁄or the client, forget exactly what Johnny’s supposed to be, we have to go check so with these tools, we’ll take everything that people have contributed and we’ll group them into 4 or 5, maybe, audience groups. We’ll then label those groups and then they will be in our minds throughout the process. So, for example, we’ll have a hierarchy, it might be that it’s a government site, it might be there’s a certain kind of user is ‘Hierarchy1’, a certain kind of group is ‘Hierarchy2’ and so on. And the outcome will be, we will do some lo-fi diagrams and look at where typically would somebody from this audience group arrive; what might might they do while they’re there; and, vitally, what action might they take, what might be there outcome, what do we want them to do. So we use these LogoVisual tools for things like that. Essentially we just have them around as whiteboards and they’ll be around for a project, we’ll move them around on the boards, because they’re hexagons you can group them beautifully and, yeah, I mean, have a look at logovisual.com, there’s some good ideas on there of how people are using it.
Ryan: And you talked about having a project space in your office, didn’t you, which you brought this picture of a, really impressive actually, all these things stuck to your walls and everything.
Simon: Yeah, it was. Well, that particular example was from the Erskine.com redesign, so we really did go hell-for-leather on that one. Yeah, we’re fortunate to have quite a large office space I’m not bragging there because it’s got no heating, single-glazing windows, it’s freezing, it hasn’t got enough plug sockets, it’s kind of rubbish, but we love it, and it’s a creative space.
Ryan: It’yours.
Simon: It is ours, which is wonderful, although we share with an idiosyncratic, little illustrator called John Burgerman, who’s gradually spreading himself through the office, but we love him. So, yeah, we set aside an area of the office, if there’s a spare computer, we’ll stick a computer in the middle, so we can access online information, but really it’s offline scrapbooking, so you know, we print out typefaces, we rip this out of magazines, classic stuff, as we produce wireframes, or any kind of, you know, back of a cigarette packet sketches, whatever they might be, or source material from a client, maybe, we just throw it all in this space. It acts as a constant reminder, so if you’re scrapbooking in a flickr pool, or, what is it, LittleSnapper, or something like that, that’s fine, but it can e difficult to share and it’s a bit out of sight, out of mind. With the project space it’s just there, and you can keep adding to it, and if you’re stuck for inspiration, 2 or 3 of us might, rather than just discuss this idea over Skype or, as you do when you’re in the same room, sad as that is, or sort of face to face at our desks, we’ll wander over to the project space, where we’re kind of surrounded by the project, and delve in and add to it, tear things up, I don’t know. It works for us; if you’re a remote team, and you’ve got people in different locations, it’s maybe not so good, but it’s a nice idea, and I think people like Clearleft and Mark Boulton, people like that, I’ve spoken to them and I know they do a similar thing. It’s just a, it’s a tip, but it doesn’t work for everybody.
Ryan: You talked about community and you had to rush through that a little bit, because your talk was overrunning, could you talk to us a little bit about that. Again you had bullet points of trust, and brevity and things like that. Could you just take us through what you were covering there.
Simon: Yeah, sure. Yeah, half an hour’s never enough really.
Ryan: It flies by, doesn’t it.
Simon: Especially when you waffle, like I do. Terrible – you should see me after a few pints, actually no, that’s a bad idea. Yeah, basically we have, they’re our kind of, what would you call them, they’re like little waymarkers or points to observe throughout the process, so through that early collaboration with the audience or the client, we’ll define some key aims and objectives, but they’re usually project specific, but I certainly believe that there are a number of conventions, if you like, or almost courtesy items to be aware of, when you’re looking to create a community around a website, so you mentioned trust, that’s something I really think is important, especially where you’re asking people to submit their own information, share information and kind of confide in the site, in a way, so it’s very important that the user feels safe, secure, this isn’t just a fly-by-night website. I don’t know why there aren’t more Web 2 applications that essentially fish, you know, imagine if flickr ended up being, you know, all that stuff and that was all going to be used in a way we didn’t understand. You need to build that trust. So we’ll look for certain devices, we might fall out with a client over their choice of a URL, because if they’re a business to business organisation, you don’t want something jokey. Also, who’s behind the site, are there humans behind it and how can we bring them into it, can we get them to write dome kind of introduction, can we make them visible, can we make them contactable? So, little things like that. And then other items on the list were classics such as, you know, brevity with content, making things easy to find, I’m sure that’s relevant, regardless of the subject matter, and so on.
Ryan: OK. You also mentioned having a features roadmap during the process of developing your site, do you want to explain why that’s benefit?
Simon: Yeah, I rushed through that as well, didn’t I? Basically, we often find that, if the first meeting with a client or, you know, if we’re building something for ourselves, grandiose ideas, you want to kind of do everything and I think it’s very important to bring simplicity into whatever you do it’s a bit of an obvious thing to say when it comes to responsible design, but at the same time, you know, 37 Signals and other companies have talked about this stuff for years and I think many of us have learned from it. Essentially it’s what are we going to do; when are we going to do it, sometimes it falls in very smartly with the agile process; what do we know about the audience, in terms of what we can throw at them and when. So, we obviously favour starting small. I was talking to somebody after the presentation about low expectations, take that the wrong way and it sounds quite negative, but I think, you know, it’s just putting the bar somewhere where you can reach it. I think it’s a very negative thing if you launch a site with all the bells and whistles in the world and then end up retracting too much after launch. I think it’s natural that some things will change and some things may be removed, but if you kind of visibly change your whole plan, because you haven’t thought it through, I don’t think that’s very healthy. So yeah, it’s defining a roadmap, as we call it, and probably others do as well, where we essentially outline what we’ll do, when and try to stick to that, but ensure it’s malleable, so as we learn more, we can rethink it, think let’s wait on that and the way we reflect that with the client, as well, in a more tangible way, is we try to get rid of all the sort of, the Basecamp noise and whatever other channels are in operation, reduce a project down to it’s deliverables, so we will have, I guess establishing a, if it’s not too pretentious to say a narrative to the project, so there’s point A, and there’s lots of things to click, on be they kind of sitemaps or research findings, through to batches of wireframes or comps or prototypes and whatever. We find that, in tandem with that roadmap thinking, kind of illustrates what we’re trying to achieve and when, and I think it can be reasonably easy for a client to buy into that, so it’s a case of OK, so, I guess it’s what you say and then backing it up, so proof as you go along. So that leap of faith is, kind of like, yeah, you were right. So, that seems to work quite well for us.
Ryan: Great, and you got everybody excited right at the end of your talk by showing them your ‘Ultimate Package’ [Laughs]
Simon: Yes, ladies
Ryan: That must sound very odd coming over a podcast
Simon: I’m sure it does, yes my ultimate package. OK. It would be really unfair of me to take credit for this, I do like the idea of conventions in web design and development, whether it’s navigation and using the word ‘About’, ‘Contact’. I think there’s plenty of other areas to create and do exciting things. Personally as a web user, I like certain constants. So, those kind of conventions I love. In terms of actually building websites, we use a lot of them in our development process. So, for example, when we start a project, we actually start building it, whether it’s a prototype or even if we’re just experimenting, we have a folder that we iterate, we’re on version 1.9 of our Ultimate Package at the moment, and we just drag it onto, we just FTP it.
Ryan: Like a template?
Simon: Yeah, basically. Responsibility for this goes to whole Erskine team, but specifically Greg Wood, our lead designer who is, kind of, the custodian of this thing so he’s very passionate about it. It’ll be up to Greg whether I’m able to share some or all of it with you all eventually, I don’t know, and I’m sure other people have their own versions. So, for example, you will have, in the Ultimate Package, some JavaScript files, the latest jQuery, some stuff to control certain functions and some JavaScript to help with IE6, PNG transparency, whatever it might be, and then a cascade of CSS files, so our main screen.css, with some basics in there, reset.css, our own version of Eric Meyers Reset CSS, and things like a scratch file, so if one of the, one of my colleagues wants to do some work in the CSS, they do it in their own file which cascades in, so, you know, Greg or somebody can approve it or ditch it, withough it really having any great affect…
Ryan: I like that. That’s a good idea.
Simon: on the main stylesheet, if you like, again that’s something that Greg’s introduced and we all find that really useful.
Ryan: Yes, that’s a good idea, I really like that.
Simon: And there’s a few other bits and pieces in there as well. The beauty of it is, if you start working, you want to start working fast, the external JavaScript, CSS and so on, is already linked up, so you can throw a function in very quickly, without thinking: “oh, I must, why is it not working? Oh, I’ve not called it in the <head> of the document” No, it’s all kind of there. You remove stuff as you go along, but it’s there. And there are things that help us with ExpressionEngine builds and a few rules in there as well, so that we’re all on the same page, if you like. If I’ve not worked on a project at all, the person who might have led it is on holiday, the client calls and they’re in a panic, I go into the code and I start looking for certain conventions: I know there will be a ‘Contents’ at the top of the main stylesheet, I can “Ah, 10.1, scroll down, find the flag for that” So, it works really well.
Ryan: And if we’re very, very lucky, we might get a chance to get a sneak peak at it?
Simon: I’ll have to speak to Greg. I’m really, I love the spirit of sharing.
Ryan: [Laughs] Greg’s baby.
Simon: Yeah, I don’t know if I owe him any more beer, but I’m sure that will be involved.
Ryan: It’s a good idea for people to think about and if they’re going to build their own anyway, I like the idea of a scratch file.
Simon: Yeah, just use your own, you know, your own conventions, if you like. I love the spirit of sharing in this community, especially we saw it through web standards, and everything else. I’ve really benefited from people sharing this kind of stuff, so, you know, hopefully we will. I’ll keep you posted.
Ryan: If not, there’s some ideas.
Simon: Yeah, I’ve already been asked today to write about how we go about producing it, so even if we don’t share the actual ‘Ultimate Package’.
Ryan: So, keep an eye on your blog or Twitter feed and that should be it?
Simon: Yeah, either myself or Greg will probably put something together at some point about that.
Ryan: Fantastic. OK, Simon, well thank you very much for taking the time.
Simon: It’s been a pleasure to be on boagworld.
Ryan: Thank you very much.
Thanks goes to Simon Douglas for transcribing this interview.
Back to top
Good question and I have to admit it’s something I often think about myself. I think a lot of it boils down to how you personally approach learning and seen as everyone is different this is probably going to turn out as quite an ambiguous answer, so I’ll go through some of the steps I use and have used in the past.
Personally I’m a big Photoshop fan, some people prefer Fireworks or various other graphics programs, it doesn’t really matter the principle is still the same, learn how to use them properly!
I’ve found that it can often be easy to think of a design in your head but converting that idea into Photoshop can be difficult if you don’t have a solid understanding of how to use the software. Equally so you can often find that your ideas are limited to your understanding of the software you’re using and as a result your work suffers.
And when I say read books I don’t mean for you to burn your brain out reading the Photoshop Bible from cover to cover (worst book I’ve seen for photoshop by-the-way, black and white images in the a graphics software book???), I’m talking about a good reference book. Pick a tool to learn an read that section.
Video tutorials are cropping up everywhere these days and I love them, what better way to learn how to use graphics software than to be shown.
Lynda.com is a great place to have a look at as well. Short bite-size videos 3-5 mins on average that show you how to use the software through examples. It is a subscription service but you aren’t tied in for any length of time so you could simply pay for a month and watch as much as you like.
Its difficult to improve your skills without have a goal or objective, sitting down and saying “Right I’m going to improve my design skills” rarely works, you need to challenge yourself however you also need to be realistic. I’m not saying you should take on a huge blue-chip client and attempt to turn around a top class design as a challenge. Start small, push yourself and build upon your skills gradually.
If you’re inspired by a piece of design work then try and figure out how it’s done, dissect it, try and learn how to achieve a similar effect, but obviously don’t rip it off!
You’ll find that the more you practice achieving various effects the more comfortable you’ll feel about taking on more adventurous projects which in turn will contribute to improving your skills.
Course are a tricky one because you have no idea how beneficial they’re going to be until you’ve paid your money and sat through a few lessons.
I went on a 10 weeks, intermediate to advanced Photoshop course a good while back and in all honestly I didn’t learn anything that I hadn’t already picked up from elsewhere.
Perhaps there are better courses out there? If you’ve had a good experience leave a comment in the show notes.
On the other hand you typically get a certificate or something to show for you effort which can go on your CV.
As I say everybody learns in different ways but the most important think to remember when developing new skills to just do it, learn and apply, take on projects that allow you to push yourself push yourself, do something different and try something new. You may be surprised with the results.
