PassTools

Tello Passtools provided an easy toolset to visually preview, template and manage the distribution of Apple Passbook passes at enterprise scale. The product consisted of a template builder, analytics dashboard and API/site activity monitoring.

Our team of five built and launched the Passtools product in just 1.5 months. Tello was acquired by Urban Airship around four months after we launched.

The Hail Mary

After Tello Mobile Feedback proved unsuccessful, we only had a few months of money in the bank. We also had the (quite liberating) opportunity to start over and attack a new problem. We took a few weeks to evaluate different options. We prototyped a few directions, including mobile contextual awareness and indoor location mapping.

A few weeks after we made the decision to pivot, WWDC happened, and Apple Passbook was announced for iOS 6. Apple had taken a barebones approach to mobile coupons and tickets. It had a fantastic UI and a simple file format, but it lacked a web services component, and there was no way to visually build a pass. We realized that the Passbook opportunity had the characteristics we were looking for — a space where we could launch within a few months and an ecosystem that provided enough market curiosity to drive near-instant user adoption.

We began work on Passtools in early August, and we launched the same day that Apple released Passbook in September 2012. The project was a whirlwind of 12+ hour days, rapid decision-making, prototyping and design-in-code. After we launched, we slowed our pace considerably as we continued to improve the product. We had taken some shortcuts in order to launch, and there were several product gaps we wanted to fill.

Process

The initial launch was a whirlwind of work. As the sole designer, it was a challenge to stay ahead of the engineering team. To expedite the process, I whiteboarded with the team, then built a clickable prototype of the application over a weekend. Meanwhile, the team was doing much of the necessary groundwork for the API. We had verbally explored several ideas for the UI, including a drag and drop template builder — which we would later implement as Wallet Studio. But for the initial launch, we settled on a much simpler approach, given our aggressive schedule.

The team worked from my prototype as I explored visual design for a few days. Afterwards, I immediately jumped into the application code and implemented the design in HTML/CSS. This overlapping process served us well, and we continued working in this fashion even after the mad-dash to launch.

After we launched, we continued to iterate on the product — first on the whiteboard, and then as a prototype of those decisions. Once we had customers, we received continual feedback. Since we handled support ourselves, I was able to hear the customers’ struggles first-hand. I worked with them to resolve some confusion around required items, pass variations that Apple shipped last minute, and to add additional features. If visual design was necessary, I worked out the design in Photoshop before implementing it in code.

Reverse Engineering

The Passbook layout system proved to be troublesome to reverse engineer and implement in CSS for our visual previewer feature. In 2012, there weren’t any CSS layout modules that could easily mimic Auto Layout. To complicate matters, Apple changed the format each time they released a developer preview of iOS 6. We worked around some of these challenges via the test automation. I helped our test engineer to surface the myriad of variations for each of the five pass types. We generated thousands of passes and rewrote CSS and Javascript countless times in order to get the previewer right.

Last Minute Epiphanies

Putting yourself into the shoes of your prospective users is essential to shipping a successful product. Prior to launch, our CEO was out demoing the pre-release version. He was really struggling with creating a successful demo of our visual template builder – a tool which showed placeholders where text would be inserted by the API.

We realized that people needed to experience Passbook passes before they could understand the value of our product. After discussion with the team (and one week prior to launch), we decided to replace the Template Builder with a one-off Pass Builder. Instead of creating a template, this tool simply allowed users to customize a single pass and send it to their phone. It was extremely successful and helped us get the attention of early adopters. We eventually replaced it with the Template Builder, only after customers had seen the benefits of pass distribution.

Satisfying Curiosity

A few days before launch, Michael, our Senior Engineer, and I were riffing on the quickest way to get a pass on someone’s phone. We realized we should put a one click form on the marketing site and send pre-designed passes to users who entered their email. This served double-duty at building a direct marketing list.

These two last-minute additions to the product contributed to attention from potential partners and future customers.