Here’s another post, in a series where I’ll look at the signup flow for various startups and write down my thoughts. I’ll mostly focus on startups because that’s what I’m interested in, and frankly that’s who we can learn the most from.
This week, I looked at Strikingly.com. Here’s what their homepage looks like:
STEP 1) First glance
I noticed a couple of great design decisions here:
- Clean design
- Login in top right corner
- Just the basics: logo, one line description, simple signup
- Option to learn more by scrolling
- But my favorite detail is the bouncing arrow – check it out:
A subtle design detail which show’s me exactly where to get started.
STEP 2) Signing up
Here’s a look at just the sign up form:
A couple of details worth mentioning:
- The form is short.
- When I focus on their sign up fields, I see both the blinking cursor, and the placeholder text. (I love it)
- The sign up button stands out, and the button copy is well crafted.
- The terms and privacy links are right there, but they don’t draw my attention away, and they don’t require me to click anything.
A couple of things they might explore:
- At first glance it looks as if they’re attempting to provide a solution for all verticals. Casting a wide net always seems attractive from a growth standpoint. In reality, it generally proves to be much harder than if you just serve one niche segment of users really well from the start, and expand from there. My biggest piece of advice for this team would be to narrow their focus. Work towards solid traction within that one vertical, and then to expand their focus.
- The ability to play around with their service before signing up.
- A quick video highlighting the benefits of using Strikingly
- Some sort of indication that my password is long enough (as it must be 6 chars long, but there is no mention of it until after I submit the form).
- After I’ve filled out the form, and I click the green sign up button, the button text changes to “registering…”, but it’s almost not recognizable. They might play with changing the color of the button, or adding some better visual indicator that “the form was submitted, please wait”.
STEP 3) Post sign up – take 1
Here’s what I see immediately after I sign up:
My eye is drawn immediately to the bright green “My sites” button on the left. I doubt it is what they want me to click first, but since it stands out over everything else on the page, I click it. It just refreshes the page. Essentially the green is meant to indicate that this is the section I’m currently in.
STEP 4) Post sign up – take 2
Now that I know the green “button” on the left just marks which section I’m in, a couple of thoughts:
- I’d tone that green down (a lot). At the moment, it unjustly commands my attention.
- I’d change “Create a site”, to “Create your new site”
- Again, I’d narrow your focus to the single most profitable vertical here. My guess is that would be around either businesses or portfolio sites. Doing so will allow you to eliminate this step completely. It will make it much easier for you to dial in conversions and revenue, as your copy, and user flows will become that much more targeted, and relevant to your prospective users.
STEP 5) View themes
I selected personal site, and here’s where it took me:
Some more thoughts:
- Since one of the main features of this app is to give users a mobile optimized site, I’d expect to see a mobile snapshot of each of these, along with the web snapshot.
- I poked into the “portfolio” and “business” sections just out of curiosity, and I’m wondering why some of those themes aren’t in the “personal” section as well. I think it would definitely make sense to have some cross-over where applicable (Or just focus on one vertical to start, and show them all ;-)).
STEP 6) Select a theme
I mouse over one of the themes, and see:
They’ve done a nice job of making the “Start Editing!” button stand out there. I know exactly what they want me to do next.
STEP 7) Editing experience
I click the “Start Editing!” button, and immediately I’m confused. At first glance, it appears as if I’m editing Dave McClures portfolio page:
They give me the option to take a tour, which I ran through quickly, but didn’t really read. Mostly I just wanted to see how it was implemented. The transitions looked really nice in the tour.
But I still can’t get over how I was dropped into an editor with all of the content from Dave McClures personal site. For a moment, I wonder if there has been a terrible error, and whether I now have access to his account. I can only guess that they’ve done this to help me get started quickly. I see a couple of problems with this assumption
1) It’s confusing.
2) It requires me to go through and remove all of his content before I add my own. This is annoying.
3) If I publish this site now, as is, I’ll essentially have published a perfect clone of his site (copy, photos, sections, videos, social links, everything). Looks like I wouldn’t be the only one. I don’t know, it just seems like a bunch of extra work.
4) How many people who proceed past this point forget to replace something small (like a link to twitter), and end up with a link to Dave McClures Twitter stream on their site?
- I’d love to see more of a “starting from scratch” new user experience here rather than feeling like I’m editing someone else’s site.
- The sign up flow up until this point has been very streamlined. Once I hit this point (even with the tour option available) it still feels like I’m being thrown in the deep end. There are dozens of places to click. There is no indication of what I “should” do next. My suggestion would be to hold the users hand a bit longer. Walk them through setting up their site one step at a time. I’m guessing that you’ll see a solid uptick in activations by doing this.
Screenshots and video for this post were taken from Strikingly.com (on Aug 20, 2013). All logo’s, copyright, etc. are theirs. They didn’t commission me to write this post. I write about this stuff because it’s of interest to me.
Does this interest you?
– What else did you notice that’s worth commenting on? Discuss it on Hacker news.
– Also, subscribe to this blog below: