Imagine you're searching for a document. Actually, no need to imagine. Shortly before writing this, I was searching for a contract template. I've had this template for several years, long before I made the switch from Copy to Dropbox. I still used Copy because I had 40gb of old files stored there. Recently, I switched to Dropbox. I have no idea where some of my older files are nor if I still have them locally – the constant flip between each of these services is a headache.
Meta solves the whole“I can't find my pitch deck, and it's five minutes before my presentation problem.” Pop open Meta, type in a word or two you remember from your pitch deck, and you'll find your ground breaking presentation for the Valley's top new toothbrush startup. Or, you know, that TPS report that you haven't printed out.
From Template to Bespoke Conversion Machine
I was already working on some of the UI designs for Meta, and was told that they wanted a little help with the landing page. The old page was a template version. It was well put together; pretty polished for an unfunded startup that allocated most of its resources towards the actual product. Now successfully funded, they could afford a much deserved upgrade.
I worked with the team closely to find the best possible solution for our landing page. We spoke about what type of landing pages they liked, ironed out reachable goals, and outlined how they wanted users to perceive their app. We also did tear-downs of the sites they liked, including those of their competitors, to find out what we needed to do to differentiate Meta.
Converging on a Concept
While the team really really liked the old Robinhood.io site concept, we decided that it didn't play to the strengths of current assets. This design was a Lonely Sandwich video set as the site background with a short call to action. It was all about the video. The Robinhood design hinged on the fact that the video was provocative and recognizably a Lonely Sandwich video. Normally I hate autoplay, but I love the team over at Sandwich studio and find their videos really entertaining. Unfortunately, we didn't have the budget for a Lonely Sandwich app video, and the demo video we had was excellent but lacked the same sort of production and narrative that made the Robinhood video so special. It did precisely what it was supposed to do extemely well, and we needn't stretch its purpose.
Goal driven marketing
The ultimate goal was maximizing sign ups. Jason told me that their sign ups increased after adding a demo video to their site. Watching the demo video, I realized why. The video wasn't effective because of its entertainment value; it shows shows exactly how the app works. Where the old site fell short was that it did not explain what the product was. Without captioned screenshots, demos, or explicit copywriting I felt left in the dark. Meta did a better job than most on their site, but the complexity of the app begged for an explicit(visual) description, which their demo video provided.
Based on research I had done on landing pages in general, breakdowns of the competitor sites, and the little analytics we had, we thought it was important to make information about Meta prevalent and easy to understand. Meta is a search engine for your cloud apps, it's wicked fast, and you can open documents right from there. We needed great copywriting accompanied by illustrated features of the app. Without a fully polished product to show, I felt that illustrations were the best substitute — they're flexible without being misleading.
To summarize, we accomplished half a dozen things within the first 700 or so pixels. We established our offering,“Access any file instantly wherever it is,” placed a secondary heading to further elaborate, got in a sign up form form, and a placed a link to more content. Beside the copywriting, there is an animated illustration that shows precisely how you can juggle 4 different cloud storage drives.
We focused the layout of the page to reinforce the sign up forms. I place the standard, bold call to action followed by a form. To succinctly show how the app worked, I build an animation in Framer, then VelocityJS, a super fast javascript animation library. While an abstraction of the actual appearance of the app, the animation works exactly how the current beta works and future product will work.
Navigating the Copy
If the above-the-fold content wasn't enough, a teasing illustration of some ruffled documents hint at a lower area to the page. I focused on writing quick, skimmable headers with the help of the team, carefully melding illustration and content for a visually balanced page(see above). Each illustration was designed specifically for that bit of content, and designed to fit around both its twin paragraph and the entire page.
Endcap Video
To waistband the copy, I made a seperate module for the video. This serves two purposes. First, it shows a screenshot of the actual app. Which means it's real. Second, the single unit dedicated to the video will hopefully increase the likelihood that visitors watch the video and therefore sign up. With the analytic available at the time, we could not confirm if the increased conversion noted previously was causation or coincidence. We do know that the video collected a lot of referrals when shared on Facebook however, so it was important. To cover our bases, I made a dedicated portion just for the video.
Code and Nitty Gritty
Nobody likes spec-ing designs; it’s time consuming and tricky. It involves very close work between designers and developers, and often a cold hand off fails. I offered to code the landing page to ensure precise execution and spare the team some man hours. They focused on getting their product ready for launch, interviewing new team members, and taking care of the business. In a week and a half, I bootstrapped a fully functioning site in Jekyll and deployed a private site for them. They used the same templates preferring Hugo over Jekyll so they could make server side builds on the fly.
Stats and Other Info
The site I built is responsive for mobile, tablet, and desktop and was optimized for peak performance with gulp.
My CSSstats were pretty good for a completely custom built site, at 4kb gzipped. The site scored quite highly on Pagespeed.io as well, with the greatest loss of page speed coming from from the large amount of http requests due to images and external libraries.
From Template to Bespoke Conversion Machine
Converging on a Concept
Goal driven marketing
Navigating the Copy
Endcap Video
Code and Nitty Gritty
See it live at http://meta.sc