Artwork by Matt Rae
When starting a mobile app design project, it is a good idea to start by wireframing the experience, or segments of the experience, before launching into higher fidelity mockups. The process of wireframing can help identify any gaps in the user flow, or highlight points of friction before investing time into the finer details of the interface.
In this tutorial, follow along in the creation of wireframes for a mobile app sign up flow. Using basic shapes, and a grayscale color palette, you’ll lay out several screens into a flow that will allow you to validate and test the experience before the inclusion of details like color, graphics, and final typography.
Creating basic elements
A wireframe is composed of a series of simple elements, typically with grayscale or muted colors, and simplified to basic shapes like rectangles and ellipses. Since many of these objects are being used repeatedly, a basic library can be created of reusable elements.
To do this, first draw out a rectangle, and style it as desired to represent a particular element like a button. It can be helpful to add a text placeholder to a button, depending on the fidelity of your design. Since buttons are used in a sign up flow to progress to the next stage of the process, add a text box and center it in the button shape using the alignment tools.
Next, combine these elements into a group, and make them a component by using the right click menu options. With that complete, the element can be dragged out and used multiple times eliminating the need for starting fresh every time a button element is required.
Repeat this process with other common elements like navigation bars, image placeholders, and general blocks. Taking the time to set up common elements now will save you time throughout the process, and these components can be used to convert your design to higher fidelity when the time is right.
Alternatively, plugins and UI kits can be leveraged to create these elements. Plugins like Quick Mockup provide a collection of wireframe elements that can be quickly converted into components, or used as is.
Important steps in the sign up flow
For this sign-up flow, the first step is to create artboards for each of the various screens, or steps in the process. A typical sign-up flow will include, but is not limited to the following:
Home page: This page often includes a welcome message or app logo, along with options for logging in or signing up for the service.
Signup page: This can be a single page, or series of pages used to collect information like email address, name, and other information required for account creation.
Success and error pages: These pages are critical for providing feedback to the user about the status of the account creation, whether it succeeded, or if it failed, and how they can remedy the error.
This tutorial will be focused on the sign up flow, allowing new customers to register for an account. The same process shown here can be applied to creating a login page design for users with existing accounts, however rather than entering their information to create the account, they’d simply enter in their username and password to complete the login process.
Laying out the home page
The home page, or start screen, has a few key elements that should be included. Keep in mind your particular use case may have different requirements, or objectives and so your design should reflect those. Typically, the following is included:
• App Logo
• Welcome message
• Sign up options, or link to sign up page
• Log in options, or link to login page
On this page, either the login or the signup options are usually emphasized. In this case, to capture new user registrations more seamlessly, the sign-up options will be emphasized in this workflow, leaving the login options available, but subdued at the bottom of the page.
Start by dragging out a general block component created earlier, and extend it across the top of the screen, creating a placeholder for the clock, signal, and other OS level details. Then a basic rectangle or image placeholder, draw out a placeholder for a logo, centered in the screen.
Next, add in a placeholder for a welcome message. This text can either be written out with the text tool, or be simply represented using simple rounded rectangles. At early stages of the design it may be easier to simply block out this text with shapes rather than worry about writing copy.
The bottom of the page will include the options for signing up (creating an account) or logging in if the user already has an account. Your design may require options for third-party authentication services like Sign up with Google, or Sign in with Facebook; if this is the case your design will include multiple buttons for signing up that include these specific options.
For this tutorial, one single Create an Account button will be created. This is the button that will progress the user to the next screen allowing them to enter their details to create an account.
Using the button element, place it in the bottom third of the page, horizontally centered below the welcome message. Below it, draw a line horizontally across the page, spanning the width of the button, then add one more button that says Log in below the line. This button will be a secondary option, so the styling of the button can be changed to reflect that.
Creating the sign-up form
With the main page now complete, the next view in the flow can be created. Users navigate to this page after clicking on the Create an account button created in the previous screen. On this page users will enter various information like their name, email and password to create an account.
On this view a few text elements will be added to indicate which fields are which, much like the buttons on the previous screen had labels. You can choose to add text for the page title, or simply duplicate the text placeholder and place it at the top of the page.
Below the title will be various form elements. To keep it simple, the basic block element can be used here, or you can create one specific to input fields, including a border. Place one centered on the page, then using the text tool, add a label to the top left that says Name. This will act as the label for this input field – ensure the text is small enough that it doesn’t look like a title.
Next, copy and paste the input field elements again to create additional fields for email, password, and any other fields representing the data you wish to collect on sign up. Having your elements grouped will make this process easier. Add a button element at the bottom that will be used to submit the form and complete the form entry.
With registration flows, keep in mind that long forms and many questions may deter users from signing up, which can reduce conversion rate – keep this form clear and concise. As an alternative approach, you may wish to break the individual forms into separate views, focusing user attention to a single step in each screen. In this case, the view would be a single input field, with a button that says Continue or Next. Try creating a flow using each method and testing to see which performs best for your audience.
Connecting with prototype links
One of the many benefits to wireframing in Adobe XD is that the flows you are creating can be prototyped in real time, without having to export your designs to another application.
To set up a prototype link, toggle to Prototype mode using the tabs at the top of the screen. Once in prototype mode, clicking on an artboard or element will present a blue arrow which can be dragged to a destination of your choosing.
Try this with the screens that have been created so far. Use a Tap trigger, and experiment with the different actions. For a wireframe stage design keep it simple with either a Dissolve, or a simple Slide. Using more intricate animations may cause distraction from what you’re trying to test in this phase of the design.
Completing the flow
With the sign-up flow nearly complete, one more set of screens should be added to provide feedback to the user on whether or not their sign up is successful. Success and error messages are critical to a good experience, and shouldn’t be missed in the wireframes.
The success message fits well as a standalone page that displays when the Submit button is clicked. There will be a processing screen, and then the success message can be displayed. The error message works in a similar way, however it is most helpful to show the error in context wherever possible – which means, if there is an issue with the email, or password, highlight that input field and provide feedback about what can be fixed.
Create the success screen
The success screen can be created by simply copying the first screen and removing the sign up button and horizontal line. Next, we’ll replace the square placeholder with a check mark icon to indicate success. If you choose to, you can also replace the text placeholders with a real message like “Success, registration is complete.”
Create the error screen
To create the error screen, duplicate the form page. Since the errors should be shown in context, this page can be manipulated to show the error. For this example the email field will be the culprit. Select that block and style the input field to include a dark gray border (this will likely be red in the final design). Using the text tool, add a text box below the input field that says “Error: invalid email format” or an appropriate message reflecting the error you’re testing.
Other elements on the page, like the submit button, can be modified to reflect the error, or prevent further progress until the error is resolved.
To connect the error or success screens to the prototype, you can choose to connect one at a time, or duplicate the other screens from the flow and create two separate flows, one for error and one for success. This will allow you to test both workflows with users and iterate.
Alternatively you can also use transparent rectangles as target points on top of the submit button, with each one pointing to the success or the error screen, to add some mystery during the test.
This is a very low fidelity wireframe, and the key of this is to understand how various screens and views connect together to create a user journey. Starting by grouping basic elements into components for reuse will make the transition to higher fidelity easier. Components can be restyled for each stage of the project and applied across the design making it more efficient to iterate through your project.
Share the wireframe for feedback
Finally, using the Share mode in Adobe XD, this flow can be shared for remote user testing, or general design feedback. With the flow selected, choose either Design Review, or User Testing from the link type dropdown. This link can then be distributed, and as iterations are completed, easily updated with a click.
Congratulations, you’ve just wireframed a sign-up flow in Adobe XD. Next, take your learnings and apply it to the login flow portion of this app design.
