10 Flows Every Subscription Service Website Must Have — The UX Checklist
10) Signup Via Social Network
Preferably via a third-party OAuth provider, such as Facebook, Google, Twitter, LinkedIn, GitHub, etc. Unless you have security as good as theirs, there is (almost) no reason for you to require yet another password for me to remember.
- Only ask for the information you really need. You can always ask for more information later (all you need is signup for now).
- Not all services provide an email address as part of their profile.
- If you require an email address, make sure you send them an email verification link (which is a sub-flow within the Signup Flow).
- Do not consider any email address (except those given by the OAuth providers) as verified until the user has clicked the link you send them.
9) “Forgot your password?”
- This feature should only (and I mean only) be there for websites that require signup via email address.
- Make sure your password-reset email gets to me quickly (like two minutes max).
- Make sure it gets delivered to my inbox, social or promotions tab in gmail. Swift delivery to trash doesn’t count.
8) A Cancel Button
This should function like a “Kill Switch” — don’t bargain with me, don’t make me go hunting, call a phone number during your business hours or send an email. Just give me a button. If you must ask why I’m canceling my subscription, offer some suggestions from a list and provide me with a text box to type a longer message if I want to.
- Send me an email right away to acknowledge my account cancelation.
- Use clear language to let me know if my service ends instantly (and you are issuing a pro-rated refund) or if my service continues until the next scheduled billing cycle (and note the date). Put these details in the email you send me.
- This email should be delivered to my inbox, social or promotions tab, not the trash.
7) Shareable Content
If I like something, I may want to share it with my friends. Make it possible for me to do this. That means that when you’re planning a new feature, think of ways to let your users help you get the word out.
- Blog article — a company blog about the new feature (even before it’s released) is the simplest way. You don’t even need to develop the feature first. You don’t even need visual design or wireframes. Just describe the feature in a way that makes sense to your average user. If you can’t do it with a few words, rethink your feature. Simplify it until you can.
- Achievement Badge — something like Amazon’s “Hey everybody I just bought dish soap!” sharing suggestion, but less ridiculous.
- If the content is somewhat personal or sensitive, allow the user to require authentication before others can view the content, and allow them to restrict who views it (and to disable viewing it altogether if they so choose). Make sure this functionality is simple, clear and well-tested, because it’s an immense leap of faith and your users are depending on you.
6) Pre-Billing Notification
Verizon Wireless is good here. A simple text reminding you that you’re about to be billed $159.73 in a couple weeks is helpful because really, how long can a person go without their smartphone? A day? How about five minutes.
- Remind the subscriber that another billing cycle is about to start.
- Don’t make it a marketing email. Just give them the facts.
- If the card on file is going to expire soon, a reminder that the user should update it to a new card can help reduce failed charges.
5) Post-Billing Notification
- How much did you charge me?
- Did it succeed? Did it fail?
- Which card did you charge?
- When will I be billed next?
4) Failed-Billing Notification
Github gets this right. Failed payment? No big deal, but they let you know clearly how long you have until your premium features get disabled, and provide you with a way to contact them to discuss details. It’s non-accusatory and dignifying.
- Give me a chance to fix it via the web, on my own time, without calling anyone.
- Tell me how long before my service is interrupted.
- Don’t interrupt my service right away.
3) Add/Update Payment Method
This should be painless, and fast, and look great on my phone because the only place I’m checking personal emails and doing anything about missed payments is on the train to or from work. So don’t make me haul out my laptop and tether to my smartphone just to update the credit card you have on file.
- Tell me what the problem is when I sign into my account. A notification bar at the top of the page is fine. Don’t give me a modal because I’m just going to close it anyway.
- Give me a link to click in the notification bar about my payment method.
- Page 1 — enter new data.
- Page 2 — confirm new data.
- Page 3 — confirm new card works and has been charged (my account is now current) or will be charged (on the next billing cycle).
2) Upgrade/Downgrade Service Plan
This is so obvious, but gets overlooked almost every time.
- Make it easy for people to upgrade to a higher service level.
- Make it easy for people to downgrade to a lower service level.
- Let them try the higher service level for a limited time.
If letting the user do as they please with their service, their money and their time are not part of your business model, then please reconsider your motivation for being in business in the first place.
1) Unobtrusive Onboarding
Onboarding can be as simple as a single page with screenshots and examples. A nice H2, a thumbnail of the page or dialog and a bulleted list of things I should know really go a long way. I can bookmark it, and come back later. Your support staff can send me a link to it via email or chat. It can be timestamped so users can see how long since the onboarding documentation was updated.
- You don’t need to have fancy popup boxes, animations and talking paperclips to show me how to use your website.
- Don’t require me to click “skip” on several pages of “helpful” onboarding suggestions (Twitter, I’m looking at you).
- Do provide a direct link to the onboarding docs in the welcome email I receive after signing up.
- Do keep your documentation up to date as your product evolves.
- Do practice documenting the product before it is developed. It might sound backwards, but if you can’t explain it to your users, how can you build it?
- Do look at http://emptystat.es/ for inspiration and ideas.
- Do show me what would be in a blank space (e.g. “You have no friends. Click here to find some.”)