NZ Herald Subscriptions + Paywall

What I was responsible for in this project:

  • User experience design and interactions
  • UX testing
  • UX research and planning
  • User flows
  • Wireframes
  • Responsive UI design
  • Cross browser/device testing

UX Design process

Users were my focus during this design process. From early on I was involved in business priorities and functionality, which enabled me to create user flows and co-ordinate meetings to flesh these out and discover happy and unhappy paths. Doing this early in the project allowed developers and testers to start thinking about functionality and see the project come to life.

Example wireframe user flow

Example draft user flow

Design research was done based on what other providers do as well as other industries and design inspiration from completely different areas also. Consideration also needed to be given to the platform being used and what would be possible. Combined with best UX practices and web design principles the wireframes and user interface came to life to provide a unique experience for our users.

User testing

Throughout the project I did user testing in areas that were not business-sensitive and could gather feedback to improve the UX, UI and accessibility of the project. Examples include the indicator style and colours.

Testing indicator with curve

Examples of user tests for the premium indicator

Testing a lock style indicator Testing indicator with a plus icon

Through various tests and discussions we settled on a dark gold colour with a clean black font and a golden pinline. This was to be used on both index listing pages and article templates.

Final example of how premium content is indicated on the website homepage

Example of premium content on homepage

Design from wireframes to final user interfaces

The entire flow needed to be as frictionless as possible, with appropriate feedback to the user where suitable and encouraging. Many aspects of the flow needed to allow multiple user actions – such as choosing an offer, signing in if you were already a subscriber or if you were already a registered user, or activating your subscription for certain print subscribers.

Desktop view of premium subscription offers page

The offers page is home to multiple offers

Mobile view of the offers page

Responsive mobile view of the offers page

I maintained a similar ‘Create Account’ screen to the registration flow and style for consistency, while bringing in the golden premium colour. Only key information required was collected throughout the subscription process.

Updates to the Profile area were made for managing a users subscription and signing up to premium newsletters.

Consideration also needed to be given for existing print subscribers and future print+digital subscribers. Error messaging, dialogues and new password flows were also considered throughout the project.

Article paywall

The article paywall needed to be clean and encouraging, while letting subscribers also sign in easily

Create you subscription account page

Create account page for subscriptions – desktop view

Responsive tablet view of the create account page

All designs needed to be smoothly responsive across all screen sizes

Mobile view of the Create account page

Upon selecting an offer, it’s important the user knows what they have selected, this is maintained throughout the flow for transparency

Article templates

The premium style content needed to work within the standard article design and a new ‘big read’ design to give the premium content a point of difference and premium feel, with less advertising and items on the page.

Responsive view of the Big Read template

It was important to design to create the best experience possible no matter the size or shape of the browser or device

Big read template on mobile with premium indicator

Example of the new ‘Big read’ premium template on mobile

Using the indicator on a standard article

Example of premium indicator in a standard premium article template

Responsive designs were created to fit a minimum of an iPhone5/SE (320px wide) and were tested extensively across a wide range of browsers and devices.

During this project I also managed a digital design contractor that assisted with some of the UI work. I also worked extensively with developers, product managers, testers and people within other areas of the business.

This is an ongoing project, but initial launch feedback has been fantastic with plenty of people expressing how easy and nice it was to subscribe to premium content.

« Back to Website Design and Development