Publir works with high-traffic publications to manage their ad technology and monetization. The Atlantic, Mental Floss, The Week and The Sun are a few examples.
Publir Subscriptions aims to help mid-tier blogs offering subscriptions to their audiences. The idea is simple: With a few clicks, a blog can set up a subscription that removes all ads in their websites. Extra revenue, happier users, no technical hassle. You could call it subscriptions as a service.
I worked with the company to create Publir Subscriptions’ landing page and signup flow. This was more challenging than it seems at a first glance — for example, the target customers are mid-tier blogs. The title might be “mid-tier”, but they are making considerable numbers per year and opting for a new strategy (subscriptions) is a big change, which we had to justify.
Unless you really understand who you are designing — and writing, too — for, it’s almost impossible to arrive at a good product. We started doing research and later summarized it in two key personas — one representing a VP of Ad Ops and the other, a Sole Proprietor. The two were the most likely to be overseeing the decision of whether to adopt subscriptions as a revenue stream.
Creating the personas enabled us to:
The main goal was getting users to sign-up. We had to ensure that that process was:
One of the most effective ways of doing so is putting together a functionality maps. So that’s what we did. See below:
(Note: this does not replace effectively testing it, but highly increases the likelihood that you won’t gloss over important details and increases chances of overall success)
We wanted to communicate that subscriptions would ultimately help the publications grow their revenues — and simulation charts were an effective way of communicating it through the UI. I worked alongside the client to understand how the data should progress and what it should look like. We went through, for example, spreadsheets with dummy data and sketches:
At this stage we had a really good grasp at who we were designing for, what mattered to them, how signup should work and how it all tied up together. The next natural step was to communicate all of it through wireframes.
Using UXPin.com (Which is by now my absolute favorite tool for wireframing), we iterated on the landing page and the sign-up flow. It was essential to loop in users, engineers and the client to make sure we were on the same page and the designs were effective.
Once we were comfortable and happy with the wireframes, we moved on to mockups. Publir had a solid brand, heavily associated with highly reputable, large publications. It wasn’t, however, well associated with SaaS tech products.
We didn’t have time (nor budget) to go through a formal branding exercise, so we had to — in the lack of a better term, wing it. We used a brand extension that was felt like a better suit for a SaaS product; with a new logo, font and color palette. The end result would fit well in Product Hunt, for example.
None of the existing interface elements from Publir’s main site could be re-utilized, either. I created a number of new ones — buttons, text styles, backgrounds and more- and they worked well for both the main landing page and the signup-flows.
All in all, the entire design exercise was a smooth ride and really fun to work on. At the end, we were really happy with the end result — both from a usability and a visual point of view, and the mockups were passed on to the engineering team.
As Publir Subscriptions expands into the future, it’ll be a good idea to document the elements created for the landing page and the sign-up flow. They’ll certainly be used to scale the website beyond a single homepage and will apply to the web app as well.
On a side note, I mostly listened to Stornoway during the heavy-lifting phases of the project. Check out Zorbing, one of their most popular songs. (It’s really good)