Beautiful Communication Comes to the iPad
Designing our first tablet experience.
What is Paperless Post? Its something that helps you create online and paper stationery that reflects your individual aesthetic. Our distinctive, customizable designs and powerful online tools make it easy to communicate expressively on any occasion.
2013 has been a really exciting year at PP. We grown a lot, hired some extremely smart people, launched a bunch of useful features. One of our biggest works this year has been the launch of the iPad app.
It’s not easy to boil down 8 months of hard work into one post, but I feel it’s useful to pen down the design challenges we took on, ideas we implemented, and the direction we hope to take Paperless Post towards.
Our aim was to provide a really smooth design experience.
You design a card. You send it out. It should be that easy. We took this opportunity to rethink the way people were using PP, since we were essentially building from scratch using the knowledge of what we love and hate about the desktop site. We kicked off our design process by taking a look at the basics,exploring lots of options on how the overall navigation would flow. Exploring the architecture of the app allowed us to compare all different ways the app can be used and we chose to focus on card creation and the host experience.
Creating invitations and receiving them are really 2 sides of the same coin. A host’s expectation of what their receivers will see should be in line with the way they design their invitation. We’ve redesigned the app’s workflow to reflect this.
Creating a visual identity
We needed a visual identity for the app, something that would not only represent our brand but push it forward. We took inspiration from fashion and architecture, looking at how white space can translate to luxury, glass to slickness and sophistication without overpowering content.
We did a lot of visual explorations around the presentation of the card designs and how we wanted the experience to feel when you moved from choosing a card to editing it. Typefaces set the tone for the app’s personality as the card creation process moves from image heavy pages (card browsing) to text heavy pages (guest lists).
Once we had a good sense of the visual direction we wanted to take, we focussed our attention on one of the biggest parts of the app, the card customization process.
Working on the heart and soul of the app
Making a standard card design your own piece of art by adding in custom text and pictures and formatting it just the right way before you send it out to friends and family is at the heart of using Paperless Post.
Keeping the workflow for the card customization process short and simple was key to getting a smooth experience. This turned out to be more difficult than we had expected.
We were building it in HTML5 instead of obj-C for a host of reasons, which gave us some unique challenges.
There simply wasn’t any open source software that was even trying to do the things we needed (font support, live editing, accurate boundary selection for fonts, ios style editing controls).
We had to create our own interactions for even the most basic things, like how text editing should work. We had to decide how text is selected when you touch it, what menu’s pop up, what happens if you copy/pasted formatted text in the middle of a line, what happens if you double tap a word, etc etc etc.
Of course, the (relatively) easy way was to decrypt how ios handled this stuff (its an iPad app after all) and replicate it ourselves. A more interesting way however, was to compare major word processing applications (MS word, google docs, pages, evernote, quip, etc), see how they handled text selection and formatting nuances, and figure out which rules would be best suited to our purposes.
This was a really interesting challenge as we had to make compromises on certain interactions for the sake of good frame rates and rendering speeds.
A case in point, is the magnifying glass which pops up when you try to place a cursor between two letters. Its a widely known ios interaction that we wanted to replicate, but was hard to smoothly render at 60fps. We replaced it with a cursor that expands when you touch and drag. This helped us maintain our desired fps, without any significant compromises in usability.
We put all this work in getting the visual and interaction design just right and then came along a new os.
What is__ flat design
Summer brought about ios7 at a time when we had already finalized much of our visual design and many of the major interaction decisions. Since this was a very different direction from what Apple has usually taken, we had to pause, take another look at the app, make sure it was in line with this new philosophy.
Some of this was easy. We had already decided on minimal-to-no gradients on our UI elements and slim, clean iconography. Some of this was hard. An important design decision we had taken was having a “tray” that you could pull out from the bottom to view additional details for an event. On ios7, the control center can be pulled from the bottom with a swipe. There was a good chance that these two would conflict.
For v1, we decided to stick with the tray design, but reduce its importance on the overall design experience. It now acts as a “nice-to-have” where you can tinker around with some options or can ignore the whole thing altogether.
The one place where ios7 really helped us out was with “blur” effects. We had decided early on that we wanted to have blurred translucencies on our trays and card views. This was validated when ios7 showed the same concept on navigation bars.
In the end, I’m happy with the way it turned out. The app feels completely at home when being used on ios7.
Post launch feedback
We launched the app on 15th Oct, which coincidentally, is the one year anniversary of the Paperless Post PAPER line.
Featured on the app store. ✔
Article on TechCrunch. ✔
Fancy marketing video. ✔
Getting featured in multiple places (lifestyle, best new apps, designed for ios7) on the app store helped us a lot. We got tons of feedback from the resulting analytics and help emails and some really interesting insights:
- We had thought that cutting out customization features from the app would make for a less desirable experience, but looking at analytics and help emails, that’s not been the case. Hosts are more concerned with how management features (sending out follow up emails, fixing typo’s in their invites, etc) work on the app.
- The time it takes to create and send an invitation on the website is really, really long (30ish mins). For the same kind of invitation, on an iPad, it’s 5 mins. BOOM.
Of course this is a result of many things. Smaller workflow, lesser design features, perhaps a different more casual set of users. I’m still figuring this out.
Its been a really hard and exciting 8 months, and we learned a lot along the way. We‘ve tried out new ways of communicating designs and making the process more efficient. We learned a lot about collecting input, prioritizing opinions and giving the right feedback at the right time.
Post launch we are focussing on getting the iPad up to speed with the main website feature wise, and hopefully we’ll be able to bring all the awesome things about the app back to the website next year and have a truly unified experience across devices.
