A couple weeks ago we launched the new Highrise marketing site. We’re still iterating that design post-launch, and we have a big post brewing about that design process, but today I wanted to share some of the iterations we explored for the new signup chart.
One of the earlier design directions for the new Highrise site included a light blue background and dark highlight boxes. This was the signup chart direction we were playing with while this design was in style.
We wanted to highlight the main 3 differences between the plans (users, storage, and deals) so we darkened those boxes and colored the text blue. We also introduced a YES/NO list top right to get some key points across related to our signup policy. This was inspired by Southwest’s NO NO NO list on their home page.
We started iterating and began to explore something more visual. We wanted to see if we could show some relative comparisons between the plans. Numbers are fine, but could we be more visual?
So we experimented with icons. A group of people for users, a hard drive pie chart for storage, and $$$ for deals. This took a few hours and we recognized quickly that it was noisier and didn’t really help. But we’re happy we went though the process.
We then started experimenting with other background colors and patterns and type treatments. For a while we liked a deep plum color and pinstripes. As I look back at this I’m surprised I liked it at one point, but that’s all part of the design process. You don’t do your best work all the time.
You’ll also notice we moved the YES/NO chart into the sidebar. We also introduced a coupon to the sidebar. We used a pizza coupon copied from another site instead of spending the time making our own fake coupon.
Once the colored background hangover wore off, we went back to white. We also went back to centered headlines that spanned the full width of the page. And we also removed the sidebar so the main three plans would each take up a third of the horizontal space.
Now that we don’t have a sidebar, we moved the YES/NO information into the header. We focused mostly around NO. No hidden fees, no long-term contracts, no surprises, etc.
We also tried to reiterate the 30-day free trial by using red text in the headline and also adding “30 days free then…” before the price of each plan. This is the design we were planning on launching. We were a couple days prior to launch at this point.
A day before launch Ryan asked me to click from the home page to the signup page. The home page happy blue background at the top with a colorful representation of the core benefits of Highrise. Clicking to the signup page took you to a stark white background with monolithic dark grey slabs for each plan. There was no continuity. Ryan was right.
So a day before launched I redesigned the chart. I wanted the design to remind people of the home page. Light blue, orange, grays. Something happier and more consistent with where they just came from.
I also decided to move the Solo plan up from a small horizontal line below the other plans to a full-blown vertical column far right. I colored the main three plan specs orange so they popped, and big green signup-buttons ended each column. The plan names were also linked up in case you clicked those instead of the button.
The other thing we introduced in this chart is the notion of “Multi-user business plans” (Premium, Plus, and Basic) and the “Freelancer/Contractor plan” (Solo) using blue headers above the columns and a thick black vertical line between Basic and Solo.
This is the design we launched with. We ran with this design for 3 days. Paid signups were up and the Solo plan was far more popular than it had been on the previous site.
Post-launch, “Focus” design
While looking at the new signup chart, and our previous charts, I noticed something. We don’t suggest a plan. We give people choice, but we don’t point them in a recommended direction. We should. The thinking goes that more options are OK if you help direct someone to a default choice. But more options without a recommendation just lead to decision paralysis, uncertainly, and buyer’s remorse.
So I though about it for a while and sketched out a quick idea.
The idea was calling out one plan as our recommendation. We’ve always felt the Plus plan is our best plan. It’s a great value and it’s the first plan with all the features. It’s also the first plan with unlimited deals. So we decided we’d recommend that plan.
A few minutes later I mocked up the general structure in HTML just to see if it would work. It did.
I uploaded this picture to Campfire and the crew said “Interesting.” I thought so too, so I started to flesh it out.
A few hours later we were there.
I centered the headline, bolded/blacked the “30-day free trial” message and flanked it with “Pay as you go” and “No hidden fees”. I also focused the colors on the differentiation points. I didn’t color “up to … users”, I colored the number of users. This helps people spot the actual differences, not the words in common.
The Plus plan has slightly bigger and darker text. The green sign up button is slightly bigger too. Finally, I gave the Plus block a pale yellow background to pop it even more.
You’ll also notice we added the Max plan to the list. We haven’t advertised the Max plan for Highrise for nearly a year. You can upgrade to the plan if you already have an account, but you couldn’t sign up for the plan straight away.
The design has only been live for a week. It’s been a holiday week, and the end of the year is generally slow, but so far we’re happy with the results. Plus signups are up about 20% over the norm. We’ll need some more time to see how it works long term, but I think we may be on to a winning signup chart format. You can see it live on the new site.
We hope this was helpful
There were a lot of tiny iterations between the big iterations, so if you have any specific questions, or would like me to go into more detail about a specific decision, please post it in the comments. I’ll try to answer as many as I reasonably can.