Using data to strategically notify users about an important upcoming change
Frictionless Required Registration
Knowing who our users are through registration opens up a door of opportunities for the business, from personalisation to gathering in-depth data. Therefore, there was a request from the business to transform all our Mobile App users into registered users.
The benefits for the user include unlocking certain features related to their account and increased customer support.
However, there was a high awareness of how this could affect the user base; there is a high chance of churn (estimated at 20%), from a change like this. This project was a balance of completing the business requirement, whilst making sure all steps are taken towards mitigating the users' frustration.
Project
Transform all Mobile App users into registered users
Role responsibilities
Balancing business needs with the user experience
CHAPTER 1
Understanding the problem
Since such an impactful feature was coming, it seemed only fair to let users know what to expect in the near future.
The upside was that we had approximately a month to notify users about the upcoming changes before required registration would be implemented. This month period was coined the ‘warm-up phase’. This phase allowed us to have more freedom to softly introduce the upcoming change.
​
The message we wanted to communicate to the user was broken into the following design principles:
Clarity
Benefits for registering
In-app messaging seemed a wise choice, as this was an announcement that was important for all our users to know. Outlining benefits was key for keeping users engaged with us, so user testing the copy to find out what worked, or what didn’t work, was essential.
Choice
Register now, or later
Whilst in the warm-up phase, users didn’t need to register to read content. However, highlighting that an account can be created right now, and directing them to do so if they wish, gives users the choice to do it sooner rather than later.
Consistency
Reusing elements
Using the design system to keep alignment across all Sun products to ensure legibility and familiarity.
Design elements
Reusing elements was key to keeping consistency across our products.
Initially, I was experimenting with a short banner which we had used to communicate messages in the past, however, I was keen to outline more information stating the benefits of registering, which wouldn’t fit on a short banner.
After looking at tools in our design system, it was deemed a modal outlining the highlights would be the quickest win to convey the essential benefits to the user, based on tight time constraints and resources.
The question then became where to put this modal during the warm-up phase.
I decided on the modal placement based on data and analysing all the other prompts that the app surfaces for both new and existing users. I will delve into this a little later on.
'Warm up' banner
Modal wireframe
CHAPTER 2
Using data to inform the flow
Modal positioning
I undertook both my own research and studied research from best practice articles to inform my decision on where the modal was best suited in the flow.
Data suggests users are more likely to register, especially new users, if they get a taste of the content whilst in a grace period.
They can then decide if they see value in registering. In our case, this makes sense to allow users to have a certain number of articles that they can read before we prompt them to register with our modal.
To back this data up, I sent out a survey to 100 of our users, asking when they would prefer to be prompted to register. 59% responded that they would like more time to read content before signing up.
Gathering data from our research team and Google Analytics, 46% of users will see 3 or more articles in their average session.
Based on this, I decided we should show the modal when the user clicks on their third article within their session. I was hesitant to show the modal earlier than the third article selected but I wanted the modal to be seen, so I made an informed decision considering the data and research.
Survey feedback
Why the third article, then?
This is to give enough breathing space between the banner (which we were placing on the homepage for all users to see until the warm-up period expired) and reduces the cognitive overload of the message being repeated so soon.
Just as important, it was to avoid clashes with the other modals which appear each time the user launches the app.
This is particularly important for new users; between 26th – 31st August we had approximately 18k new users, which I am keen we don’t bombard with an overload of modals and we can use sessions to our advantage to control this.
Also, letting the user read two articles before being nudged to register gives the user at least a taste of the product, with the majority of users likely seeing the warm-up modal, which is seen more as a supplementary message.
User flow for 'warm-up' modal positioning
CHAPTER 3
Click tests and heat maps
Testing the permanent modals
The warm-up period will have its own modal; just very simple, outlining changes that are coming.
The modal which is most important to us and the one I was most keen to test given the tight time constraints, is the permanent modal.
​
This one will not have the grace period as the warm-up does. This permanent one will be seen immediately by all users upon trying to read an article, once forced registration is implemented.
​
Two modals were tested with 100 users through an unmoderated task which I set up through UserZoom.
Option 1
Option 2
I ask the user to go through an interactive prototype and click an article that catches their interest. Upon clicking the article, a modal pops up (either modal 1 or 2, it’s random which one the user sees first).
The user is then asked to interact with the modal as they would naturally. The modal is set up as a click test, so we capture data such as tracking where they click and how long they stay on the modal. This is important, as we can see an overview of how the two modals performed against each other in a heat map.
I then ask the user a series of follow-up questions — a mix of qual and quant.
​
Afterwards, the user repeats the process with the modal they didn’t see the first time around. In the end, they are asked to compare the modals in a series of categories.
Sun mobile app homepage, clicking an article prompts the modal to appear
Option 1
Option 1 heat map
Summary
After analysing the feedback it’s clear that:

​
-
Wording
Option 2’s message was far better received; outlining exclusive perks such as app-only offers are really important for registration persuasion

-
Visual
Option 1 grabbed more participants' attention with its enticing imagery
Here’s a breakdown of which modal gained higher results in each category.
Option 1
Attention
Visually
Option 2
Clarity
Wording
Registration likelihood
Overall preference
CHAPTER 4
Recommendations and next steps
Based on the user testing feedback and data, I recommended the following.
Combine the best of both worlds
Merge Option 2’s text and Option 1’s phone image to have a well-explained and eye-catching modal.


Phone image
Implement the phone image, but we should consider the negative feedback from it, and update the teaser to show a more professional or uplifting image — no celebrity crying like we had used in user testing!
​
Where we are now
Currently, the flow is ready and has been refined, the modal designs are now finalised and are going through development. I will work closely with the BAs and Product Managers to monitor the number of registrations we gain and what percentage of users see the modal, and make any adjustments if necessary.
Future steps
We should still consider a grace period, even if it’s in the future — the vast majority of users expressed they would like more time to read the content before registering, so allowing them to read more articles before asking them would likely have a more positive outcome and be a better experience.
Modal based on recommendations