loading...

Creating PULSE — A developer-friendly server monitoring tool (Part 11)

mattkingshott profile image Matt Kingshott 👨🏻‍💻 Originally published at Medium on ・4 min read

Facebook’s Prineville Data Server Center

Creating PULSE — A developer-friendly server monitoring tool (Part 11)

This is part of a weekly development blog series, where I will document the creation of an application from the initial idea through to its deployment on a scalable architecture. Even as an experienced developer, I find these stories to be interesting and I usually pick up a tip or two, so if you’d like to come along, and hopefully benefit in some way, let’s dig in!

NOTICE : Pulse has now launched and is available to use. You can create an account by visiting https://pulse.alphametric.co

Introduction

Prior to launching the public beta of Pulse, I needed to work on a few extra bits and pieces to round off the application. In this article, I’ll document some of them, as well as the motivation behind these choices.

I’d like to thank Steve Schoger & Adam Wathan for their Refactoring UI book, which helped enormously with the content documented in this article.

Aiding the on-boarding process

One of the big mistakes that a lot of developers make when they build a SaaS app for the first time, is assuming that their customers will just understand how the thing works (in the same way the developer does). However, often it’s the case that, after signing up, the customer has no idea what to do next.

So, how can you address this issue?

Some developers opt to send out a “getting started” email — we’ve all had them when we’ve signed up to something. Personally, I don’t favour using them. The last thing I want to do, is leave the site, to go to my email client, to click a link, which takes me back to the site. It’s an annoying workflow, and often because of it, the email is ignored or deleted without a second thought.

Instead, integrate the content of this email into your application. In Pulse’s case, the dashboard has a “getting started” section with links:

A series of cards to aid the user once they’ve registered

However, this isn’t an email anymore, so there’s no reason that you can’t make the cards more than just links. Why not convert them to tasks, and make them reactive to the user’s status within the system? Here’s what happens once a user has created a server profile in Pulse:

Once a task has been completed, add a visual cue

Designing a pricing page

Handling the pricing section of your application is always tricky. You have to craft it in a way that makes it clear, inviting and guides the user toward what they actually need. It’s not an easy task, so what can we do?

You can take certain steps, such as using colour accents to differentiate plans, as well as scaling to indicate to the user what plan we’d prefer them to use. You can even add a subtle animation if it is appropriate, just be careful not to overwhelm the user… they’re trying to make a decision after all.

Here’s how I’ve used those techniques to differentiate the plans for Pulse:

The pricing section of Pulse’s home page

Adding a call to action

Many SaaS applications rightly design their home page to be a marketing tool which outlines the feature set to the user. They then end the page with the plans and pricing details. That’s still fine, but should the pricing be the last thing your home page should end with? I’d argue no, and the data backs it up.

Instead, if a user has made it this far, they shouldn’t have to scroll back to the top of the page in order to find a link to sign up.

SIDEBAR : You can add links to the plans, or make them clickable, but it tends to be a bit overwhelming. Your job is to take the user by the hand and gently guide them forward. Giving them multiple paths isn’t always the best way to do that.

So, how should we finish the page? Well, it’s pretty simple actually. We just need to add a “call to action” button along with some text to nudge the user forward on their journey. Here’s how it’s done in Pulse:

The call to action, with the bottom of the pricing section visible

If you’re interested in seeing how the marketing page for Pulse is laid out, feel free to head on over to the site: https://pulse.alphametric.co

Wrapping Up

Well, that’s it for this week, but don’t worry, there’s still more to document, including the process of deploying to production. So, if you haven’t already, be sure to follow me here on Medium, and also on Twitter for other updates.

NOTICE : Pulse has now launched and is available to use. You can create an account by visiting https://pulse.alphametric.co

Thanks, and happy coding!

Posted on Feb 26 '19 by:

mattkingshott profile

Matt Kingshott 👨🏻‍💻

@mattkingshott

Founder. Developer. Writer. Lunatic. Created Pulse, IodineJS, Axiom, and more. #PHP #Laravel #Vue #TailwindCSS

Discussion

markdown guide