Right now, sit down and take a look at your SaaS from the perspective of a user. Or at least imagine it in your mind’s eye.
You see the homepage, you click buttons and you go through onboarding patterns.
You’ve invested money in that experience. You invested in the features and in those irresistible buttons that just beg to be pressed. Hopefully, it’s designed to get your customers quickly and efficiently to the value you offer that makes a difference to their lives.
And that is your first-run experience, or “flow”.
A flow is much less tangible than a user interface (UI) or a web page. You can see pages and interfaces, but you can’t see flows.
However, just because they’re less tangible doesn’t make them any less important.
Your first-run flow should be made of the steps a customer must take to find the value you offer. And delivering that value is how you make money.
So, before we look at how to design the kind of killer first-run experience that will get your users quickly hooked on your product, let’s see how to approach this subject from the right angle.
Know your user, know your platform
Who is your user? No, really, who are they?
More importantly, what are their objectives? What do they need help with when they visit you?
When they punch a keyword into Google or see your advertising and click through to you, in what way does your product help them?
Delivering the answer to these questions quickly and efficiently to your user is the key here. Put another way:
Get them what they want ASAP!
Whether you’re an entrepreneur, customer success manager or anything else, your goal here is to help create a successful business. That’s fine. But it also makes it easy to lose sight of the fact that actually, your goal is to deliver your user’s goals to them.
Figure out who your user really is, focus on their goals and everything else will follow.
Begin with your objectives
Next up, and as with so many things in life and business, it’s important to begin with the objectives.
Because every decision you make leading up to that objective will be determined by this intention set from the start. You’re more likely to hit your goal if you know you’re aiming for. Specifically.
If you feel like delivering the full value of your product immediately is unrealistic, then focus on helping customers achieve some kind of small win early on.
Deliver a small dose of awesome as quickly as possible.
Once that’s achieved, you’ve given them an unambiguous and compelling reason to return and/or keep going through the flow.
Prior to that moment, make sure you stick to best practice principles such as benefit-driven copy and and call to action buttons a different colour to the rest of your interface so they’re easy to spot.
Develop a shorthand communication
You might have seen how creative teams sit down together when planning for movies or video games. They use storyboards with images and text to show the progression or development of a plot (which is basically another kind of flow).
But this isn’t deal for an onboarding first-run. So what is?
Well, a flowchart might seem a good substitute, but it’s actually not ideal for the job either. It’s a one-dimensional method that doesn’t account for the fact there are two sides to the story unfolding.
Luckily, Ryan Carson from Signal V Noise has developed a shorthand that’s perfect for the job. Here’s what it looks like:
As you can see, it’s designed to illustrate that one side of the story is what the user experiences (at the top), and the side is the actions taking within your UI (at the bottom).
It’s tough to discuss user experience flows, so whether you use this shorthand or figure out one of your own, agree on a way to communicate easily with your team.
The AIDA marketing model
In many ways, designing a first run is a unique process. But it does hold some common ground with marketing best practices.
For example, it adheres to the Attention, Interest, Desire, Action (AIDA) principle.
Keeping this proven, results-focused method in mind is a good idea. Let’s look at the steps in a little more detail.
Studies conducted by usability scientists such as Nielsen Norman Group show that you have about 25 ms (yup, quarter of a second) to use grab the user’s attention. And yes, that means there’s no messing around. You have to grab that attention.
At the point when you have the attention, it’s time to generate interest. And that means leveraging every part of your website including images, copy and video to illustrate the value you offer. What’s the benefit? Why should they care?
When the above points are brought together, desire will be the result. If you set up a funnel and see that people are getting this far and not taking action, there’s a good chance you haven’t done enough to generate sufficient desire and you need some tweaks. Which brings us to our next point.
It’s pretty much impossible to overemphasise the final CTA button. You should use every trick in the book and A/B test it to kingdom come until you can’t look at your computer screen for another minute. It’s got to be perfect.
The AIDE marketing model outlines the different stages a user experiences before making a purchase decision. So, with that proven structure underpinning your flow, you’re much more likely to produce results.
Aesthetics, from images to design
There are a few best practice principles to follow here so let’s put them together in a bullet list:
- Choose photographed models who actually look like your ideal customers
- Put your model in a pose that conveys an emotion of satisfaction and that points towards your CTA, benefit-driven headline, or some other critical area
- Avoid images that guide your users attention off the screen by pointing their gaze to the edge of the page or away from the CTA (aka the “eyepath” – we’ll get to that in a moment)
- Ensure your images are unique and not from a common stock photo source
- Ensure the model stands out from the photo rather than having their clothes blend into the background
Here’s an example from productivity SaaS, Asasa’s homepage.
You’ll notice that the only model who blends into the background (in the pale blue shirt) is not looking directly to the CTA. The other two are. Even then the guy in the blue shirt is kind of standing over the sign-up form.
Their gaze and even the model’s arms point towards the money area.
The hand out of focus in the foreground is almost in a clicking shape right underneath the CTA. It all looks pretty casual, but these are not done by accident.
When you consider the visual aspect to add to these pages, it’s easy to find one you like the look or choose a model you think is kind of cool. But the reality is, there’s a lot more to this decision than meets the eye.
And the bullet point list above will put you in good shape.
What eyepath is & how to use it
Let’s come back to this idea of the eyepath.
It fits in pretty well with the idea of “flow” because it suggests walking down a “path” or going from one place to another, from point A to point B, and so on.
It’s the same for your user’s eye balls.
Ask yourself, what part of the page catches the user’s eye from the moment they see it? Where does their eye go next and where does it end up afterwards? Hopefully, it’s at your CTA.
But what about the people who, for whatever reason, are not quite ready to sign up? It’s important to design around the idea of a secondary focus that can get people’s attention so they don’t leave your website altogether.
Because when they do, they’re unlikely to return.
If you want a proven methodology to create a good eye path, start with the following before reading further up on the subject. A/B using an eye tracking service like Tobii test to find out what works best.
Here’s a three-3 step starting method:
- Start with a model either:
A)Looking at the primary CTA accompanied by a benefit-driven headline
B)Pointing towards it and looking directly at the camera
- Have a highly visible sign-up button with the chosen color different from the background
- Have a hand-drawn arrow on the page in a prominent colour and a style that’s at odds with the rest of the design, emphasising that users must (!) press that irresistible sign-up button
As a final point, remember that the less distance the user’s eyes must travel, the less work it is for them.
It might seem like a small point. But remember, the average person browsing the web has an attention span measured in fractions of seconds.
So even a little extra muscular exertion on the optic nerves can make a huge difference here.
If you’ve never sat down to design flow, sticking to the best practice fundamentals discussed in this article will set you in the right direction.
Naturally, a little trial, error and A/B testing will be required and studying some of the points in more detail is usually a good idea once you’ve got the first flow in place.
Got any questions or ideas on the points we’ve discussed? We’d love to hear from you. Let us know in the comments below.