Our ideal workflow for designing new client websites
Every project is unique and the depth and scope depends on the budget, the requirements, and, how willing the client is to fully engage with the process.
In any case, this is typically the process we strive to go through when developing a new website.
Defining the brief
First up, we work with our client to define the brief. It is our goal to ensure we fully understand their vision, their business (and business goals), the people behind the business, and their customers and potential market. We also want to make sure we’re excited and inspired by the project so we can be confident our team will enjoy working on it — and, ultimately, be able to deliver great value!
Establishing a budget
Once the brief is defined, we work up a quote for the project. We never start a project without a quote! As with every step of the process, we treat the quoting phase as an open dialogue with our clients while we work with them to establish the ideal budget — it needs to deliver great value to their business and provide the best opportunity for a quality return on their investment; but it also needs to give our team the scope to put the required time and energy into the project so we can deliver something awesome! It can be a fine balance to establish an ideal budget but we need sign-off from our clients so everyone knows what to expect in terms of development and management costs and so our team knows the parameters they need to work within.
Research and discovery
This is an important step to ensure we’re going to deliver the best site possible that will appeal to our client’s ideal customers — and blast the competitors out of the water! We strongly encourage our clients to do their own research and it helps us a lot if we are provided with direction; however, in order to fully understand the project, the business, the people behind it, and the market, we still need to go out and do our own research and discovery. (If you haven’t already got a copy, go get Just Enough Research by Erika Hall.)
Before we begin the visuals or any development, we need to have a plan so we know exactly what we are working with and what features we may need to develop. We need to have a good understanding of what content will be coming and how it will all fit and work together. (A Book Apart has two good books on this, too: Content Strategy for Mobile by Karen McGrane and The Elements of Content Strategy by Erin Kissane.)
It is so important to design a site around the content rather than to design and build the site and then jam in all the content at the end. Some of our clients will produce and copy-edit all the content themselves, some will draft the content, leaving it to us to edit and polish, and some will leave the entire content-creation process up to our team. What works best depends on each project and the skills, enthusiasm and inspiration of the client.
Domain and email setup
We find it best to obtain domain login details from our client’s current provider (or set up domains if new) early on in the project to avoid any delays later on. If the client already has email set up, we will likely simply obtain access to the DNS settings so we can ensure everything is set up correctly for the new site. If the client needs new email addresses, we will get them up and running well before the site is ready to go live. (We generally do this on Google Apps for Work.) We then test and ensure the client can access their new email account and that they are comfortable with the setup.
Designing the visual mockups
We now pull everything together and apply what we’ve established so far in terms of the desired look-and-feel, functionality, usability, and overall aesthetic. This is obviously an important phase and it’s a good time to focus on the details while also thinking about the big picture so we can make the job of coding up the templates as easy and efficient as possible. During the design phase, we strive to carefully consider how the layout, usability (and functionality) might change at different screen sizes. We generally start with one resolution (whether it’s best to go mobile-first or not is debatable — at Lucid, we tend to design for desktop first as it’s easier to see the big picture and overall feel). Ultimately, we will want to have all main templates mocked up in desktop, laptop, tablet and mobile versions. With smaller projects, it often doesn’t make sense to do pixel-perfect mockups of every single screen at every resolution but we will still create a basic template to work to. (As a little aside, our team designs for the web almost exclusively in InDesign — a bit of background on this here.)
Here we start inputting content such as static pages, blog posts, products etc. (enough to give the devs some real content to work with when they start coding). Any good website platform or CMS (and certainly the ones we use most such as Shopify and Siteleaf) will enable us to keep a clear separation between design, functionality and content. So, even if we need to drastically change the design and/or functionality (or even deploy a totally new look-and-feel later on), we shouldn’t need to redo the content. We recommend keeping all design out of the content if possible. This is especially important when it comes to optimising for mobile.
Beginning the build
Refining and optimising
As the site nears completion, we start user-testing, cross-browser and cross-device testing, and we tidy up and polish the functionality and usability — continuing to add content and tweaking if needed to accommodate any unforeseen issues as the content fills out.
First-pass SEO work
Before the site goes live, we check wording, headings, calls-to-action, navigation elements and links. This is an ongoing task and we advise clients to budget for doing this on a regular basis if being found organically in search engines is important for the success of their site.
Setting up optimisation and analytics tools
We check that Google Analytics and Google Webmaster Tools are installed and functioning properly and that any conversion tracking code snippets are installed on the final page of the checkout process for the likes of Google AdWords.
Product order and email testing
Now is the time to put through test orders and carefully check pricing, shipping rates etc. Important note: If the site is set up with a drop-shipper, we need to ensure that the provider is well aware these are dummy orders so they’re not fulfilled (unless we want to test the fulfillment process too!). We will also test all email notifications and tweak and tidy up as needed.
If everything is working correctly and the site is ready to go live, we do a final check over of content, headings, pricing etc. to ensure there are no loose ends and that usability and functionality are smooth.
Pointing the DNS records
Most services now just want the CNAME record pointing at the site — for the root domain, we recommend using a service like wwwizer.com.
Keeping an eye on the site
It can take up to 72 hours for domains to switch over so we try to keep an eye on the domain and check everything over carefully as soon as the site goes live. We also check Google Analytics, test tracking and conversion codes etc. and ensure everything is set up correctly in Google Webmaster Tools.
Checking in with our client
Once we are all up and running, we check in with our client to ensure everything is working correctly and they are happy.
Billing for the project
We typically charge a deposit for any new project and we progress-bill each month during the process. Upon completion of the project, we send the final bill — including any recurring invoices for hosting, email, ongoing support, SEO work etc.
Because the web is a fluid, dynamic, constantly-evolving medium, we are still around to guide and assist as needed once the site is live. We often set up a recurring monthly job to keep on top of tweaks, SEO work and any minor changes or adjustments that may come up. Ultimately, it is our goal to ensure we continue adding value to our clients as their websites evolve and their businesses develop and grow. Regardless, we try to touch base with our clients from time-to-time to see how everything is going so they’re no left in the lurch — even if they have a limited ongoing budget for improvements.
We are huge fans of all the books by A Book Apart — they’re all excellent! But, if you read only one of their books, make sure you read Design is a Job by Mike Monteiro. It’s invaluable if you’re a client or are working with clients in a creative capacity.