/Culture/ Plan the perfect site
10/06/2009 | Filed under Discover > Culture
We all want to hit the ground running when we start a new project, but a little forethought can reap huge dividends in the long run. Craig Grannell talks to experienced web developers about how an intelligent approach to planning can help save time, money and your sanity
Many web designers give scant regard to planning. Instead, they steam on in, basing a project’s cursory preparation on previous work, and hoping no problems will rudely smash them in the face along the way. But as Andy Budd, creative director of Clearleft, notes: “Planning is integral to almost every project – it’s like asking how a blueprint benefited a building. You can’t build a building without doing a blueprint, otherwise the result will be ineffective and fall down!”
He takes the architecture analogy further – it’s a helpful parallel to web design planning. “There’s a certain size of structure – say, a house extension – where rather than talk to an architect, you just get in a builder who’s built dozens of extensions. The end result should be fine, due to the relatively low complexity and small number of likely problems. But the more complex a system is and the more variables, features and functions it has, the greater the chance of something going wrong. If you want a new house, you consult an architect, but, unfortunately, most people on the web build websites like they’re knocking together an extension. They don’t have the necessary knowledge for planning and just hope what they create won’t fall down.”
Getting started
“No two sites are the same, and so there are no hard and fast rules when it comes to planning,” says Simon Crab, creative director at Lateral (lateral.net). “But a process of defining and agreeing with the client what the site’s objectives are is a good starting point. This agreement should cover ‘what they think success looks like’ – a tangible target everyone works towards.” It’s important at this stage to ensure that everyone’s on the same page, agreeing the parameters of the project. “Your defined objectives create a scope that must balance what’s required with what’s realistically achievable,” says Nicolas T Le Clainche, head of production at Delete. “Projects can slip or deliver an inappropriate result if all parties are not aligned – great project planning comes through collaboration underpinned with a great relationship. A thorough identification of the deliverables and their quality criteria enables us to determine the tasks, which are then estimated before being sequenced and scheduled.”
Part of the scope should be the planning itself. “Understanding what level of planning is needed for a particular project and who will be reading the plan is key,” argues Huey Nhan, production director at Digital Outlook, who reckons over-planning is a waste of time, but that under-planning can cause serious problems later. “Consider who you’re working with. If your decision-makers are marketing directors, they might not have the time or patience to trawl through reams of details, so make sure you highlight important things that need attention and input. Information design is just as important during planning as execution.”
Once the basis of the project is nailed down, some time should be spent doing competitive analysis. Most obviously, it pays to check out other sites that have been made within the industry sector. “You can learn a lot from the successes and failures of other sites, and so we always like to do some form of competitor research or survey,” says Budd. “However don’t let the term ‘competitor’ fool you, because the sites you choose could be in different geographic or business markets, just as long as the functionality is similar.” Such research also enables you to avoid the pitfall of both you and your client somehow missing something really obvious that should have gone onto the site you’re working on, but which features on all your competitors’ offerings.
User-defined
By this stage, you and your client should have a decent understanding of the website’s aims, but not everyone then stops and thinks who the website is really being created for. Although the client is paying you, it’s their clients – the end users – who are arguably the most important link in the chain. “It’s always a good idea to talk to those who’ll be using the final site, be that internal stakeholders, external customers or just members of the public,” says Budd. “As such, we like to set up interviews, sit in on focus groups, and where possible run ethnographic studies. This usually feeds into the creation of user personas that help guide the decision-making process.”
It’s important not to make too many assumptions prior to involving users. Siim Vips, CEO at Modera warns: “In many cases, analysis is done based on the know-how of the development company in co-operation with the client. If the knowledge is there, the site will be a success, but if not, it will be a disaster.” What you instead need to do is fully research the needs of the site’s potential users and then map those onto the needs of your clients. “If your users have needs that your client’s site isn’t fulfilling, you’re giving the competition a competitive advantage,” says Budd. “Similarly, if you’re trying to make your users do something they don’t want or need to do, they’ll lose confidence in your brand and patience in your site.” And with a high proportion of sites now hinging more than ever on user actions and content, users’ needs and effects on proceedings must increasingly be taken into account. “Designing social media projects brings new challenges to designers and information architects used to predefining the user environment,” explains Crab. “You must plan to deal with the aesthetic and functional management of unpredictable content and behaviour.”
Site maps
With an understanding of what the site’s meant for, who’s going to use it, and what people will be doing when they get there, you can start looking at the information that’s going to be provided, how it’s to be accessed and the basics of how it will be displayed. “To work out information architecture, a combination of site maps, process flows and user paths is used,” says Budd. Nhan argues that the first of those things is perhaps the most important tool for establishing how your information architecture will work – even for large sites. Some designers, he says, skip site maps these days, thinking complex sites are too difficult to represent in this manner. “What you should do in such situations is break your site map down into sections for review,” he says. “But never skip creating site maps, because they help you simplify the user experience by keeping perspective wide.”
Marc Peter, creative director at on-IDLE, starts site maps with paper sketches, before moving them to software for emailing to various stakeholders. “We also ensure all elements present on all pages, such as footers, logos, calls to action, and so on, are listed,” he explains. “This then provides you with a base idea of the types of template the site will need, such as ‘home’, ‘general content’, ‘contact’, and ‘listed items’, and these can subsequently be worked into wireframes that identify the structure of each template – and therefore, effectively, each page of the website.” Peter notes that if particular attention is paid at this stage of the planning process, it’s usually simple to avoid one of the most common errors on websites: bad navigation structures. “Often, you’ll find sites have visible and working top-level buttons, but at the third, fourth or fifth level, the design begins to fall apart and the browsing experience becomes cumbersome.”
Budd advocates workshops for making sense of this aspect of planning: “Stakeholder workshops are a good way of discovering business goals, prioritising functionality and setting a roadmap for success. As such, all of our projects are punctuated with various planning meetings and workshops that often involve brainstorming ideas based on the user research and personas, creating affinity maps or content hierarchies, and mapping out the interactions using rough paper prototypes or wireframes. As you can imagine, a lot of sticky notes are used during this process!”
Wireframes
Budd considers wireframes essential for working out interaction design and a key tool in an interaction designer’s toolbox, akin to a movie director’s storyboard or an architect’s blueprint. “They enable you to communicate ideas in a visual medium and check they make sense before any costly development or production commences,” he says. “Such things are cheap and it’s easy to make changes on paper or to quick HTML prototypes, but it’s harder and more expensive to do this once a site has been designed, programmed and implemented.”
Crab is also fond of using wireframes during planning, although Lateral doesn’t create them prior to working on initial graphic design components – instead, design-free wireframes are used in parallel with structure-free design concepts. “The idea is to communicate the structure and functional aspects of the site in tandem with an explanation of the design language – typography, colour and layout,” he explains. “We find it useful to show designs outside of structure during the planning process – this tends to avoid the ‘can you move that box over there a bit’ and ‘make the logo bigger’ type of feedback and forces clients to concentrate on the purely aesthetic or structural aspects of the design accordingly.”
Le Clainche works in a similar fashion, but suggests the balance between structural composition and aesthetic components in a plan can be tailored depending on the complexity of the site. “For larger builds, we translate requirements into a high-level site map, which is then refined into detailed section structures and wireframes,” he begins. “But for marketing communications, we take a more creative approach, using scamps and mood boards as a rich way to translate ideas and metaphors that are structured into a site map and more detailed wireframes.” This, he argues, helps bring the site to life for key project stakeholders and presents additional ideas or approaches. Additionally Miro Walker, CEO at Cognifide notes how extra visual design can be used when planning sites with certain clients: “Although graphic design can come relatively late in the planning process, if your wireframes are of a high quality and the client is able to engage with them, less experienced clients benefit from an earlier focus on design considerations, as this helps them understand the planned end result.”
Once a website’s goals, structure and information architecture are defined, planning ultimately shifts towards the final piece of the planning puzzle, technology, and there are numerous things to be mindful of. You must investigate likely browsers and platforms users will visit the site with and plan accordingly. For example, if the site is for a company intranet where employees are saddled with an ageing browser, the technology at your disposal and the standards you employ may differ from those used for an all-singing, all-dancing site for users at the cutting edge. It’s also important to fully understand any ramifications for hosting and performance, regardless of whether you’re directly involved with hosting the site or not. “You must also consider scale, load and performance – how many users there are, what the usage pattern is likely to be, and whether downtime for maintenance is acceptable,” says Walker.
The joy of tech
With many modern sites going beyond mere text and static imagery, planning must take into account rich media components. “Video, animation, image galleries and downloadable files all affect bandwidth costs and require a specific hosting environment to be able to cope with them,” says Peter. “For example, if the site is likely to use streaming video, you need to consider whether the site’s own server will host this or whether a third-party supplier will do so, because this has both a financial and technical implementation impact.”
Peter also notes that how data is managed changes the way a site has to be built, and such things need to be decided prior to touching a line of code, in order to minimise costs. “You need to figure out whether the site will use data from sources other than its own database, and how these sources will be integrated into the site technically and visually,” he says. “Furthermore, you must determine whether the site will be content-managed, and if so by whom, because this defines whether a publishing workflow is needed, thereby potentially altering the required hosting environment.” And even if the site is static, you still need to plan how updates are possibly going to be made in the future. Are you or the client going to deal with this? Are you and your client both on the same page about this, and if the client is to do the work, do they actually have the technical knowledge that’s required? Will you support them if they don’t?
Another technical consideration to plan for is that if the site is an overhaul rather than an entirely new entity, you need to decide how you’re going to transition everything over. Will there be a defined, pre-warned period of downtime, to give you a chance to move everything across, test everything and then make the site live again? And how will existing pages that users will have bookmarked (and, for that matter, search engines will have indexed) redirect to equivalent replacement ones?
Of course, even when all these considerations – from the initial understanding of the site’s aim through to where and how it will be hosted – are determined, your journey’s only just begun, because then it’s time to implement the plan and build the site. As Walker reminds us, “An important thing to consider is that a plan is a living document.” So don’t think you can tick a checkbox that says ‘complete plan’ at any time. After all, a plan needs room to evolve and adapt in the same way as the very best robust yet flexible website – one built from a good plan, naturally.
Bookmark with:
Comments
Bill Lowden / 11/06/2009 / 17:08 / http://www.delightfulwebdesign.net
Great food for thought! I'm currently considering a site redesign. Proper planning makes life a lot easier at redesign time. I guess I'll find out how well I planned the orginal site shortly.
Thanks for the post.
Creare Website Design / 12/06/2009 / 08:49 / http://www.crearedesign.co.uk
Oh, there's no denial of the importance of planning when it comes to Website Design. By communicating with your client effectively, it'll give you a base to work from and is a surefire way towards designing a website that they will be highly satisfied with.
Brant Schroeder / 15/06/2009 / 19:19 / http://www.magmag.biz
Nice article for beginner designers and veterans alike. So often we get caught up in making the product live as quickly as possible we miss the small steps that actually increase productivity. Sometime is seems like a lot of work to go through each of the steps listed above but in the long run it saves time and eliminates surprises. Then your end result is better and you have happier clientele.
James Godwin / 16/06/2009 / 07:27 / http://www.creativresponse.com
Good article, planing is key and I learnt the hard way!!
guchi / 20/06/2009 / 09:15 / http://delicious.com/mario64
have you guys thought of gee i dont know, increasing the default font size of the site?
Carl - Web Courses Bangkok / 26/06/2009 / 10:50 / http://www.webcoursesbangkok.com
Great post, and we will be using this on our Week 1 of Web Site Design Course
Nicola Elvin / 28/07/2009 / 15:48 / http://www.absolute-websites.com
Good article. I find it quite hard mixing structure with creativity, that's my problem. I can be creative but if rules are put on it, I tend to get designer's block!
Johann Valverde / 07/08/2009 / 01:41 / http://www.e-websitestudio.com
Nice article, I agree with James Godwin, Planing is the key !!!
