How to design, build and launch a simple landing page in under 5 days

A lot of websites and user interfaces I design these days have something in common: I get to refine them until I’m happy with results. It’s a pretty comfortable situation by any design standards.

The UN World Food Programme has recently surprised me, by asking me to design, build and test a responsive landing page for their #CARCrisis campaign… all in under five days.

This wouldn’t be usually a problem, because responsive pages are not any more difficult to build than those with fixed layouts. But this task involved close collaboration with the fundraising team (responsible for content which they had to create on a short notice). And designing without content is a waste of time.

I was afraid communication might be a delaying factor. With all the micromanagement that could happen along the way, five days seemed like a tiny chunk of time. After all, it’s hard to present your work to people who are behind a screen some 2,000 miles away, and trying to make them look at it without bias.

I decided it’d be a great exercise in effective design and communication, and thus began working on the solution right-away. The primary goal was clear: encourage people to donate to a specific cause.

After receiving preliminary content, I began experimenting with ideas for a desktop layout. That’s right, I ignored the mobile experience on purpose. I hear you say: “it’s against the ‘mobile first’ design” and “it can’t go well”.

Sure, I did go against the rule I usually hold in high regard. I knew from the past experience how well it can all work, when using a correct approach. There were no significant parts which might have required special interpretation for mobile devices. I was in the green.

The layout I chose was simple, yet effective. It made the content play the primary role, while still keeping the page itself scannable and readable at the same time.

Information architecture for this page followed a simplified story concept. It grabbed attention with a headline and a short video, then followed with information about why donating to this cause matters. Finally, it showed how visitors could help and asked them to donate, or at least share the page with their peers.

One tool that has helped me to a great extent in cutting down the turnaround time on design was InVision. I’m not sure why I haven’t tried it before, as it appears now irreplaceable in my process. InVision powers my collaboration with the team at WFP. It allows them to feed back to me in a quick way and focus on what they want to say, rather than on describing where a given issue is.

After two days, I have finished the design and got it approved with only minor stylistic changes. It was the quickest design round so far, but the schedule was still tight. I had only three more days to a final sign-off, and a launch on Monday morning.

To speed things up, I used Hammer for Mac with my own dev-kit, which I prepared a few weeks earlier. It contained appropriate styles, following the UI guidelines I have created for WFP before. It also included PureCSS, to power up various parts of the build; from responsive layout to forms.

Marking up the page was straight-forward. With PureCSS powering the grid, the responsive bit didn’t bother me at all. Only minor optimisations were due, so using this framework has helped me cut down development time.

I’ve finished my markup and styling the same day, though I was only halfway through: the scope was a bit bigger than just a static page.

Social sharing, custom tooltips and analytics event tracking; I had to add all these things in. After I did it, I needed to optimise the page, to make sure it performs well. To my surprise, the heaviest part of the page were the sharing widgets. Unfortunately, I did not have any spare time to design and build a home-baked solution to this problem.

My own markup, styling and scripting was light enough to offset some of the weight that social sharing widgets brought in. With event tracking in place, the page was ready for a final round of QA by Friday morning.

Once WFP has launched the page on Monday, we’ve found out a few small bits that didn’t work as well as they should. I did one last round of fixes on Monday morning, just before launch to make sure everything works as expected.

With only a minor delay, the exercise was complete. You can view the results at wfp.org/car. If you have any questions related the process or tools I’ve used, shout out in the comments below, or find me on Twitter: @matthewmorek.