Atomic Smash homepage splash

How to personalise a user’s sign up journey in Axure

Words by Megan HowellMarch 12, 2019

I’m going to show you how you can personalise a members’ login area by passing a user’s name from the join screen to the welcome page. We can do this by passing a variable in a text field (the user inputting their name), making it reusable on another screen.

Before we begin you will need to know two things; what a variable is and what conditions are.

 

Variables – are things that are passed from one page to another.

Variables in Axure RP are structures used to store alphanumeric information (the variable's "value"). ... Use a variable when you want to collect some information, like a name, and then pass it to another page and display it as part of a greeting message. Axure RP

You can read more about variables here.

Conditions – setting rules to interactions to say what fires, when, and how.

"Conditional logic" in Axure RP is a system of rules used in interactions to determine whether a case should fire. ... "Conditional expressions" are sets of one or more such rules assigned to cases, describing the scenario in which a given case should fire. Axure RP

You can read more about conditions here.

For this tutorial you will need to have set up three basic screens:

  1. Login
  2. Join
  3. Welcome

I have made a copy of all three screens for you here which you can use, or you can create something different if you prefer.

Once you have set up your Axure document you can begin to make the pages link together

Make the ‘Join now’ CTA on the login page link to the ‘join now’ page.

  • Begin on the login page, select the ‘join now’ CTA. Find the ‘on click’ case in the properties manager. This should bring up your ‘case editor’.
  • Select ‘open link’ on the left-hand side and select ‘join now’ under configure actions. Click ‘OK’.

Make the ‘Submit’ CTA on the join page link to the welcome page.

  • Begin on the join page, select the ‘submit’ CTA. Find the ‘on click’ case in the properties manager. This should bring up your ‘case editor’.
  • Select ‘open link’ on the left-hand side and select ‘welcome’ under configure actions. Click ‘OK’.

Making the fields ‘Username’, ‘Password’ and ‘Confirm password’ text fields so they can be typed into. 

  • Take a text field from the widget library on the left, and put it on top of the username text field.
  • Change the style and font in the inspector on the right-hand side to match what you have chosen to use in your document.
  • Rename your text widget to ‘username field’ in the inspector on the right-hand side.
  • Duplicate the ‘username field’ widget and put it on top of the ‘password’ text field.
  • Rename this widget to ‘password field’.
  • In the properties manager change the ‘type’ to ‘password’ in the drop down. This is because this text field is a password and we do not want to be able to see what the user is typing.
  • Duplicate the ‘password field’ and put it on top of the ‘confirm password’ text field.
  • Rename this widget to ‘confirm password field’.

Check that all of your styling and fonts have been carried over as well as checking that the two password fields are set to passwords in the inspector on the right.

Creating conditions on the text fields to ensure users don’t see the welcome page before inputting their username and password.

We want to make sure that users can’t go through to the welcome page if they don’t fill out the username field, password field and/or the confirm password field.

  • Go to the Join now page.
  • Click on the submit button.
  • Click on ‘case 1’ in the interactions editor on the right-hand side.
  • Select ‘add condition’ in your case editor.
  • Ensure the top of the condition builder now says ‘satisfy all of the following:’.
  • Begin by changing the below condition to ‘text on widget, username field, does not equal, value’.
  • Leave the last box blank.
  • You will now have set up the condition to say, if the user leaves the ‘username field’ blank and clicks submit on the Join page, they will not be taken to the Join page.
  • Click on the + to add a new condition.
  • Change the new condition to ‘text on widget, password field, does not equal, value’
  • Leave the last box blank
  • You will now have set up the condition to say, if the user leaves the ‘password field’ blank and clicks submit on the Join page, they will not be taken to the Join page.
  • Click on the + to add a new condition.
  • Change the new condition to ‘text on widget, confirm password field, does not equal, value’
  • Leave the last box blank
  • You will now have set up the condition to say, if the user leaves the ‘confirm password field’ blank and clicks submit on the Join page, they will not be taken to the Join page.
  • Select ‘OK’. This will have successfully set up the conditions.

This means that the user will not be able to move onto the next step if they don’t fill out any of the conditions we just set.

Set a variable value on the conditions we just set 

  • In your actions panel (left-hand side of the case editor) select ‘set variable value’ which sits under ‘variables’.
  • Select ‘on load variable’.
  • In the ‘set variable to’ section, change the drop down from ‘value’ to ‘text on widget’ and change the last drop down to ‘username field’.

You will see that the interactions have been set up with the conditions first, then opening the welcome page, then the variables. These need to be reordered otherwise the variable will not fire as it is sitting below the open welcome page interaction.

  • Drag ‘set value of on load variable equal to text on username field’ above ‘open welcome in current window’.
  • Select ‘OK’.

Set the welcome message

  • On the welcome page select ‘on page load’ in the page interactions on the right-hand side.
  • In the case editor select ‘set text’.
  • Select ‘welcome message’ in the right-hand side of the case editor.
  • The bottom of the case editor should read ‘set text to, value, welcome’.
  • Select ‘fx’, this allows you to insert a variable or function.
  • Select ‘insert variable or function’ and select ‘on load variable from the drop down.
  • This should now read ‘Welcome[[OnLoadVariable]]’.
  • As there is no space in between the ‘Welcome[[OnLoadVariable]]’ we need to add one in to make sure that there are spaces in the welcome message. (Whatever is inputted here will show once the user has put their user name into the username field.
  • For this example, I have put a ‘!’ in this text.

Here is a YouTube video where I carry out all of the steps I have outlined above.

By doing this tutorial, you should now be able to personalise a member’s journey.

I hope you found this useful.

My next post will show you how to add tooltips and alert users when their passwords do not match.

Profile picture of Megan Howell

Megan Howell

Megan works closely with our clients to understand their goals and users' needs to deliver empathy driven projects here in the studio.

Go back to top

Keep up to date with Atomic news