Design

From Beta to Launch - Sign up

Aug 09, 2015

I originally intended for the “From Beta to Launch” post to be a single post, but I quickly realized that I have so much more to say. So, I decided to extend this topic into a series. In the first part, I wrote about the messaging changes needed to handle both beta and trial users. In this post, I’ll walk through the sign up redesign and why I’m still kicking myself for not redesigning it before launch.


The entire time I’ve worked on Cushion, I’ve focused on taking small steps when making changes. Instead of rethinking an entire portion of the app, I’ll tweak it, little by little, to make it work with the new addition. This approach has worked out really well, until recently, when I opened Cushion up to trial users.

Small steps worked in the past because the paid beta users were the constant. Because they were literally invested in the app, I could count on them sticking around for the duration of the beta. This allowed me to design the sign up process in a very specific way.

beta-to-launch-signup-beta-pricing

beta-to-launch-signup-beta-checkout

Potential users would arrive on a page with beta details and pricing. This page included features, testimonials, and frequently asked questions—everything they’d need to know before signing up. Using Stripe Checkout, they could even pay for the beta from this page.

beta-to-launch-signup-beta-account

If the person decides to join the beta, they’re greeted with the first step in the onboarding flow—creating an account. At the top of the onboarding page, a trail of breadcrumbs indicate the user’s progress, repurposing the schedule timeline’s elements and establishing the visual tone of the app. These breadcrumbs hint to the user that setting up their account will only take three short steps.

beta-to-launch-signup-beta-timeline

Next, the user creates their timeline. By default, I start them with the current year and a few financial goals. They can change anything if they want or just click “next”.

beta-to-launch-signup-beta-lists

The “final” step lets the user create a few lists. By default, I suggest several lists to start, with the list names hinting at their intended purpose.

beta-to-launch-signup-beta-thank-you

As a surprise “feel-good” move, I inserted a hidden step to simply thank them for supporting Cushion. Think about it—they invested upfront without ever using the app. This is quite a leap of faith and not something to take for granted.

beta-to-launch-signup-intercom

Once the user clicks “finish”, Cushion redirects them to the app. An automated message then appears from me, personally greeting them and suggesting they start by creating a few projects and invoices.

That was the sign up process throughout the beta. It received a solid response from beta users and I felt good about it. The surprise “thank you” was a big hit.

beta-to-launch-signup-trial-welcome

In preparation for launch, I made a few small tweaks to the sign up process to handle trial users. The users were greeted with a welcome screen to prime them for the next few steps.

beta-to-launch-signup-trial-payment

Creating their account remained the first step, but in-between this and the timeline step, I inserted a new step for payment information. I know what you’re thinking—big mistake.

With a lot of launches, a good number of people sign up with no intention of using the app—they simply want to kick the tires because it’s a new app. That’s fine for an app supported by a team, but for a solo dev, it’s tough. I can’t afford a wave of users who know they won’t use the app, so I decided to require payment info upfront. I still think this was the right move, but I realize now that I went about it in the worst way possible—as an unexpected surprise.

By taking small steps to tweak the sign up design, I never took a big step back to reassess everything. I never considered that maybe the sign up process needs more than a few tweaks—maybe it needs a complete overhaul. I simply refashioned what I had, so it would work with trial users.

When the beta users were the constant, this onboarding flow worked, but with trial users, I failed to consider a few things: 1) Trial users aren’t invested in the app. 2) Trial users might not even know anything about it. 3) Trial users don’t need to follow through with the trial—they can bail at any moment.

I should’ve taken the time to factor in these differences.

beta-to-launch-signup-trial-crumbs

In addition to the surprise payment form, those once-useful breadcrumbs became a daunting list of chores—and payment information was step 2 of 4! To a fresh pair of eyes, what could possibly come after payment information? The onboarding flow that I was once so proud of had become an eerie river of red flags and obstacles. I was mortified when I finally took a step back. Redesigning the sign up process became my top priority.

beta-to-launch-signup-pricing

I started by revisiting the new marketing website—its bright colors are so friendly and inviting. The sign up page, on the other hand, feels like a cold white room. By extending the design of the marketing site to the sign up page, I could smooth the transition and make a more welcoming first impression.

beta-to-launch-signup-horizontal

First, I tried a side-by-side layout. Visually, it felt consistent with the pricing page, but the zig-zag path interfered with the form’s natural flow. Instead of following a single direction, the user would need to move left-to-right, then down.

beta-to-launch-signup-vertical

I then tried a stacked layout with a clear vertical direction. At first, it bothered me that the page continued below the fold on smaller screens, but this is definitely a better approach than the zig-zag. If the user needs to scroll a bit, that’s fine.

beta-to-launch-signup-signup

In addition to the user and payment info, I decided to include a couple answers to frequently asked questions from launch. I learned from the first design that a lot of people think Cushion is just another startup with millions of funding in the bank. Complaints about the sign up process were directed at “you guys” and “the team”. As soon as I’d respond with a hint that it’s just me, they’d drop the aggressive tone and even apologize at times. I knew that an explanation for the payment form would go a long way in softening the complaints.

beta-to-launch-signup-account

The other onboarding steps remained pretty much the same, but with the new design applied. The colors and icons really helped in carrying the playfulness over from the marketing site.

beta-to-launch-signup-thank-you-1

I also kept the surprise “thank you”, but reworded it to make sense for trial users. Now, when a new user makes their way through the sign up process, they’re left with a more pleasant taste in their mouth, instead of the black licorice of the previous design. I’m back to being proud instead of embarrassed, and I haven’t received a single complaint since.

Next up, migrating from the beta.cushionapp.com subdomain.

Share this on Twitter or Facebook

Archive

  1. Funding Cushion
    Story
  2. Hiring a Team of Freelancers
    Story
  3. Taking a Real Break From Work
    Story
  4. Slack as a Notification Center
    Dev
  5. Document Your Features
    Story
  6. 300
    Story
  7. Vacations
    Design
  8. Offering Discounts
    Design
  9. Waves of Traffic
    Story
  10. Less Blogging, More Journaling
    Story
  11. Retention Through Useful Features
    Design
  12. The Onboarding Checklist
    Design
  13. Spreading the Word
    Story
  14. From Beta to Launch - The Subdomain
    Dev
  15. From Beta to Launch - Sign up
    Design
  16. From Beta to Launch - Messaging
    Design
  17. Launch
    Story
  18. Authenticating with 3rd Party Services
    Dev
  19. Intro to Integrations
    Design
  20. Inspiration vs Imitation
    Story
  21. The Emotional Rollercoaster
    Story
  22. Designing Project Blocks
    Design
  23. Everything in Increments
    Story
  24. Deleting Your Account
    Design
  25. Designing the Subscription Page
    Design
  26. Rewriting the Timeline
    Dev
  27. Restructuring the Individual Project Page
    Design
  28. Project Blocks
    Story
  29. Redesigning the Homepage
    Design
  30. Multiple Timelines
    Design
  31. Archiving and Estimate Differences
    Design
  32. Multiple Financial Goals
    Design
  33. Zooming in on the Timeline
    Design
  34. Currency
    Dev
  35. Preferences, Accounts, and a Typeface Change
    Design
  36. Sending Out the First Email
    Story
  37. Currency Inputs, Notifications, and Invoice Nets
    Design
  38. Dots and Lines
    Design
  39. Calculating in the Database and Revealing Tendencies
    Dev
  40. Improved Form UX
    Design
  41. Cushion is Online
    Story
  42. Schedule Timeline Patterns
    Design
  43. A Slimmer Schedule Timeline
    Design
  44. The Schedule Timeline
    Design
  45. Plugging in Real Data for the First Time
    Design
  46. Transitions and Project Lists
    Design
  47. Death to Modals
    Design
  48. The Individual Project Page
    Design
  49. Estimated Incomes and Talks with Other Freelancers
    Story
  50. Statuses to Lists and the Paid Beta
    Story
  51. The Timeline
    Story
  52. Invoice Terminology
    Dev
  53. Modal Forms
    Dev
  54. Wiring the Backend to the Frontend
    Dev
  55. Balancing Design and Dev
    Story
  56. Timecop, Monocle, and Vagrant
    Dev
  57. Going with Ruby and Sinatra
    Dev
  58. Ditching local-first and trying out Node.js
    Dev
  59. Switching to AngularJS
    Dev
  60. Building the Table with Vue.js
    Dev
  61. Clients, Projects, and Invoices
    Dev
  62. Introduction
    Story

Ask a Freelancer

A podcast series where experienced freelancers answer questions about freelancing.

Listen to the Podcast

Talking Shop

An interview series where we talk to freelancers about important topics in the freelance world.

Read the Interviews

Running Costs

Take a close look at the costs that go into running a web app and why we use specific services.

View the Costs

How It’s Made

Follow along with the journal for insight into the overall experience of building an app.

Read the Journal