Design, Code and technology, Strategy and marketing, News and culture
The Erskine redesign: Design development
The previous part of this little series saw us fighting through some motivation/direction problems, and the realisation that even non-client projects need managing and scoping properly, right from the word go. We also found our ‘hell yeah’ design direction (as I call it); a visual approach that would give us a decent platform from which to design the actual website pages effectively.
Now we needed to start designing our actual pages. As with most projects we work on (both internally and for clients) we started with some really simple wireframes to define content hierarchy. As you can see these are really simple; we knew what the site needed to do, and we knew we wanted it to achieve those goals in the simplest way possible.
After those wireframes had been through a repeating process of print, scribble, discuss, iterate, we began to think about the actual visuals of the pages.
You’ll notice in the following screenshots the absence of any navigation, branding or traditional footer areas ? we wanted to get our content designed properly before getting hung up on any site-wide detail.
We started with the Projects section, as we thought this the most important part to get right in order to achieve our goals.
We spent quite a bit of time working on concepts like these; where the page was primarily focused on the case studies (which at the time were part of the same section) with a projects browse area below that attempted to appeal to everyone from everywhere by using Client, Industry and Type selector categories.
We even built a full EE prototype of this last one before realising it was asking too much of potential clients. As I’ve already mentioned we wanted things as simple as possible, so we ended up separating out the Case Studies into a new section (and creating relationships between Projects and Case Studies) and drastically simplifying the Projects main page into a more traditional see-like-click interface.
I should add as a slight aside that from the start we didn’t want to use screenshots of our work for this page. I’ve never seen a decent example of a 200 pixel wide screenshot that was able to effectively sell a project, so we created little ‘adverts’ for each project that ultimately are a lot more interesting, and would increase click-throughs to the project-detail page.
Knowing when to stop
This last screenshot brings me onto an important point. Because this was an internal project, there was effectively no time or cost limit, and as mentioned in my previous post, things can slip very easily. It’s therefore very important to know when to stop.
Take the above example of our Projects page for example. I wasn’t 100% happy with the layout and detail of the page, but I knew there was no way for me to spend weeks and weeks iterating it to a point where I was 100% happy. The hardest person for a designer to please is themselves, and often a designer must swallow personal irritations with their work in order to keep the project moving.
As I’ll talk about in a few articles time, there’s always opportunity to exercise your perfectionism after launch; such is the beauty of designing editable things like websites.
Until next time
That’s all for today folks, but as an almost-apology for delivering this installment so tardily, here’s a few bonus screenshots for your perusal. Hopefully they give a further idea of how the site developed visually over a period of time.
Published: by Greg Wood
Sorry, comments are now closed for this entry.
7 Comments
The 'adverts’ idea is brilliant, though I’m curious how your team reconciled the separation of Case Studies and Projects. What I mean to say is, from a client perspective, Projects might be where to judge your work and Case Studies might be white-papers or something boring-like.
But really, the cases have this fantastic meaty content that shows Erskine off a bit better if more heavy-handed. So I’m interested why potential clients are led from Home into a project page instead of a case study. Seems like pulling a punch.
Looking forward to the remainder of this series.
I like the reference to “see-like-click interface”, i’m just finished re-designing my-site and agree with all your points in both articles. I’m very interested to see what you say about the “opportunity to exercise your perfectionism after launch” as I find myself continuously tinkering with my site
Inspiring reading! When do you plan to post the remainder of this series? Looking forward…
Mikael, we’re currently redesigning and rebuilding Erskine Labs, so these posts have taken a back seat over the last few months.
I do plan to finish the series though, you may just have to be a little patient!
Thanks for your comments.
OK – still looking forward though!
Hi Greg, looking forward to seeing the re-design! When do you think it will be going live?
very inspirational! and you make a lot of good points. I need to crackdown and make my site all it can be…!
I am new to the business so my portfolio is not nearly as impressive as yours – but i still encounter the same problems you do and find all your creativity very inspirational !
Thank you