By Asam Shah
FiftyThree, the guys behind the hugely popular iPad app Paper, this week launched a new product called Book.
In collaboration with notebook makers Moleskine, users are now able to bring their Paper creations to life with their very own custom-made printed Moleskine book.
It's been an exciting time for FiftyThree. The company recently raised $15m in Series A round funding and are looking to push their creativity to new markets with new productivity products in the pipeline. The partnership with Moleskine is just the start of a very prolific period for FiftyThree.
Along with the launch of Book, FiftyThree have also designed a new landing page for Book, featuring an elegant new look that is every bit as aesthetically pleasing as the product it features.
I recently spoke with Scott Olson, FiftyThree's front-end engineer, who took me behind the scenes of Book's landing page.
1. What were the objectives for designing the landing page for Book?
We are a small team so our process is much less formal than you might expect. The objective for the new page was to showcase Book, our latest "big thing." We haven't had an announcement of this magnitude since we launched Paper in March 2013. So we knew that we needed a new homepage to coincide with our news.
2. How many people worked on developing the page?
The old homepage was implemented by external contractors and finished (in the eleventh hour) by Aseem Kishore, our web services engineer. We used some of the layout concepts from the current page of Paper as the basis for the design of our new homepage for Book.
The direct contributors for the new homepage were KJ Chun, Tara Feener and me. But as with all projects at FiftyThree, many people contributed with design feedback, technical suggestions and bug reports. It was really a company-wide effort.
3. What's your process and how did you begin designing the landing page for Book?
Our designers tend to work in high-fidelity tools like Photoshop and Keynote which allow them to add some quick interactions. For example, KJ used Fireworks to create static comps and the design team went through a few design iterations to shape the page.
We are very collaborative across our design and engineering teams. We've really excelled at hiring design-minded engineers and engineering-minded designers. As a result, we tend to prototype in-browser where we can quickly iterate on designs and we can see how things look and perform on different devices and platforms. We are very keen on responsive web design and the best way to achieve that is to move from static comp to in-browser implementation as soon as possible.
4. What, in your opinion, makes a great landing page?
Content.
Content is king. Without it you can't make a great homepage or website. The designers in our Seattle office are responsible for the amazing photography that we use for our product pages. I'm constantly amazed at the work they produce as it makes our jobs ten times easier.
5. How much time did you spend on testing the site before going live?
We completed the new homepage (and related product page) in less than two weeks. We all participate in QA at FiftyThree so we organize loosely structured bug bashes where everyone spends a bit of time hammering on the new pages with various browsers and devices. I'd say the formal testing phase lasted two days; but the UI engineering team is testing constantly.
6. How do you compromise and find a solution to incorporate SEO keywords whilst at the same time keeping the design aesthetics true?
The UI engineering team loves semantic mark-up. We believe if you write clean and robust HTML then your page should rank high in search results without a lot of extraneous SEO effort. Our product pages contain a significant amount of copy and that can help. We think that popular search engines will always have an easy time finding us as long as we're doing our jobs well.
7. What were the major challenges, if any, you've had to overcome when designing the page?
I think the biggest challenge was executing an amazing design that still looks great on older browsers. We use feature detection, specifically Modernizr, to determine if a user's browser supports a particular feature. We design our pages for modern browsers, leveraging CSS3 where necessary. And we can create alternate layouts or behaviours for browsers that are missing particular features such as multiple background support or SVG support.
We love our hi-res displays on our MacBook Pros and iPads. And as our products skew to Apple we try to realize our designs on high-DPI displays.
Your Paper app is hugely popular and has won many awards. Was it challenging to design a landing page that really highlights and showcases its greatness?
Paper speaks for itself when you are using it. But it is a challenge to capture the beautiful interactions within Paper using still images.
Andrew Allen, one of the founders of FiftyThree, is an amazing storyteller. His forte is video and he asked the design team to create some really gorgeous product videos. It shouldn't be a surprise that Andrew and the design team used Paper to storyboard the video shoots. In the end, everything we do really comes back to Paper.
With Paper and now Book, FiftyThree are really pushing the boundaries of design and optimization by developing pages that not only promote its products but also gives the customer the best possible user experience in turning inspiration into creative output.