Interaction Design Flow: Sign Up pages
Sign up pages are the gateway to most applications. Typically laid out as a form, new users will insert their basic contact information, a password and the i-swear-to-god-i-read-it checkmark by the agreement to the terms of service. Depending on the depth and purpose of the app, the sign up process may be more complicated than this. Once everything is verified, it allows the user access to the application and also gives the company weird rights like signing you up for every email campaign and tracking your location. But they also give users a chance to identify themselves. In some cases, this alters the experience of the application, such as with the recommendations or even core functionality of dating apps or fitness apps.
What does this already process look like?
I looked closely at four different kinds of applications that have different levels of engagement, levels of security, and prioritisation around sign up. For example, some apps require a user to have an account to use the other features of the app and others do not.
Wells Fargo Banking App
The Wells Fargo App is a mobile banking app that requires an account to use.
Upon first opening the app, it invites the user to into their account rather than sign up for an account. The bottom of the screen is an “Open an account” button that links out of the app into their a mobile web page of their traditional account sign in. This was interesting and appealing to me as a user who wanted everything in app.
I was a bit surprised that the sign in page was so far down and non-flashy too. Banks make money when people put money into their accounts. It seemed odd to be that they took nearly half a screen of real estate for a carousel over promoting different accounts for people to open.
Unlike a few other apps I looked at, Wells Fargo’s mobile landing page was scrollable, which they used to advertise more sign up related links and links to blog posts for use cases of different accounts and loans. This makes the earlier carousel a bit more intelligible as a buffer between the sign in and the sign up. Still odd, but now more understandable. The bottom third of the screen fits my expectations for a bank: service and fine print at the bottom of the page.
Pain points
- Signing up is an out of app experience
- Page real estate feels overwhelming
The LinkedIn mobile app requires a login to be used on mobile, but the web app has limited functionality without an account to show off what it can do. I thought there was a bit of dissonance between the web and mobile apps’ landing pages: the mobile app draws people to the “Join now” sign up function and the web app loudly calls out to the user to sign in. It’d be significant to know if these were metric-driven decisions. Does LinkedIn have more account sign ups on mobile than web? If so, why? Or maybe why not?
In the web app, there are two different sign up links to the left of the “Sign In” button: Join with Resume and Join Now. Both links direct to the same looking page. I think LinkedIn could condense and offer the resume upload at a later part of the workflow. Knowing which button drives more sign ups would also be an interesting metric to track.
The carousel on LinkedIn’s mobile app provide more context as to what the app does. Whereas the web app takes advantage of more pixel space and shows off a greater amount of the site’s functionality such as job search, learning and job posting. The job posting links to a different login, which isn’t an option at the top. Instead of having “Sign up with Resume”, “Sign up”, “Post a job” in different parts of the page, it could be simplified to “Sign up” and “Sign up as Recruiter” at the top of the page.
Pain points
- Confusing job language
- Different sign up locations for different functionality
- Promotes signing in more than signing up
ClassPass
ClassPass requires a user to login to an account before using the app, but users can search for studios on the web app without signing up or in. As a user, I think hiding this functionality in their mobile app is a value loss because I’d want to confirm what I want is there before committing to using my 14 day trial. On the other hand, this does force more sign ups because people have to sign up in order to use the app — unless they delete it.
ClassPass’s language is a friendlier a bit less demanding with the verb “Try” rather than than “Sign up” or “Open”.
Their actual sign up page is designed to be as frictionless as possible, offering the easiest option (by clicks) first, though it comes at the assumption that the user has Facebook and is logged in on their phone. It’s noteworthy that the password field is missing, most likely removed because of the failed attempts people encounter when passwords have restricts such as casing, numbers and special characters.
Pain points
- Can’t use app at all without signing up
How could this process be redesigned?
Let’s say I want to design a sign up page in a mobile app where the business priority is the amount of account sign ups. From the past 3 deep dives, it’s crucial that the placement, language and lowest amount of friction are my top 3 priorities. I’m most interested in combining the preview feature of the LinkedIn mobile app with the simplified interface of ClassPass. While Wells Fargo is more popular than ClassPass and LinkedIn combined, the extra layers of security make the signing up process bit more complicated, and honestly I wouldn’t want to do it on a small screen mobile app anyway.
In this very simple redesign I’ve made the following decisions:
- Condensed the informational carousel and the landing page
- Make the carousel timer based that’s also paused on touch so the user doesn’t have to swipe through manually
- The contents of the carousel should be a combination of graphic and phrase that begins with a leading verb
- Reduced the amount of words
- Leading action verb would depend on the app’s purpose, but the point is to avoid saying “Sign up”, “Submit” or “Create account” anywhere
- Deemphasize the TOS statement
- Leave login button on the sign up page
- Put the sign up buttons closest to the thumb
Sign up pages are the first conversation a company has with their users. Make sure you’re saying everything you want.
