Design and Development Process

UX / UI design and website development process

Design and Website Development Process

When it comes to new projects I find it’s important to have a good process, so that together we can have a successful project. Below I’ve explained an example with a typical website project, but much of this can be applied to any typical design project of mine.

Project scope and brief

This is where we have in-depth conversations to start off with. We discuss the purpose of the project (website in this case), the goals (what we want to realistically achieve from the website), the users (those that the website is for and those updating the content on it) and functionality etc. From all these discussions we should be able to get a decent understanding of the brief and idea of the pages in the site for an initial sitemap.

Sometimes this section can be a consultation project in itself if you just want to get an understanding before moving forward with the project.

User experience research

This can be a project in itself. It’s worth checking out my blog series about UX Design here »

I like to start by discussing what you know about your current and potential future users. However, often the best way to really understand users is speak directly to them.

I like to create user personas early on so the project team and myself has users to visualise as we design and build out the project. It’s important not to limit yourself to these personas, as we need to consider accessibility and usability across the board, but this can still be very informative. We’ll also discuss competition, other businesses/companies similar to yours etc. and sites you like/dislike as well as your users.

Then comes user journey mapping. This is often adjusted based on project scope. We might discuss a few happy and unhappy user paths and sketch those out. From there it might be a case of some user interviews or analytics research to really understand the users flow through your website or app.

As we progress the design from simple wireframes to prototypes and cleaner design, we may do user testing throughout. This helps give the project direction and validate our decisions along the way. Doing this can really be the difference of a successful or unsuccessful project.

Design and more user testing

From our discussions, the knowledge of your users and research I’ll get started on simple wireframes and sitemaps. We may do user testing like card sorting to figure out a navigation system that makes sense to your users, this can be done simply through an online tool that we send out to your selected users.

The sitemap is a layout of pages on your website. Not to be confused with all the different bits of content that may feature on those pages.

A wireframe is a rough mockup of squares and sections to figure out the layout and where intended functionality will go.

Once we’re happy with that I’ll get into a bit more of the details in a colour design of the templates in the website. By templates I mean one example of each page in the site that looks ‘different’ to each other – this might mean that the ‘about page’ and ‘services page’ have the same template (layout, functionality, look and feel) but different content. Depending on the project scope, will depend on how many template pages I’ll produce.

Along the way I’ll transfer wireframes or designs to an online prototype tool so yourself and users can get a feel for the interactions and look and feel of the website or app. This is a great way to start to bring designs to life and enable some good testing to go on.

I generally create one specific design (with several page templates) for a website project. With all our discussions and user testing this should meet the requirements of both you and your users. This is so we can keep budgets down and find a single design that suits your needs rather than spending more time and money on multiple designs that may not match you project brief and work best for your user base.

Development

Once you’re happy with the design and can sign it off, then I begin development. Ideally we don’t have any major changes at this point, design and functionality have been agreed on. Colours may be slightly tweaked and content added later, but functionality and templates will reflect the design we agreed on.

I’ll develop the site using WordPress, which means you’ll get a custom designed and development website front-end with a very user friendly content management system that makes it easy for you to edit your content. WordPress is widely used, so updates and any problems you may have in the future can solved by myself or one of the many WordPress developers all around the world (there are a lot of them).

Ideally throughout the development and design process we can validate aspects with direct testing and as always I’ll be making sure they match closely across various devices and internet browsers.

Content

Ideally during the design stage (or earlier) you’ll have an idea of your content, you may just need to edit it or find a few photographs, videos etc. Before I finish development it is good to have the content ready. Then we can pop that into the website and check it all out before it goes live.

Going Live

I can help you purchase a domain name and website hosting if you don’t already have them. However, you will have complete control over these two things in terms of access and payments. I do this to be transparent. Once you’re website goes live it is all yours. You can do with it as you wish and if for some reason I’m unavailable in the future and you need something, then you have complete control over all your website access details so you can contact someone else to help you if need be.

Having a good domain and website hosting can mean a fast, smooth website. Many web hosting companies have excellent customer service and are worth paying a little be extra to get top quality. It would be a pity to have such a great website that is running at snails pace because you’ve got a cheap slow website host.

Once the website is live, with a bit of training (I won’t leave you in the lurch) you can further edit content whenever you need to. It’s all yours now!