Straits Times: myST
Introduction: myST is a brand new release on the Straits Times app. It lets users personalise their news experience by following their favourite topics and authors. New users will go through the first-time onboarding and are required to log in or sign up for a new account. They can also go one step further to become a paid subscriber, and that would entitle them to more benefits.
Showcase #1: How the copy evolved to go with the design developments
The flow in focus: A 3-swipe onboarding concept that got combined into one single screen
Mid-fi design concept
Hi-fi design concept
What changed between the two editions:
The swipe screens that feature the e-paper and rewards are deprioritised in favour of a single introductory screen (right-most one on the updated flow), with a preceding screen on notifications permission. New users or those who aren't logged in will see this.
Since we're promoting the new myST feature, it does make sense to do this as users can get alerted to breaking news based on their chosen topics under myST
To put it into context, the e-paper and rewards are merely bells and whistles
UXW changes and considerations
The UXW copies in the original flow had to be scrapped and restarted to fit the new flow. Moreover, the logic had also changed - users with a free registered account (i.e. non-subscribers) can only follow up to 2 topics instead of 3.
Now that there's only 1 single onboarding screen, I had to compact only the most essential information to start new users off with. I didn't have the luxury of space and multiple screens, like how some new launches come with a 3-swipe splash.
I worked with the assumption of the lowest common denominator, which is a user who is completely new to the ST app. Say, someone who only just moved to Singapore. The term myST would be made even more alien. Hence, I kept it generic and offered the proposition of a 'tailored news experience', and what it meant exactly.
These are the various options that I walked the stakeholders through
Option 1 | Option 2 | Option 3 | Option 4 | |
Header | We've got a tailored news experience for you | Make ST yours | Do the news your way | Get to the heart of your news |
Body | You can curate your own feed by following topics and authors, and read what matters to you. Log in or register to start. Or, become a subscriber to unlock more features. | Our all-new myST lets you tailor your news digest by your favourite topics and authors. Log in or register to start. Or, become a subscriber to unlock more features. | You can curate your own feed by following topics and authors, and read what matters to you. Log in or register to start. Or, become a subscriber to unlock more features. | Our all-new myST lets you tailor your news digest by your favourite topics and authors. Log in or register to start. Or, become a subscriber to unlock more features. |
The latest decision at the time of writing (pending newsroom review)
Header
We've got a tailored news experience for you
Body
Get served only the news you want on your feed, by following topics and authors. Log in or register to start. (Note: The part about subscribing is pending further changes as there are conflicting views about a CTA urging users to subscribe this early in the going)
Onboarding screen for existing users or those already logged in
Options I proposed to stakeholders
| Option 1 | Option 2 |
Header | New: Curate your own newsfeed with myST | Experience myST today |
Body | You can now follow your favourite topics and authors and read the latest on myST. Log in or register to start. | Our all-new myST lets you curate your own newsfeed and read what's most important to you |
Showcase #2: UX copy edits for myST toasts
The flow in focus: A first-time toast informs users that they can start following topics or authors as part of myST. If a user follows a topic or author, there'll be a follow-up toast acknowledging it. The below screens will focus on the 2 followed states.
How the first-time introductory toast looks like (no change to copy by UXW, except for a suggestion to remove the exclamation mark):
Now, let's look at the two toasts under the followed state, and how the copy changed.
UXW Rationale:
In the original copy sets, the headers read like a sentence fragment, and it is made to sound enthusiastic about the new release with an exclamation mark
However, the ST voice and tone leans into one of practicality and flatness. If the '!' is removed, the headers would come across overly curt.
In the new revisions, the headers are rewritten into a full sentence, and it gives users an on-the-spot acknowledgement that their action is successful in the now
Instead of using punctuations like exclamation marks, I went with a second person angle to establish some form of connection with users, while balancing out the flatness in the manner of speaking
In the original descriptions, they start with 'Go to myST...', as though it's a CTA emphasising on the importance of going to myST page at this point. But it's not a mandatory option; in fact, it's unlikely that users would do that. They only need to go there if they want to unfollow a topic or author, which isn't the main intent at this moment.
Showcase #3: Topic and author limit errors
Introduction: These are error cases that users encounter when they follow more topics or authors than their current limit. The limit depends on whether they're a registered user (non-paid, has an account) or a subscriber (paid and has an account).
The flow in focus: Users are setting up myST for the first time and selects more topics than what's allowed
UXW Rationale:
In the low/mid-fi design (left side), the copy would've complemented the light-hearted illustration well. However, that seems slightly out of character, with ST's personality, and voice and tone in mind.
It'll be good to focus on the usefulness. In the revised copy (right side), it clearly indicates what the topic limit is (i.e. two), in case they missed the instruction at first (i.e. the description in the background that says 'Let's start by choosing two of your favourite topics)
'Keyword' is changed to 'Topics' for consistent terminology usage. For further context, 'keyword' is used in Business Time's vernacular, not in Straits Times.
- - -
The flow in focus: Users are setting up myST for the first time and selects more authors than what's allowed
UXW Rationale:
We see the same voice and tone issue for the left-hand screen, with the placeholder copy provided by the designers. There's hardly anywhere else on the ST app ecosystem that speaks in such casual manner. Given this is an error, a more effective messaging would quickly help users bypass the roadblock.
This is seen in the right-hand screen with the revised copy. Users are informed that the maximum number of authors they can select is two (this isn't mentioned in the placeholder copy).
There's not a need to greet the user here since it's already done at the beginning of the setup. Moreover, '...hit your author limit' sounds like an informal way of speaking in a casual face-to-face conversation, which compromises on the integrity of the language compared to the revised copy.
- - -
The flow in focus: Users who aren't registered or have yet to log in will be blocked by this bottom sheet if they try to follow a topic (left screen) or author (right screen). They'll be prompted to either log in or register for a mySPH account.
Now, let's look at how the copy got revised. (Note: UXW's suggestion in text box to the right of each screen)
UXW Rationale:
As this is a straightforward login or account sign-up procedure, there's no need to get fancy at this point with gamification terms (i.e. 'unlock)
The body text elaborates what exactly the user is logging in or signing up for, and that is a mySPH account
Give users the assurance that getting an account is totally free
The body text for both cases are made recyclable and applicable in both cases of authors and topics limit
Grammatical polish: Single sentences don't require periods; 'login' is changed to verb form 'log in'; Added spacing to the slash in the CTA; 'Register' edited to be in lowercase
Comments