SPH: Business Times
Updated: Sep 19, 2023
Project feature 1: Paywall redesign
Introduction
In the legacy design, the manner in which the paywall sits mid-article appears misaligned and haphazard
The paywall starts without any context (or rather, the incorrect context) to myBT, a newly released personalisation feature that allows users to follow specific keywords/topics. The idea should be to spotlight the focal issue, which is the unlocking of a premium article. New users may not know what's myBT.
Users dislike the paywall experience by the masses when we did a research study
Objective
Improve visibility, visual appeal and clarity of paywall
Enhance value proposition of BT subscription
Solution
Introduce a distinct and neater design that fits seamlessly into the article content scroll. We want a less intrusive transition of reader’s attention from the story to the paywall.
Display value proposition first, plans second
Make comparison between plans easy
Perform A/B test of content variations (i.e. 5 bulleted value prop v.s 3 v.s None)
Challenges
Plans are not easy to compare due to lack of spacing and hierarchy
50% less clicks than the header checkout
Is it better to open the value proposition with myBT (a news personalisation feature) or the ability to read premium articles?
End result
I designed 3 different variations to see which would resonate most
All 3 variations share a common solution of giving users the right context and solving their immediate issue: unblock the blocked article by subscribing
There's now a clear, boxed component to differentiate the subscription plans
Options | Left-most | Middle | Right-most |
Rationale | 5 bulleted value props to cover all grounds All bullets kept strictly to single lines 'Subscribe today...' header indicates a clear CTA and flows consistently with the orange CTA button 'Popular choice' label plays to the herd mentality | 3 bulleted value prop, keeping it to the most prioritised ones Easier digestion at a glance Everything else is kept the same as the left-most option | Does away with all bulleted value prop, lessen the length of the component This option is to minimise the intrusiveness of the paywall, since users have voiced out a strong dislike for it The label 'Recommended' is kept different. This is another mini-test to see if users respond better to what the majority chose, or if BT has gained enough trust in their recommendations |
Project feature 2: Bridging screen rewrite
What's the problem: In the ideal situation, when the user taps on the '+' button to follow a particular keyword, he is supposed to be able to go straight to the right-most page to log in or sign up for an account. A user has to first do either one to access myBT feature.
However, due to tech constraints and protocols for Google in-app purchase, that is not possible.
Solution: Introduce the middle screen as a bridge to connect users to the login/sign-up page.
UXW rationale
Original text made the bottom sheet excessively lengthy. It was edited for precision and crisp-ness.
The focal point here is that the user wants to follow a keyword to curate his newsfeed, not whether he's interested in myBT. Prior to this, the user may not even be privy to the feature name. Hence, the header is changed to 'Before you start following this keyword...'
We want to get straight to the point quickly. The next immediate step to get users successfully following a keyword is to first log in or sign up for an account, so this is called out in the opening sentence of the body.
In case the user isn't already aware of the feature name, 'myBT' is mentioned, along with a brief explanation of what it does for the user.
Grammatical fix: 'Login' to 'Log in'
Project feature 3: End-of-page scroll for latest news
What's the problem
When users go to the 'Breaking news' page (the latest is updated by the hour), the experience is hampered by the fact that it's separated into fixed topical categories (i.e. we can't be sure if every reader is fixated only on government and economy)
The page design is overly bare-bones, with a rather out-of-place 'Subscribers' label placed on certain news entries
On the mobile experience, the scroll is made long and cumbersome if a user wants to search for a specific breaking news
Solution
Refine the design and bring about both aesthetics and usefulness, considering that it is one of the most visited pages on BT
Introduce interactivity: Options to preview the breaking news entry and filter by topic
Humanise the page by having a pat-on-the-back message for users at the end of the scroll
Categorise breaking news entries by date instead of topic (i.e. Today, Yesterday, The day before)
Clearly indicate which news entries are for subscribers or freshly updated
Before & After: Comparison between legacy and new prototype
My role: Redesigning the end-of-scroll message
On top of advising PDs on how BT should angle the voice and tone towards users on this part of the flow, I created a few variations for the end-of-scroll design based on discussions that we could use this space to do more. For example, potentially selling users BT's Telegram updates and email newsletters.
This is what the original looks like:
Content Design sketches: How I reimagined it
Option 1 rationale
Thin black banner with a textual string that informs readers they’ve finished scrolling all breaking news
By putting the ‘all caught up’ message in the banner component, it frees up the space below to market BT’s other popular subscription channels such as Telegram and newsletters
Boasts some measure of aesthetics
Option 2 rationale
1:2 strings of header:body texts. Header is made a lot more crisp.
Main intent is to nudge users towards following Telegram for latest news notifications. For additional context, BT doesn't have app or web push notifications to alert users to breaking news.
Leverage on the Telegram handle name to lend a touch of casualness (i.e. ‘biz’)
Option 3 rationale
The main sell here is to shine the spotlight on myBT feature, get users to start personalising breaking news
Give users the choice of selecting 1 keyword out of the 3 top that’s drawn from our data
Encourages some level of interactivity
Project feature 4: myBT landing page
Introduction
Business Times was about to launch myBT, a personalisation feature that allows registered users or subscribers to follow keywords/topics. This would result in a curated newsfeed instead of a general one.
Entry points to this newly set up myBT landing page include email, social media and a top banner on article pages
A peek at that top banner:
Objective
Give users control over what news to consume, as a means of engagement
Declutter info and sensory overload in a day
Save a little time and do away with tedium
Problems & Solutions
There is no official documentation of the BT house style and voice & tone
With research study on user profiles at hand, I created an 'avatar' for BT that guides the team on how BT should speak to users. The BT user profile is a mid-to-senior executive (possibly in finance) who is time-starved, and require a ready, reliable source of knowledge to advise others in their line of work.
Why would such users invest their time to learn more about this feature and start using it? We're mindful that their attention span is short, and they're discerning.
With these guidelines and questions set up, I was in a better vantage point to craft a landing page copy that's impactful and convincing.
Challenges
Resistance from newsroom editors and journalist, who were also the authority on words and grammar
Opening copy options
Option 1 | Option 2 | Option 3 | Option 4 |
This is an experimentation with 3 lines, which would run consistent to another set of 3-line text further down the scroll. It also retains newsroom’s recommendation of following keywords, with additional hooks to convince users’ of myBT’s value. | An angle that immediately gets instructional with users, considering that there's already a precursor and context to myBT that precedes the entry to this landing page. Contrary to option 1, I dropped the verb 'curate' as it may come across trite and jargon-like, replaced with the more layman 'read what matters to you'. | Went with a mix of practical instruction (i.e. follow keywords) and marketing airy-fairiness (own your news). This option reads the punchiest, and is neatest in terms of the string alignment. | In this option, it can be taken as the reverse of option 3. I led with what the sell was, and that is the ownership to customise your own news experience in the way you want. The instruction comes second. |
Project feature 5: Gift an article
Introduction
BT's 'Gift an article' feature already exists on the web experience, but not on the app. It is a subscriber-only feature that lets users share premium articles to friends and family, so they get to access and read for free.
The BT team now wants to achieve web-app parity, with an opportunity to refresh and infuse more appeal to the feature.
Objective
Achieve web-app parity, considering that it is much more convenient to share premium articles via phone messaging apps (compared to the web platform)
Increase number of subscribers by subtly encouraging a 'gift that keeps on giving' mindset
Problems & Solutions
Users who have doubts about how exactly to use the feature, or want to find answers to article sharing limits and blockers, would need to head to the FAQ. The FAQ page isn't user-friendly. The solution here is to introduce a first-time onboarding page with clear instructions.
A 'loophole' is that anyone with the gift share link can access the premium article for free. It's not limited to just the recipient. Therefore, the product logic was tweaked such that the gifter can only gift up to 5 premium articles a month, and recipients can only redeem and read for 14 days.
Originally, gift recipients were required to sign up for an account before they could redeem the premium article for a free read. This requirement was abolished to reduce friction for users, replaced by an end-of-scroll nudge to become a subscriber (so they can also become gift senders in the future).
What's so attractive about sharing a paywalled article? Users can easily find similar news on other free news sites. Writing the copy to sell its value is a tough task that would require plenty of deliberation.
Screen spotlight: Onboarding (one time only)
UXW rationale
Hitting the paywall has been a source of irritation for users, who simply want to glean the gist of the news and move on
The idea behind the copy (below illustration) is to target that irritation and bring about a community spirit at the same time. The subscriber can share premium articles with friends and family, and they don’t have to be subscribers themselves.
Create a sense of FOMO: Help friends and family stay updated on the latest and greatest
Stress the fact that it's free. Locals have a fixation with freebies.
Screen spotlight: Onboarding toast (one time only)
UXW rationale
This is the very first introduction to the feature for subscribers, even before the full-page onboarding screen
Left screen: This is a placeholder copy from the PD
Right screen: This is what I edited it to. There's no need to lead with 'As a subscriber', since this only appears for subscribers who are logged in. Non-subscribers wouldn't see this. At this point, it is more important to sell users the value of this gifting feature than to get into the limits (i.e. only up to 10 articles/month), that being the fact that a premium story can be read for free after it's shared as a gift.
Screen spotlight: Recipient redeems gift
Before (left screen): I pondered if there's really a need for the grey placeholder text to be included, since both the gifter and giftee would've already been informed at this point (during onboarding and in the text message template) that there is an expiry date to the gift redemption (i.e. 14 days per the latest update). I even considered doing away with the body text altogether, just so we can have the recipient start reading right away.
After (right screen): Following discussions with the PD, we came to a consensus that it might be a good idea to add a touch of personalisation, hence the copy 'Enjoy this premium story from {gifter_name}'.
Comments