Go Back
Here at Roboboogie, our bread and butter is web experimentation. We’re obsessed with A/B testing and how it can lead to better online experiences. But working within a multidisciplinary environment can be tricky—especially when it comes time to hand-off the test from design to development. Nobody likes to have a ton of meetings, but without them, it can lead to confusion, overlap, stalling, and possible failure, all of which are worth avoiding.
As a result, we’ve developed our own in-house process for these test-design-to-development hand-off meetings. The meetings are quick, only require a few people (designer, developer, producer), and create clarity, which saves everyone’s time.
Here’s the official Roboboogie Test Development K/O Checklist™ (RTDKOC™):
- Is the test signed off by our team and clients?
- Do we have mobile and desktop designs?
- Can tablet be built from desktop and mobile designs?
- Are we using standard viewport sizes for designs?
- Is the PSD accessible if a developer needs to slice?
- What assets need to be handed off by the designer?
- Is all functionality understood?
- Any pages that are outliers and may not be accounted for in designs?
- What are the traffic implications?
- What needs to be tracked?
- What types of animations do we need?
Is the test signed off by our team and clients?
This is the most important task to check off. In speed-to-market, it’s important to ask if all necessary stakeholders have signed off on a project. This prevents anything from being drastically altered or completely shut down by someone who hasn’t given their approval. This is the most time consuming if projects move too fast and someone does not sign off on a hypothesis.
Do we have mobile and desktop designs?
Is the test running responsively across all devices? If yes, have the designers handed off designs for mobile and desktop? This prevents design bottlenecking by ensuring the developers aren’t responsible for the translation from desktop. A little extra time spent upfront frees time for everyone else further down the line.
Can tablet be built from desktop and mobile designs?
Sometimes tablet or mobile size doesn’t translate well from desktop. When both of these issues arise at the same time, it’s important to get direction or wireframes from designers to shore them up. Usually a quick chat will do, but addressing the situation before development will save time for designers instead of asking them to context switch whenever there’s an issue.
Are we using standard viewport sizes for designs?
To create pixel-perfect designs, it’s important to know what you’re working towards with design to get the exact sizes for all spacing, fonts, and DOM elements. Desktop is generally designed at 1440px and mobile at 380px, with all assets handed off at 2x. When handing off assets at 2x, if a PSD or XD file is 2880px for desktop, then all sizes must be even numbers to be divisible by two. This helps avoid sizes resulting in decimals.
Is the PSD accessible if a developer needs to slice?
At Roboboogie, all developers can slice assets according to our image style guide. Making sure the PSD is accessible saves our designers time and allows the development team the opportunity to slice and size according to development needs.
What assets need to be handed off by the designer?
Some assets need more adjusting by people with stronger design experience. These generally include SVGs and JPEGS that need backgrounds removed when transforming to PNGs.
Is all functionality understood?
Walk through the test together. This way, everyone understands any added or altered functionality. This presents the opportunity to discover any functionality that may become time-consuming during development, so it’s important to reevaluate the hypothesis and determine if it is meaningful.
Any pages that are outliers and may not be accounted for in designs?
Ok, you’re ready to start redesigning. But wait, how many legacy pages are there? Product pages? Templates? There are sometimes two, three, maybe more! Can we apply the designs to older templates? Do products outside the main categories have a different display? Getting clarity and accounting for future impacts is key to staying in budget and delivering on time.
What are the traffic implications?
Before starting development or design, knowing that the traffic implications might run through a full month’s visitor count in a week should be fully understood and signed off by all stakeholders. (i.e, if there’s a pop-up purchase modal on every page, be prepared to account for that.) The knowledge might postpone or outright kill a test.
What needs to be tracked?
If tracking in Google Analytics, ask the question: have we introduced any new interactions, or replaced old ones? There’s nothing worse than concluding a test and realizing you missed tracking an important variable.
What types of animations do we need?
Knowing how a designer envisions a change in design to give users feedback through design is what transforms a flat design into an interactive experience.
That’s it!
It takes time, and it’ll look different at every company, but keep in mind that collaboration and continuing to experiment with process is the key to winning. Make sure you’re always continuously improving your process, and you’ll see results!
Roboboogie is a Website Performance Consultancy. We provide a measured approach to improving website performance and some might say we’re obsessed with performance. Drop us a line to learn more and see what we can do to help you make sense of your data.
