We recently redesigned our sign up flow here at Croissant HQ. We previously had a one page form, and we wanted to make a persisted multi page form. Because we offer a membership, the sign up process should seem a little more involved. Users also have to pay up front while they are making the account. We wanted to section off the different parts of the form appropriately.
We looked to other startups for inspiration. I’ll go through five that we learned from, and show the results of our redesign!
Stitch Fix
Stitch Fix offers clothes and accessories hand-selected by a personal stylist deliver to your door. As a membership plan, we were interested to see their design decisions.
At the “top of the fold”, their main page has just a Learn More CTA, which then scrolls a little down the page upon clicking it.
Okay. So they want visitors to learn exactly how Stitch Fix works before making the ask. As I scroll down, I see the 3 different steps in the Stitch Fix process. I learn about how Pricing works, and what I can expect to happen when I sign up. Then at the bottom, the first part of the Sign Up form is embedded directly on the page.
The form is simple but classy. It is great that I don’t have to click to another page to start the sign up process. It asks the users to fill in a bunch of fields up front and provide important contact information. Dress size is asked also to get users in the mindset that this will be a personalized clothing package. Clicking “Size Chart” brings up a pop up modal with a chart to help figure out the sizing. Easy to open and close and doesn’t bring you away from the most important thing, the form!
The moment I click “Next”, there’s loading feedback and the button text changes to say “Signing up…”. Stitch Fix is creating my account based on the details of this first step of the form. This is confirmed on the next page after it loads. In the light blue nav bar, I can see that my account has been created and I have automatically been signed in.
This second page of the form is really long. There are almost 50 form fields. Halfway down, there’s these visually appealing images of clothes asking about my style. The form continues asking about my clothing preferences.
They don’t indicate which forms are required and which are optional so I try submitting it halfway through. It throws an error and then shows me which fields are required.
Third page! I can schedule my delivery. Stitch Fix is a subscription based model so they ask how often I want it delivered.
There’s also an option to refer friends. I love how easy they make it to refer people; there’s every type of sharing link possible.
And finally, the last page where I can put in my billing info. Payment is not mentioned until I get to the very last page.
Very long and complicated flow here, and there are a couple takeaways from studying the design, which we find gorgeous. However, Croissant is not a super-personalized product like Stitch Fix, so we definitely want to make something more simple.
Soylent
We’re gonna go a little more traditional for this next study. Soylent is a powdered meal replacement product with all the nutrients you need. Recently, it has found its fanbase amongst the tech startup community. We wanted to study the flow because they also offer a subscription model for repeated deliveries of Soylent.
Heading over to soylent.com…
It’s simple, and it’s “above the fold”. Soylent gets right to the point and asks the users if they want to buy. Scrollin down, there is very minimal info on the home page. There is a video at the bottom for my information. They are going for the ultra simple approach.
Users can select how much Soylent they want and add it to the cart. Or in this case, presubscribe since the product is not available until Oct 15th.
Clicking the big green button takes me to this page.
Everything is there. No persisting the form. Super straight forward. You can see what information they will ask for next.
I appreciate the simplicity, but to be honest, the “look” of the page differs significantly from the home page and that throws me off a little.
Try The World
Ah, subscription box model. Try The World is a way to try international products without having the leave your home. They deliver a box of goodies not easily available in the US — right to your door.
The top of the fold is very vibrant and gets me curious. There is a lot of visual stimulation here and the tagline drives the point home. They go with a “subscribe” CTA. The Subscribe button is also in the top right nav bar, which is fixed so you always have a place to click and subscribe. Scrolling down the page, there are three more red Subscribe buttons, as well as more bright photos of unfamiliar food products.
The next page is a little more involved. It goes into the details of what box you’ll be getting for your first delivery (Japan). Then you can choose which subscription plan you want. The pricing is cleared out very nicely, in a clean design. The user testimonials are available at the bottom for social proof.
And lastly, the payment form. It doesn’t quite match the look of the rest of the site because they are using Shopify.
Pretty straightforward.
Notice that there are absolute no distractions on this page. Try The World wants to make sure you put in that payment information. There is no nav bar, no testemonials, no footer, nothing. Just a plain form asking for the essentials.
ClassPass
ClassPass sells a membership program lets users pay a monthly fee to take fitness classes at different gyms and studios. ClassPass is in 31 US cities, and it is expanding internationally with 4,000 partnering studios around the world.
With a similar business model to Croissant, we looked to ClassPass’s sign up process with extreme interest.
When I first heard about ClassPass and wanted to sign up, they had me get on a waitlist. I filled in my email address and zip code and received my invite 2 days later.
It told me that I had a spot waiting for me and I had to sign up within 48 hours. I suspect there was no real need for the invite, as the link still works even now, and it was mostly used to build excitement and hype.
They moved away from this waitlist functionality a few months later.
The landing page currently features the “Get Moving” cta front and center. You can enter your email and zip code to get to the next step in the sign up process. Or, you can just click “sign up” in the top right corner to just get to the same page. They must be testing which is more effective. The form is a little more engaging than just pressing a button, and ClassPass wins because it gets hot leads.
Users can quickly see it’s a 3 step process, with each step labeled at the top.
Facebook integration is enabled here, or you can just manually input the information asked. One thing that is annoying, is that even if you fill in your e-mail address from the home page, you have to re-enter it here.
Clicking Sign up takes me to step two.
On this step, the right side modal stays there even as you scroll down the page. Very nice. The price of the monthly membership changes when you switch home cities.
I can scroll up the page and get back to step one. However, everything is greyed out and I can’t edit any of the fields. I am not sure why they decided to make the first step available if I can’t do anything on the page.
I am guessing that the purchase is made on this page, since the button says “Confirm Purchase”, and that the next page just shows a summary of the order.
Blue Apron
Blue Apron is a hugely successful subscription food delivery startup. They provide all the ingredients that you need to make a delicious, fresh, meal in exactly the right proportions.
Interestingly, the main call to action here is “Watch Video”. The video explains the whole Blue Apron process and logistics.
Sign Up in the nav bar sticks to the top of the page and you scroll down though. And the color stands out from the rest of the page. Orange is well known to be a high converting button color. There is a big CTA at the very bottom of the page before the footer.
Get Cooking is huge and takes the user to the same page as “Sign Up” in the nav bar does.
Let’s see what happens!
We start the sign up process with this step. There is some at-a-glance info to tell us more about Blue Apron in case we needed a summary.
At the top and bottom, notice there is no navbar or footer with links to distract us. The press name drops at the bottom of the page do not link anywhere. Literally the only thing we can click on this page is “Continue” or the logo in the top right to go back to the home page.
I really like the steps at the top laid out again. The icons are a great touch.
Step two, preferences. It’s a pricing page. This is the first time pricing is being mentioned at all. They make the different options very clear and concise. The images reinforce what each package is recommended for.
Pressing “Select” takes me to another page to choose delivery and dietary preferences.
Easy enough.
Then it asks me for shipping information. I can click the icons at the top to go back to step 1 or 2. However, when I clicked to Step 2, I can’t go back to Step 3 without reselecting everything.
And this is the grand finale, with a great breakdown of everything I just filled out. And payment info to finish it all.
Croissant
So we studied these websites and several others. Here’s what we came up with. We released the new version a couple of days ago, so I can’t speak to the effectiveness of the new flow yet.
We have two CTA above the fold. Join Now goes to the sign up form. Browse Spaces takes you to our discover page to check out what types of workspaces we have.
Clicking Join Now takes you to this page. We ask for some easy, basic information that is pretty mindless to fill out.
Then for the second part, we list out several of the most common reasons our users have said they use/like Croissant. It is interesting for us to know what new users think, and also it’s a way for us to put our value proposition front and center.
Big nod to Blue Apron here for the big picture concept for pricing pages. Here we list the two membership plans and the price and essential details for each plan.
We want users to be able to see at a glance what they’ll be getting. We hope this makes it very clear.
And here’s the ask. The membership selected is visible on the right side. The e-mail address from the first step is prepopulated here. The first page was jsut a “getting to know you” step so didn’t want to ask for a password creation right there.
That’s all! We’re hoping to collect some statistics over the next few weeks to see if the form helps conversions.
