Layout and Orientation

What is the storefront?

Put simply, the storefront is the most important screen in your app. It's usually the first screen a user sees when opening the app, and it's how they discover and access your content. 

Our goal is to ensure your users can find the content they’re looking for, purchase it, download it and read it, all effortlessly. There are clear KPIs we can use to measure our success here, we want to see users regularly returning to the app and we want them to be buying or downloading new content whenever it’s available.

This second measure, the number of issues being purchased in your app, is the strongest indicator of the success of your app, and is directly linked to the value you’re extracting from it.

LAYOUT

We talk to a very diverse array of clients, and we know that it’s usually not wise to try and force legal reference documents and 21st-century erotica into the exact same product. That’s why we allow several configurations of our storefront, to best showcase your content.

There are certain elements you need to consider, namely:

1. Would you like fewer, bigger tiles or a larger number of smaller tiles?
2. How will this look in portrait and landscape?
3. Do you want to take different approaches for phones and tablets?

Here are the currently available layouts for Pugpig Publish. All of these work in both portrait and landscape and on both phone and tablet.

1. Large tiles
2. Small tiles
3. Small tiles with Hero  

Below are examples of each of these layouts to help you get a feel for which might suit your content best.   

Phone, Large Tiles

Phone - Small Tiles

Deciding which is best for you depends on the type of content you publish, your publishing schedule and the behavioural patterns of your users. Less time-sensitive publications might prefer the small tiles layout so that users can easily see older issues. News-based titles usually prefer large tiles that put the emphasis on their latest content.  

Hero, or no hero?

Much like actual superheroes, hero images can make a big difference to the impact of your storefront, but generally without the collateral damage and swathes of lycra. Hero images can be turned on or off for all versions of our small tiles layout if you feel they lend themselves to your content.

The main effect they have is to draw attention to your most recent issue. A large cover means that the issue dominates the display, while also making it easier to see details on the cover. 

The hero offers a good compromise for apps that are nicely suited to the small tiles layout, but want to make sure users are well aware of the latest issue and what’s in it.

Here’s what the hero layout looks like.

Phone - Small Tiles with Hero

BUTTONS

How to make your buttons work for you

Buttons might not seem like the most exciting thing in the world, but by gum are they important. They’re the main way of actually communicating with your users on the storefront and informing them of their options. They’re your calls to action. Urging and enabling your users to buy, download, read and subscribe.

We’ve put plenty of thought, research and love into our buttons. So while there aren’t a huge number of options for configuring the location and appearance of these buttons, we’re confident that our current setup will work for you, and work well. You can, of course, specify the exact wording used on each button. For design reasons we recommend restricting these words to being no longer than 12 characters.

Buttons can change to represent user states, so that you’re only giving users the options that are relevant to them.

The various buttons a user might encounter on the Pugpig storefront are

1. Read. Pretty straightforward, this enables users to read an issue that’s on their device. For this to appear a user needs to be signed in, have access to, and have downloaded the issue.
2. Download (Icon). The precursor to the read button. This shows to users when they’re logged in and have access to the edition, either because it’s free or they’ve already purchased it. Tapping it will, as one might expect, download it to the device whence it will become ready for reading.
3. Buy. This button can say Buy or your preferred wording or it can show the price of the issue. Tapping it will bring up the purchase dialog, which is usually the native iOS or Android dialog. We try to show the user a buy button as soon as possible in the user journey so that even though a user might not want to purchase an issue immediately, they know where they can do it should they decide to later.
4. Subscribe. Again sticking with the theme of buttons that are very clear in what they do, the subscribe button immediately brings up the subscription options dialog, allowing users to quickly and easily subscribe.
5. Log In. The button for magically tying-in 3rd party subscription systems. Users tapping this will be presented with an in-app login screen which will authenticate against your system and, if the user has access, seamlessly download the issue.
6. Update. Sometimes, post-publishing, you’ll need to update an edition, this can be useful for correcting errors or improving content. Once this has been processed, the primary button will change to Update. Tapping this button downloads and applies the necessary changes. For this to affect a user, they’d have to be signed in with an active subscription and have the issue downloaded to their device

Primary Edition Flag

But perhaps all of the above doesn’t matter, perhaps you don’t care about more than one edition and you want your users to be able to scoot right into that sweet, sweet content?

Well, look no further than our primary edition functionality. This allows the user to launch directly into the selected issue when the app is opened. We don’t recommend doing this in most cases, though, as users will be unaware of the storefront and thus unable to easily navigate to other editions should they wish to.

This isn’t a setting in the app, but a flag applied to the issue when it’s uploaded. The app will always use the most recent flagged issue.