I recently wrote about what to consider when planning a website project and the different types of website you could invest in for your brand or business, but what should you expect when getting a new website of the ground? Here I'll run through the stages of developing a website to give you more insight into what goes into planning, designing and building a digital product.

BRIEF & DEFINING GOALS

As I mentioned in the article linked above, creating the brief so that everyone working on the project understands what's involved ensures everyone is on the same page and understands the end goal. Having a clear brief will help to guide a web project in the right direction and make sure it works towards the goals of the business or brand, making it a worthwhile investment of time in the early stages. Your brief should give as much information as possible about who will be using the website (both users and staff, if you’re planning a content managed or e-commerce site) and how its success can be measured. Creating a brief doesn’t need to be an intimidating task either: if you are unsure of the finer details, just provide a starting point for your designer or developer, as more often than not they will work with you to clearly scope out a project so that you are getting the best solution to your problem, resulting in the most in-depth, well-understood brief.

RESEARCH, USER STORIES & PERSONAS

Once you have a clear picture of what the website needs to do, we can start to research competitors, and the wider market to help create a product that is unique and will stand out from the crowd. Alongside this, you'll also need to provide analysis of the end user – the audience you want to target and those that will visit your website. Through questionnaires, polls and interviews, as well as existing website analytics (if you are redesigning a website), we can build up a picture of who uses your site and develop key personas. We create personas as a kind of safety check which we can refer back to when designing to make sure what we are creating is relevant. Alongside these, user stories help us to understand how a user would achieve a task on a website. For example, “User A would like to filter products by colour” or “User B would like to log into her account”. These scenarios can then be broken down into clear stages so that we can design every stage of the interaction, making sure users get all the information they need and that the website responds in the correct way. If User A selects a colour with no products associated what is the best way to let them know and how can you encourage them to continue shopping? The purpose of the research stage is to understand the best way to solve a user’s problem, whether providing a way for them to get in contact to request a service or by making a purchase as easy as possible.

CONTENT STRATEGY & INFORMATION ARCHITECTURE

Depending on the type of website you are creating, you may need to develop a content strategy as part of the planning. This involves mapping out what type of content you plan on having on your site. For example, if you run an e-commerce site selling fitness equipment, you could have a section to host training videos, which could feature your products, giving them even more exposure if you share them on social media; or create a section that includes a monthly workout routine that users could follow. Generating new and unique content for your site will help to increase your visibility and provide a talking point for your brand or business, as well as a USP among your competitor set. Knowing early on in the process what kind of content you plan on using means you can tailor the design of the website to make it more appealing or accessible to your users.

The way that this content is structured on your site is known as the 'information architecture'. A small site may only need a simple hierarchy that forms the main navigation, but if you are creating a large site with lots of different topics or content types, it needs to be organised in a logical way so that users can quickly and easily find what they are looking for. How this content is grouped together dictates a lot of how the site is designed and built. To get an idea of how important it is, look at the navigation menus on large websites such as ASOS, Amazon or news sites like The New York Times or The Guardian. A lot of time and effort goes into creating the right categories and groups to make browsing as easy as possible.

WIREFRAMES & PROTOTYPES

'Wireframes' are the skeleton on which you build a website and where we take all of our research and start to add some structure. Initial wireframes can be as basic (low fidelity) as a quick sketch, giving a very quick visual overview of the layout of the content and how a user goes from one section to another. As they develop (high fidelity), we check them against the user stories to make sure the user is given everything they need. A wireframe for an e-commerce site, for example, will always have key elements around how quickly and easily a product can be added to the basket and ensuring you can access the basket from each page. Using wireframes means you can focus on getting the functionality right before spending time designing the page, which is a lot more time consuming (and costly) to fix later down the line.

During the wireframing, we look at how the website will work across multiple devices so that users get a consistent experience regardless of whether they are using a mobile, tablet or desktop device. We look at how the content can be prioritised so that the available screen space is used effectively.

Prototypes develop the wireframes further. Using tools like Invison means we can create working mock ups of a site without spending time coding. Prototyping also allows us to test if an idea will work, or spot issues that could cause problems for the user.

DESIGN

Once a solid structure has been developed, we design the interface of the website – how it will look and react. This is where the project starts to come to life. The design should be user friendly, making it easy to navigate and interact with as well as being on brand to work as part of your visual identity. Alongside the static design of the site, we also look at how different elements can be animated or made more dynamic to give users feedback when they interact with the site as well simply to make the site more visually appealing.

DEVELOPMENT

Once you’re happy with the designs, the front end can be built using HTML, CSS and JQuery. A well built website will work across different devices (desktop, mobile and tablet) as well as different browsers (Internet Explorer displays the same code differently to Apple Safari or Google Chrome, for example). If you are creating a content managed site, this will involve back end development as well. This could vary from creating php templates (for sites like Wordpress) right through to custom frameworks for apps (using coding languages, such as Laravel to build the software that runs the content management system). A developer will also need to set up a server to make sure your domain name points to the right place and that the right software to run the site is installed on it.

TESTING & LAUNCH

With the site up and running it will need to be tested on as many devices as possible to make sure it is robust, reliable and ready for launch. You will also need to add your content in, which can throw up a few last minute issues, such as styling tweaks to make the content look its best. Spend time testing the site with different content. For example, long or short articles, or articles with lots of images, could change the look and structure of a page drastically.

Usually a soft launch is the best plan when releasing a new site. Try seeding it out to a limited number of users initially and ask for feedback. This may help highlight problems that have been overlooked. Once you’re happy with everything and confident the site is working correctly it’s time to make noise about your new site. Look to use social media to drive traffic, but don’t be 'spammy'. Make sure you are engaging your users by posting content that is interesting or relevant. Also, make sure you keep on top of your social channels as word of mouth spreads quickly and you could get some really positive conversations started with your users or customers.  If you’re selling online, you could look to offer a discount or promotion to build excitement.

ITERATE

The last stage of a web design is 'iteration', (although this does happen at all stages of the process). This is the process of assessing which areas are working well and which need improvement. The benefit of working with a website is that it is relatively flexible to build upon and develop. If an issue arises, we can look at solutions and implement them with minimal disruption. For example, if you have lots of traffic, but the sales are still low we can work through the checkout process and optimise this to improve outcomes. Working in small sprints means we can optimise a website continually to ensure it is always working towards your business goals.