Published on | Prototyping: From UX to Front End — Medium Sneha Ravindra

Digital news has gained popularity over the last few years. Millennials are tech savvy and prefer reading the news at their finger tips rather than reaching out for a print edition. Going digital is considered Eco friendly as well 🙂

So why is it so important to go digital, the below research data clearly shows the revenue in Asia Pacific has been constantly increasing over the years. This is the right time to tap the customers and present them with a purchase flow which is easy to use for conversions.

In the modern era of Digital news, people reach out to social media platforms to consume news rather than going to a newspaper site and subscribing for a copy. There is a challenge attracting the users towards digital subscriptions. When we consider from a user experience perspective, the page which offers subscription and the steps to subscribe to a newspaper needs a redesign.

When it comes to news consumption, there are two clear and distinct Personas

An individual who has been reading the print edition aged 45 and above
A Millennial who only consumes digital news aged between 16 to 45

The design needs to cater to both the older generation and the younger ones. The older generation need to transition to the digital consumption and the younger generation must be kept engaged. There is one thing common between these two users, both have less time and patience. 🙂 The older ones feel annoyed that they need to fill in long forms in order to subscribe and in every step of the process they are completely unsure if they are doing things the right way. The younger lot too hate filling up long forms and they always want to know how many steps they need to reach their end goal. Forms with lengthy inputs seems to be a major turn off for both of these personas.

There is another UX issue in these subscription pages, users are presented with flashy carousels which keep moving and distract them. There is heavy marketing images and other distracting Ads which often lead the user out of these page rather than keeping their focus towards subscription sign up.

The pages leading to subscription sign up must have minimal images and the images if present must be optimised to load faster. The content used in the form of text must be precise and enticing to the user. A conversation tone of voice is often appealing and reassuring to the user who is paying money.

When the user begins the journey in the subscription purchase flow, make sure they are informed on how many steps are there before the user could complete this flow. Since most of the newspaper sites offer different publications, its best to present the list of publications as the first step towards subscription purchase. The publications must be a image representative so that user can easily identify which one to pick. It is very important that these images are well optimised for quick loading and better to have a name of the publication below each of the image, so that in case of failure of image load user can still see the publication name and identify which one to choose. Providing the name of the publication will also help in improving the SEO and Google will rank such pages higher.

Once the user has selected the publication then the next step is to select the subscription plan. Creation of subscription plans requires special attention in terms of the differences each plan has to offer. Always ensure the plans are placed vertically parallel to each other along with their 3 USP’s, so that at one glance user can understand what each has to offer and which one seems advantageous. Always provide more details of each plan apart from the 3 important USP’s mentioned upfront. Place a evident select button for each of the plan in contrast colours so that it draws attention of the user. In every step user completes the top bar will indicate the progress with coloured circle.

After the plan has been selected the crucial part is to get the new user to sign up. Sign up is always tricky since it involves forms, till now in the journey user was just presented with options to choose from. The form needs user input. The study says that lengthier the form quicker the user drops off from the page. So make sure that only the most important information is gathered from the user, instead of asking the user too many things and losing them. In my opinion Email id is the unique identifier which must be the most important input from the user along with User’s first name, last name and password. Confirm password is outdated these days since user can reset passwords easily with the email. Make sure all validations for email, password are shown when user is out of focus from the respective fields. Instead of using only placeholders to display what the text field is for, add a simple animation to push the placeholder to above the text field when user is typing.

The last step in this journey is the payment. The payment form must be clean with no distraction. This is where a brand gets associated with the customer. Careful attention to details here will ensure customer loyalty. Always display the images of accepted payment methods on the top of the page and auto detect the card based on the first few digits of the card number and blur out the other two cards. Make sure there is an image which shows CVV code or security code for all the types of card accepted by the payment gateway. The button must show a padlock, reassuring the user that the card details presented here are safe and will not be misused. The pay button also displays the amount user is paying in the final step which makes the user well aware of the money they are spending.

Finally for the thank you page, make sure user is thanked and all the necessary information will reach the user via email. Do not forget the Invoice Number, which may be helpful in case user encounters future subscription related issues. This number will come in handy to contact the customer care. Display the image of the publication purchased by the user and user can click on it to start reading it. This page also presents opportunities for other marketing campaigns and digital advertisements, utilise it well.

Summary: The subscription flow requires utmost attention to customer experience. Each progressive step in the flow must be clean, crisp in terms of both the page design and choice of words. The use of colours must be subtle and images must be optimised for quick load. All marketing for the plans must be restricted to enticing text instead of flashy images. The attention of the user must always be on the plan and the center of the page where all action happens. Make sure all the important information about the plan and payment is aways above the fold and all the buttons are gaining user attention. Instead of using too many flashy images and banners, use micro interactions with tiny icons. This gives a boost to the visuals and effective from the end user perspective. Guide the user step by step in the process by showing them the step they are in and motivate them to complete all the steps.

Here is a short video of my prototype which has interactive elements.

<a href="http://ift.tt/2osLKAP">http://ift.tt/2osLKAP</a>

Alternatively you can interact with my prototype.

Hope you enjoyed reading the post. If you did then don’t forget to click on the Green Heart 🙂

Elements of UX for Publication Purchase Flow was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

Elements of UX for Publication Purchase Flow

Cool stuff, every week

More Articles