UX copy review of registration and authentication journeys

ZAVA

Introduction

ZAVA is an asynchronous online service that lets users request prescription medication without seeing a doctor in person. To request medication, users must create an account and complete an online ‘consultation’. Users need to log in before they reach the final step (payment), if they aren’t already.

ZAVA’s team of doctors review users’ details before prescribing treatment, if suitable.

The problem

Originally the Product team spotted a large 44% drop-off when users reached the log-in step during their consultation. This was concerning as this impacted conversion.

User feedback (via Hotjar and our Customer Support inbox) gave a voice to some of the specific problems they were experiencing across the registration and authentication journeys.

Registration

  • The system did not accept phone numbers without the country code. Contextual content (e.g. placeholder text, error message) did not make this clear with users confused by the term ‘international phone number’.

  • Users had problems proceeding to the next page once they clicked the button at the bottom of the registration form. My theory was that the UX design did not make it clear that there were errors in the form. This meant users had to scroll back up to discover this.

Log-in

  • Where existing users had problems logging in with their details, the error message gave no clear instructions to help them resolve their issue.

Verification

  • Users were confused about what they should do with their verification code. Some incorrectly forwarded this to the Customer Support team.

  • We sent users an email with their verification code but no link to the page to enter this. This was a particular problem for mobile users who closed the page when checking their inbox.

  • Where users had problems with their verification code being accepted, the error message gave no clear explanation or instructions to help them. Our assumption was that users might be using an old verification code since code emails had the same subject line and would be grouped together as a result.

You can see a snippet of the insights and feedback gathered by the UX team, below.

A workshop with teams across the business generated several ideas to resolve these problems. At the top of the list was a full UX copy review while Product went away to investigate other, more intensive solutions like one-step registration.

I was brought onto the project at this stage by the UX Lead.

Actions

With the user insights and feedback above, I reviewed all copy across the registration and authentication user flows in Miro. This covered page copy, error messages and transactional emails.

I looked at other online services to identify strengths and weaknesses in their journeys. I narrowed this down to a direct competitor (Boots Online Doctor), a well-known service (Amazon) and a service consistently rated highly for this (Canva) since we were short on time.

The UX Lead also asked for my thoughts on further improvements that would require UX/Product work. For more significant changes like removing fields or elements, I created very rough, mid-fidelity prototypes in Figma to illustrate my ideas. See password reset page example below, showing the original and prototype screens.

I presented my ideas to the UX Lead and made any necessary amends based on her feedback.

Examples of copy changes

Log-in page - error message

OLD COPY (See image below)

Your password or email address has not been recognised. Please check you have entered your details correctly and try again. If the issue continues, and you need further assistance, please contact our customer support team.

NEW COPY

Please check your details and try again. If you still have trouble logging in, quickly reset your password or message our Customer Support team at [EMAIL].

Notes:

  • The original line ‘Your password or email address has not been recognised’ was vague and unhelpful.

  • The new copy gives users practical instructions and relevant onward journeys within the message (e.g. password reset link, CS team email address). This way users feel empowered to resolve their issue quickly.

  • I softened the language to make this less negative and robotic (‘has not been recognised’) for frustrated users.

  • I reduced the overall length so users can quickly determine what to do next.

Forgotten password page - CTA button

OLD COPY (See image below)

Request email

NEW COPY

Send reset code

Notes:

  • The previous ‘Request email’ CTA copy was unclear, especially for users who quickly scanned the page. Plus it makes more sense to emphasise the code which users are looking for, not the email that it’s contained in. The new CTA copy works with the key page elements (e.g. page title, field label, placeholder text) to quickly establish the relationship between users forgetting their password and requesting a reset code.

Verification code email

OLD COPY

See image below.

NEW COPY

Subject line: Your verification code is [CODE]

  • Front-loading the reset code in the subject line means users can get this without having to open the email.

Main email body:

Hi [NAME],

Thank you for joining ZAVA. Before we can begin treating you, we need to verify your email address.

Your verification code is:

314172

Please return to the email verification page to enter your code and verify your email address. If you have requested more than one code, please use the latest code we have sent you.

All the best,

The ZAVA Team

Notes:

  • The user need here is to get the verification code so users can complete their account registration and begin receiving treatment. I cut down the first sentence to get to the code quicker and amended the language to reflect this. I kept the original formatting to make the code stand out (e.g. bolded, large font size).

  • I reiterated what users need to do with their code and that they must use the latest code they’ve received. This was based on feedback that some users were confused about this and assumptions we made as a team.

  • The previous line ‘We’ve thrilled you’ve joined us’ sounded too emotional for our brand voice of a friendly-but-trusted GP. This also felt more suitable for the full welcome email users get once they complete this step. I also removed the surname from the greeting which felt too formal.

  • I made further UX suggestions to make it easier for users to verify their email and complete registration. This included adding a link back to the verification page from this email or even scrapping the code requirement altogether.

Registration page - SMS updates field

OLD COPY (See image below)

Notification method

[Checkbox] Send me text messages

NEW COPY
Order updates

[Checkbox] Send me text notifications (optional)

We will still send you order updates by email. Our emails and text messages will never contain sensitive information or mention the product/s you’ve ordered.

Notes:

  • It was unclear what these notifications related to based on the previous copy. For example, a user might confuse these with marketing communications. The new subheading copy makes it clear from the outset that we’re referring to order updates and that these are optional. I also reassured users that they will still get these via email but they wouldn’t include any personal information.

Registration page - phone error message

OLD COPY (See image below)

Please enter a valid international phone number

NEW COPY

Please enter a valid mobile number including your country code. For the UK, replace the 0 at the start of your number with +44.

Notes:

  • The previous copy confused users (‘international phone number’) and did not explain how users should enter this information to meet the tricky field input requirements. The new copy clarifies this with specific instructions for the primary audience (UK users).

  • I made a further UX suggestion that we should give users the option of selecting their country so they can enter their phone number without the code, as they would expect to do so on other websites.

Code verification page - error message when code is entered in incorrect format

OLD COPY

You have entered an invalid verification code. Please try again or request a new code.

NEW COPY

Please check the 6 digit verification code we sent you and try again.

Notes:

  • In this scenario, we know the user has entered a code in a wrong format so we can provide a tailored error message to reiterate what their code looks like.

  • I removed the previous line where we tell users that they’ve performed a wrong action as this feels very negative.

Code verification page - error message when correct code is not accepted e.g. user submits an old code 

OLD COPY

Incorrect verification code, please try again.

NEW COPY

Please check the verification code we just sent you and try again. If you still have problems, resend your code or contact our Customer Support team.

Notes:

  • In this scenario, we are not 100% certain why a code did not work. We can assume it’s because they’ve used an old code so I emphasised that they should use the code we ‘just’ sent them. This works whether a user has replied one or multiple codes.

  • I included further instructions on what to do if the problem persists including a link to our contact page to reach our CS team. We already display a link to resend their code on the page.

  • The previous copy sounded blunt, robotic and even flippant in tone. The new copy uses full sentences to sound more human and professional.