Ordering a custom PSD to WordPress development project can seem easy, but if you’re the kind of person who wants it done correctly the first time you need to pay attention to the requirements management of it.
The term “Requirements Management” is not exactly mouth watering to most. When choosing between learning how it’s done and taking the consequences of executing it poorly, many choose the latter – but it doesn’t have to be that way!
I adore this following quote about planning, I think it illustrates my point perfectly:
Planning is an unnatural process; it is much more fun to do something. And the nicest thing about not planning is that failure comes as a complete surprise rather than being preceded by a period of worry and depression. – John Harvey Jones, English businessman
But everything doesn’t have to be planned, just like everything doesn’t need to be stated as a requirement. Making assumptions about what is common sense is natural and necessary.
When we receive requirements on a WordPress build (we do PSD to WordPress for digital agencies), we sometimes get only the PSDs and we have to figure out the rest. That’s a bit extreme, and not the best way to go about it.
But on the other hand, we cannot expect our partners to write detailed instructions for every simple element on their sites. Instead, there’s a constant quest for the perfect middle ground.
Let’s embark on this adventure together. I’ll show you some real examples on requirements management for PSD to WordPress so you can dodge that 4-week MBA evening course.
The basics – the PSD to WordPress handover
There are many ways to specify a website, and we’ve seen a fair share of them. However, there are some ingredients that are key to sending a work order for building a website from design files.
01. The design files
The designs are the key ingredients for specifying a site. While it’s possible to give a ballpark estimate based on an existing site or wireframes, designs are needed to build a site or make a reliable estimate.
There’s generally no doubt about the need for this requirement, but there are two typical cases when it can fail.
Case 1: Premium theme sites
Some smaller agencies are used to working without design files at all before starting to build. Instead, they choose a premium theme and start to add images and content, customizing it as they go. For someone who has both designer and developer skills, this could be a viable option. But when outsourcing the work to a development team, it’s set up for disappointment.
A developer is not a designer, and there are many design choices involved even if the site should follow the general style of the theme so don’t try to outsource this type of work unless the agency or freelancer is also good at design.
Case 2: Change requests
After a site has been built by a subcontractor, there’s always a feedback stage where comments can be given on how the site turned out. When this feedback is design related, make sure to provide updated design files or give very detailed instructions.
A comment like “move the button higher” will surely lead to a new round of feedback saying either “not that high”, “higher” or “not that button, the other one”.
Instead, figure out how much you want to change it and say: “change the top margin of button X from 30px to 15px” or provide an updated design file or screenshot that shows just that.
We use Userback and Usersnap plugins that allow our partners to make screenshots with comments right in the browser when they review their sites. Their feedback is automatically added as tickets on their project boards in Trello for our developers to address. (Read more recommendations in our post about working with feedback when white labeling projects to an agency).
02. Animations
Animations are difficult to explain in plain design files or text. Therefore, we recommend finding an animation that you like and linking to it for reference in the specifications. There are great libraries online for this where you can find inspiration. Check out this on for hover effects on buttons, and this one for hover effects on images for instance.
03. Flexibility for new content
A design file may contain the final copy that should go on the website, or it may be preliminary content, or just Lorem Ipsum all over.
Regardless of which, the content on a site may evolve over time and the website should be able to handle that. Making use of the admin dashboard in WordPress to make elements editable is a given, but how much change do you anticipate?
The most common issue is when designs contain short texts that fit neatly into boxes, but when you add the real text or the real amount of team members, it’s not obvious how the rest of the text should be arranged.
A good way to avoid this problem is to display the extremes of what you anticipate already in the designs.
04. Advanced functionality
If you have a map, calendar, slider, form, webshop, or some other interactive feature on the site, you should always specify how you want it to work. A short note could be enough, but sometimes you need a whole page to explain the steps of the advanced booking form you want to create.
Ask yourself, is this functionality unique or has it been done before? Most likely, after some google searches you’ll find it’s been done before and there is a solution or best practice in place for it. By using these, you’ll probably cover over 80% of your customer’s needs and you can just refer your developer to that resource in the specifications.
If you need to write up a description yourself, try showing the specification to a friend and let them paraphrase how it should work or run a test case on the whiteboard. That should help you understand what you take for granted that’s not obvious to everyone else.
05. Use of plugins
If you’re used to working with a particular set of plugins and you help maintain many websites for your clients, you probably want your sites to consistently use these plugins.
Tell the developer what your preferences are, and if you would like to have some functionality custom coded to allow customizations or if you’re good with the standard flexibility of an existing plugin.
If you want your slider to use a fading effect, make sure your developer knows since it can take time to implement such a customization if the chosen plugin doesn’t support it out of the box.
06. A custom theme or a turnkey website?
The main reason to pay a subcontractor for PSD to WordPress services is to delegate the bulk of the coding work. Besides that, agencies have different ideas about what they want to do themselves and what they want to white label.
On one end of the spectrum, there are those who want a custom theme developed, but then work out the tweaks to the code themselves, as well as add content and set up all SEO and page speed optimizations.
On the other end, there are those who want everything developed, all content added, all settings included and then have the website migrated to live.
When asking for a quote and when sending the assets and instructions, make sure that your development partner understands how much you want to be included. Especially if you know that you’ll be working on finalizing content in parallel with the development.
07. Delivery
Sites can be delivered in different ways. A common one, especially for those agencies that want to do the final touches themselves, is to use the Duplicator or BackupBuddy plugin and send the whole site via Google Drive or Dropbox to the agency.
Alternatively, it can be migrated over to a development server of choice or to a live server. This requires some login credentials, and please make sure that these work as it is actually a quite common frustration when you’re just about to get your site delivered.
More examples of too insufficient specifications
Voltaire said: “Common sense is not so common”. If you assume what you think is common sense, in a way you insult those who think differently and you’re setting yourself up for being disappointed. If it’s a priority for you that your subcontractor builds the site correctly already the first time – be clear about what you want.
Here are some more examples of common clarifications that we ask from our partners:
- Should it be a custom post type, a repeater, or an advanced custom field?
- What should happen when you click the tooltip on the map?
- The three team pictures look great on the about page, but what happens when you add a fourth team member?
- How should X work on mobile where there’s no natural hover?
Examples of unnecessary specifications
While more specifications help give a better result, we don’t need to get everything in writing. Where we don’t have any specifications, we fall back on our general development standards. For example, we will:
- Use the fonts that are in the PSD files we receive
- QA test the sites for the following browsers: latest editions for Firefox, Chrome, Safari and for IE10+
- Make the email on the contact page clickable, etc.
We also keep records of the preferences each of our partners have, so if you always want BackupBuddy installed – you don’t need to tell us twice.
Smart ways of building the answers into your designs
There are smart ways to ensure that your site gets built correctly that you can prepare already in the design phase. Here are some of my favorites:
- Show one link in each segment with the hover effect activated
- Have the designs display the “odd case” when it comes to repeated items, e.g. a full row of team members plus one team member on the second row, where the fourth one still lacks a profile picture and a default “no-image” is shown instead
- Create the default interior page design that features all the standard paragraph styles and headings
- Use InVision or MarvelApp to explain design elements
- Provide links to animations that look the way you want yours
Conclusion
Most agencies can greatly improve the effectiveness their white label PSD to WordPress theme development with just a few tricks that are outlined in this article.
Key takeaways:
- Don’t assume that your development partner can read between the lines regarding what you want. There are many ways of implementing functionality on a site, and what is common sense to one agency could be the opposite to another.
- Provide comments on all additional functionality in a way that your friend would understand what you mean
- Use design support for feedbacks or be very specific to avoid comments like “move the button a bit higher”
- Make sure your design files explain also irregularities in content, like a missing photo on a team member
- Describe the scope of what you want help with. Do you want all content migrated from an existing site or will you do that yourself? Make sure that’s clear already when you ask for a quote.
- If you find a good development partner, they should be able to keep your preferences on file so you don’t have to specify more than necessary.
If you follow these guidelines, you’ll be able to reduce the number of iterations with your white label partner and avoid unnecessary rework. The main benefits for you are shorter turnaround times for your projects and less of your time spent explaining what you actually wanted.
If you work for an agency and you liked this article, you might be interested to get our template for project briefs. Reach out to us via the chat, email or form and ask us to send it to you.
