How to run a web project remotely: Design and build.
This is the third and final part in our series on how to run a web project remotely. If you missed parts one or two, you can find out how to select a web design agency for a website project remotely and how to run the discovery phase of a web development project remotely.
Lockdown or not, there is no need for physical meetings in a web design project. In the final part of this series, we’ll explore how to run the design and build phase of a website design project from the comfort of your desk.
You’re not the one designing and building, so you don’t need to concern yourself with HTML or CSS, but there are some other things you need to consider.
If you are working with a web design agency for your website redesign, they should be using some system to communicate dates and tasks. If this project is being run in house, then you’ll need a system to communicate with your internal team.
Depending on the chosen project methodology, you may have weekly sprints (complete with sprint planning sessions and a task backlog) or a series of milestones and tasks. Whichever approach is chosen, you need to understand the project progress and what is expected of you and your team. Hopefully, the agency will use an online tool such as Jira, Basecamp or Trello to keep track of progress and tasks. The project manager should also keep you up to date with regular emails or calls. It is important to know in advance when your involvement is required. It could be on a weekly sprint planning call or only at set times. Content generation, sign offs, and acceptance testing all require a fair bit of time, so you need to know your own deadlines so you can make sure you allocate enough of your time to the project.
There is no need for physical meetings for these updates, weekly emails, updates via the pm software, calls or video calls will be fine.
The Web Design.
We’ve reached the actual design of the website!
In the old days, design agencies would present ideas on boards, and I still see some rivals carrying large artboards to pitches. It never made any sense to me to print out designs that have been made exclusively for screens. For me, the idea is to present ideas in a browser on a screen – as close as possible to the end-user experience. We used to show designs in a mockup of a browser window, but nowadays we use web-based previewing tools that use the browser. These tools allow you to share designs via the browser, closely replicating the final user experience, and allow for limited previewing of animations and in-place commenting. We currently use Adobe XD but other popular tools include Invision and Figma.
When considering designs and design feedback, it is important to take the key internal stakeholders on the same journey to prevent objections later. So, a meeting to discuss the designs, the rationale and to gather initial feedback is a good idea.
We usually meet to present the designs to the client but we have found that this can just as easily be done via a screen share. In some ways, this is actually better as it can be easier for people to view them on their own screens rather than on a large tv at the other end of a meeting room.
We have also found that recording a video of us talking through the designs allows the presentation to be shared to those that couldn’t make the presentation. It is important to gather feedback from everyone, discuss and discard contradictory points before feeding back to the designer. It is also important to be clear internally who has the final say and be realistic about if this is the CEO or your boss (despite what they might have said when they gave you the project).
Whether you are working agilely and iterating the design and build, or you are designing everything upfront, screen shares and browser preview tools should enable an entirely virtual process.
Check out our 7 web design trends for 2020.
Content, content, content.
While developers are building templates and configuring CMS components, content creators need to be generating content.
Hopefully, your content audit will have highlighted what needs to be thrown away, what needs to be updated and what can be kept. It’s likely there will be a fair bit of writing to do. You and your team have your day jobs to do and writing or updating web copy is surprisingly time-consuming. We recommend external copy editors because they are faster, usually better writers and they have the time. If you’re using a tool like Gather Content, then pages can be assigned to internal and external writers with due dates and an approval process. Again, this process can be handled entirely online.
Photography can be commissioned and delivered remotely, however it does require a photographer to interact with people (unless you need product shots).
There are some alternatives to commissioning a photographer.
- Stock photography – an obvious answer is stock photos. This can be a good option but you need to very carefully select the photos. You need to avoid cliches, images that are overused and passing off models as your team.
- Illustrations – SVG illustrations and animations can give a modern feel, load much faster than photos and require no photographer.
- Team photos – rather than staged portraits consider using people’s Instagram profile picture, it is more personal and adds personality.
Don’t underestimate the time it takes to generate copy and images!
Testing your new website.
Once the new site is built and the content has been added/migrated, there will be a lot of testing to do before it goes live. This would include web standards, accessibility, browser compatibility, devices, SEO, performance, usability and security. Your agency should do most of this but you’ll probably want to do your own user acceptance testing (UAT).
We tackle the build in a component orientated way, testing as we go. This means that each component is tested for web standards, accessibility, browser compatibility and security as it is built, along with UAT by our PMs. This means that we catch issues early. Once the site is in preview and content is migrated we do a complete set of testing again. After this, we open up to the client for UAT.
What should you be testing for?
If your agency or your devs are testing for all this stuff, what should you be doing? Hopefully, you trust them enough not to run your own set of tests on those things.
Your UAT should focus on the end-user – customers and CMS users.
The customer experience.
Put yourselves in the shoes of a customer, is anything odd? Do the journeys feel wrong? Are there discrepancies between what was promised and what is delivered? These issues could be bugs however they could also be that the ideas sounded good on paper but don’t work in reality. Even if it costs you to put these issues right, it’s better to find out and fix than launch with a site that doesn’t serve the end-users’ needs.
The CMS user experience.
You should also check the usability of the CMS – have the devs done anything strange here? Are there tasks that are really convoluted? Are the help text or labels worldly strangely? Do things work contrary to how you expect? You don’t want to live with a clunky and odd system for years to come. Better to fix this now.
Remote reporting of issues.
Once again, there is no need for any physical meetings to discuss issues. You can obviously report issues via email but it is often good to show the issue in action. You can do this through a screen share but it might be quicker for everyone if you use a screen capture tool. On MacOS you can do this via Quicktime and on Windows 10 you can do it via the GameBar (if you have this installed). There are many 3rd party tools, including Chrome extensions which make the process easy.
It’s really important to dedicate time to testing, even if the agency has the very best testing approach, it can be hard to see things from the perspective of an end-user. That’s why we have UAT.
Conclusion: you can run a web design project remotely.
I hope you’ve found this series useful and have seen that there is nothing holding you back from running that web design project you’ve been putting off!