Recently we posted a rough guide to what kind of work goes into creating your website. It’s not all just website building – each project takes hours of planning, design, review, testing, writing, and preparation for going live.
We want to now go into more detail about how we create a high-end website. To illustrate this process we’ll use our very own website, upgraded in July-August 2016. Projects costing $20,000+ with a focus on high-level design will go through this process. Typically, this will include businesses concerned with branding, providing a high level user experience, and/or aiming at the high-quality end of the market.
We’ll discuss in detail the process we undertook to re-design and build the new FutureLab website. We hope it will serve as a guide to understand more about high-end website design and the steps involved from planning to launch of a mid to high-range website.
Creative – Planning
Before any work can begin, we’ll sit down and brainstorm the look, feel and purpose of the new website. We looked at the current FutureLab branding, the way that the website was set out, and what the website was designed to do.
Objectives
It’s crucial to answer a few questions about the website, your business and what you hope to achieve with building or redesigning a website:
What do you want to achieve with your website rebuild?
What are the key actions you want users to take on the site?
How do you see the website returning your investment?
Our own answers to these questions look something like this: the website needs to advertise our brand and of course will act as the opening number in our ‘portfolio’, so it needs to be sharp. We want website users to browse our site, gather any information they seek and then easily contact us. This is the main online ‘face’ of our business so is the first point of contact for nearly all of our new business.
Tasks
Looking at the existing website, we noted the following items that needed to change:
- The website was really wordy. We needed a design with more impact, and less chat.
- The structure had become overly complicated. As we added important features and services to the website, the Service section had become large with too many drilldown levels.
- The design needed to be updated. As we’d grown over the years, so our focus, target market and top services had also changed.
Outcomes
- Align our website with our brand which has changed over the years
- Re-organise information and improve user experience on the site
- Make contacting us easier
- Show we are up to date
Explanation
Any website build needs to begin with looking at the current website (if any), and what you are trying to improve upon and achieve with the build. The target audience needs to be determined, and the website designed to give each type of user the best possible experience. This doesn’t have to be a complicated procedure. For example, our target audience would be small-medium business owners, marketing executives for medium-large firms, and ad agency directors. Each type of user is looking for a slightly different set of requirements; the purpose of our website is to tell each what they need to know, and provide an easy way to contact us and continue the conversation. Most businesses should find it straightforward to work out who their customers are and the key information they would search for online.
Creative – Design Concepts
Once the key objectives have been identified, the first design work can begin. The design is key to the success of the website, for two reasons: it should immediately showcase your brand, and it should lead users to take a valued action on the site. Whether the purpose of your website is to sell products, raise your brand profile, show an appointment calendar, or collect application forms, the design needs to streamline this process. The valued action may therefore be to buy a product, view your contact information, book an appointment, or fill out an application form.
Objectives
- Here are the objectives that our website design need to achieve:
- Provide an easy, barrier-free way to contact FutureLab
- Showcase our design and development work
- Provide contact and location details easily on mobile
- Promote more visual content over text content
Tasks
Using the information highlighted in the planning phase, we created a scope for the website, including requirements, purpose, objectives, and design ideas. We discussed the objectives, brand values and our services with the design team. We made clear what actions were valuable to us as a business on the website, and also discussed our target market and approach.
Outcomes
This part of the process produces the website wireframe. Website wireframes do not contain any visual design elements. They simply outline the structure of the website and the key information needed on each page. They are a basis on which to add visual and creative elements. The wireframe designs reduced the number of tabs on the main menu and added a tab ‘free consultation’ to the main menu bar. The first screen states clearly what our services are and includes examples of our work. On mobile, a click-to-call feature will be included so that website visitors can get in touch immediately.
Creative – Website Design
Once the wireframe has been outlined, we have a good idea of what is needed on the site. The next layer is to actually produce the visual part of the design – colouring in the basic structure and taking the concept through to a visual design.
Objectives
- The ‘wow’ factor – immediately impress with modern, even futuristic design
- First visual showcase of the work we can achieve for our own clients
- Easy to view, appealing visually
- Using our brand colours
Tasks
We provided the designer with our brand guidelines – brand colours, fonts, logo. By this point our branding and high-level approach were well-outlined already.
Outcomes
The design used our traditional colours of pink, light blue and grey/black and created dramatic geometric shapes and sharp outlines for the design. The design is technically advanced and forward-looking while retaining our branding roots. The design creates an experience for the user as they scroll through the homepage, with animated graphics, clearly delineated sections and plenty of visual elements to be inspired by. We provided feedback and refined the designs until we were satisfied and ready to start the build.
Development – Building
The website development is when you see all your planning and design efforts so far finally come to life online. As a client you will have already seen the homepage design and possibly other page designs as well, depending on the project. Once you have signed off on these designs, development work will begin. During the website development, we typically have 3 team members working on your website – a backend developer, a frontend developer, and a project manager, who will be your point of contact through the project. In-house, we ran regular meetings to check progress on our website and test as new features were completed. The copywriter also worked with the developer to ensure the text content was represented and animated in the correct way.
Objectives
- Ensure that the design is accurately brought to life.
- Respond to any development issues as they arise in a timely manner
Tasks
The tasks at this stage involve the development team thinking logically through the design and building coding to implement the design into a working model.
Outcomes
Part of the difficulty of web development can be working out how to turn designs into real, working models. What may seem simple to design can require many hours and creative thinking to implement in coding. In particular, the animated section of the homepage under ‘Ingredients for success’ took many hours to develop as there are so many custom elements here.
Development – Review
Throughout development on a complex project, we’ll be meeting regularly to review the work completed so far. However, we’ll also have a major review once the first stage of development is done and there is a working version of the website ready to inspect.
Objectives
- Ensure the website functions and looks as expected
Tasks
At this stage, the designer will be able to review the website and ensure their designs have been accurately brought to life. We will also test each function of the site to ensure it works as expected. When producing websites for clients, this is when the website will be sent to the client for review and for their feedback.
Outcomes
We have a couple of review rounds, with designers or clients providing feedback and the developers making small changes to accommodate the feedback. In our case, we made adjustments to the animation on the homepage and reviewed for typos and errors in the content and design.
Going Live
Once all parties are happy and we are satisfied that key objectives, design concepts, website functionality and the visual design requirements have all been met, we are ready to go live. This process takes up to 1 hour. Before going live we go through a final checklist to ensure that server, emails, SEO and website settings are all correct.
Website Design & Development – A Summary
A website project is similar to any other construction project – an awful lot of planning and concept design goes in before the first brick is laid. Then, during the build, unforeseen complications may arise or changes of mind can happen. That’s why a solid foundation (good planning, signed-off designs, high quality code) can make all the difference.
This is especially important in higher-end projects which involve specialised development or highly creative design. The custom coding involved requires good planning and an agile response to issues as they arise. If the concepts and visual designs are completed properly and signed-off, unforeseen issues should be kept to a minimum.
The process described above took 4 months from initial ideas to going live. During this time, we were also completing projects for clients which of course took precedence. We would expect the same process for a (prepared and efficient) client to take between 10-12 weeks, or faster for urgent projects.
If you have any queries about the planning, design and development process that goes into creating a branding website, please don’t hesitate to get in touch. You can find our details here.
