Sazhimi: A Case Study on How to Use a Shiny Landing Page to Boost Funnel Completion.

Have you ever faced a challenge when trying to engage your users with a set of tasks that are required to provide a valuable output?

This is a case study of a UX pattern that I designed to increase funnel completion rates in these situations. I designed it for a personal project called “Sazhimi” but you can adapt it to your own needs. It’s amazingly effective and easy to implement.

For context, Sazhimi is a little tool that helps you to create a playlist from your Shazam history. If you’re thinking: “ohh but that feature already exists in Shazam”…well, you’re not wrong. But let me tell you a couple of things. First, I created Sazhimi in the winter of 2014 when this feature wasn’t available yet in any Shazam app. Second, the whole Shazam-Spotify integration is a complete mess (from a UX perspective) and sometimes it doesn’t even work. Sazhimi remains relevant because it’s a lean and straight forward solution to export your tags into a Spotify playlist.

So how does the technology behind Sazhimi works? Basically, the tool is a mesh of Python scripts that are executed in an specific order while they report back to an static HTML view. The program will parse a file provided by the user, then it will extract relevant information from it, and finally using this information it will push some information in a third party service which in this case is Spotify. All these steps are executed in a very synchronous way and most of them need some kind of user input (uploading a file, authorizing an app, authorizing Sazhimi, etc).

So in few words, Sazhimi is a small tool that only works if the user is willing to provide a lot of input. It’s basically a super complex funnel that consists of the following tasks:

1. Arrive to the website and understand what’s going on. (Some bounce rate here that can be improved with better aesthetics and copywrite)
2. Leaving the website to open Shazam, logging into Shazam and then downloading an HTML file that contains their Shazam tags history.
3. Coming back to the Sazhimi Website.
4. Loading the HTML file from their local disk.
5. Pressing the Upload File Button.
6. Pressing the Login to Spotify Button, and then do all the required login and app authorization stuff.
7. Press the “Sazhimify” Button to trigger the the list parsing, song fetching and creation of the playlist.

I quickly realized that most users were going to abandon this funnel, especially if it was not clear enough what was happening while they execute all these steps.

In order to make the process leaner and less exhausting for the user I started to brainstorm some techniques and UX patterns that I could use without increasing the technical complexity of the tool. Unfortunately most relevant patterns for this kind of process oriented tasks are too generic and wouldn’t improve the completion rate.

After some hours of additional brainstorming I came up with an idea.

What would happen if I use a one page website layout and I modify it in a way that works as a progressive waterfall of steps?

Since many of the required Sazhimi tasks are actually happening outside of the website this might actually translate into a very simple and effective page that would narrate the process in a very efficient way. Also,it would work as the main mechanism to achieve what the page itself is trying to deliver. Perhaps, it would persuade the users to complete the whole funnel without thinking they are diving into a boring and complex task.

“Waterfalling” the Funnel

After I had a general idea on how the funnel should work, I started working on some concrete ideas on how to achieve a solid pattern.

What I wanted to do was very simple. I wanted to create a landing page that described the process step by step without separating the explanation from the actual work.

So instead of trying to find a way to first teach the users how to use the tool and then prompting them to use the tool, I wanted to create something that prompted the users to dive into the task while they were learning about it.

This is actually a simple concept but also very abstract. In order to translate this concept into a concrete interactive UI, I did some sketches of my initial ideas. Here are some of those:

On the left a rough idea on using a paginated hub with a progress indicator. On the right a check list concept based on user actions.

One of my initial ideas was to use a very prominent progress indicator as the governor of the page interactions. I wanted to do this since it’s common UX knowledge that users are more likely to dive into a task if they know how much involvement, skill and time is going to demand from them. This is the same rationale behind why on a week night you decide to watch an episode of a Netflix show instead of a movie. You simply don’t want to commit to the time that takes to watch a movie so you take a decision based on the running time of your available entertainment grid.

After some thought, I decided to drop the idea of the tracker because Sazhimi has a series of sub-steps that cannot be tracked and this would introduce confusion and ambiguity to the pattern. However, there was a very valuable insight I discovered while exploring this idea. In the Netflix example, I said that on a week day you usually would choose the less time expensive option, and although this is true, you always end up binge watching House of Cards on a Monday night. This means that even though you took a decision based on time, you can easily commit to more time if the task is broken down in a rational way.

The Idea

I took these insights and build a concept around them. In order to embrace the idea of a super-charged, predictable and plotted funnel I had to build something that did the following things:

1. All the descriptions of the tasks should be available at the first reading pass of the website (the initial exploration). No hidden steps or small letter trades.
2. Although the funnel requires a lot of input from the user, it should persuade them into seeing that the individualized tasks are very simple.
3. The funnel should not have more than 3 steps. It certainly can have more than 3 tasks but it should sell the idea of only 3 steps. The reason for this is that there’s are some idiosyncrasies that relate “3 steps” with speed and easiness. (e.g:http://idioms.thefreedictionary.com/as+easy+as+123)
4. It should give visual and contextual cues of progress that are not attached to a single component. In other words, it should clearly indicate to the the user that they moved in to the next task.
5. It should be a waterfall with no go back option. If they need to go back is because the tool is not usable enough.
6. Users should be able to abandon the funnel at any point and with no regrets about the time or effort invested into the tool.

After carefully exploring several wizard configurations and task completion experiences I decided to go with a one page website divided into sections.

This approach allowed me to execute the idea that I had from the beginning: blending the instructional information with the tasks.

Here is a ultra lo-fi wireframe with all the general ideas of what I wanted to achieve.

As you can see, my idea was to have something with the look and feel of an informational landing page, but with the mechanics to achieve the sync embedded in the content itself.

This is the most powerful concept behind this pattern. By simulating the look and feel of a promotional landing page I also inherited the simplicity of this kind of layout, but more importantly its effectiveness to deliver a message.

Additionally this layout gave me two very powerful tools:

1. Navigational Scrolling: Modern landing pages have navigation capabilities through auto scrolling. You can create a navigation tree that takes users to certain scrolling position after clicking a link. I used this to take users from one task to the next one.
2. Physical Dimension: This concept is a little bit tricky, but actually a website height can behave as an abstract loading bar, a progress tracker and/or a time estimator. If you find this confusing try to think how many times to do you scroll to the bottom of an article before reading it. The reason why you do this is because you’re trying to estimate the length of the article. But also the same concept can create a meaningful mechanic to show progress, since you can show the user that by approaching to the bottom of the page they are almost done with the task.

The Implementation

The final implementation of Sazhimi is a streamlined funnel that guides the user through the different tasks while trying to preserve the relevance, simplicity and context.

The main features of the UX pattern implemented in Sazhimi are:

One page: A one page website with three sections / three steps process featuring instructional information and call to actions to complete the tasks. The website auto-scrolls from one section to the next one as users move through the funnel.

One Page Website (Merging Information and Tasks)

Blocking: This is my favorite part of the pattern. The page auto scrolls to indicating the users there was progress/advancement. However, the users might be unsure of what they did or maybe they might be unsure about continuing. In this case they would likely scroll-back to the upper section. In Sazhimi they will see an overlay obfuscating and blocking the previous section, as well as a dialogue that encourages them to continue with the process.

Empowerment: Technically there’s no need for a step #3 since I could run this function when getting the callback from the Spotify Authentication. However, by adding that extra step we are creating the notion of control and decision making. Of course, as I already mentioned before, there’s also a cultural meaning behind the concept of “1,2,3” which helps to create a compelling message.

Sazhimi in Action

Try it live here: http://sazhimi.herokuapp.com

Some Numbers

Since I implemented and launched Sazhimi I have received a decent amount of traffic that has been helpful to discover the effectiveness of the pattern and the funnel completion rates. I’m not going to lie, the bounce rate of the website is quite high. Around 65% of the organic-real traffic goes away after landing on the website.

For those who stay around and dive into the funnel there’s an average completion rate above 60% which is amazingly good if you have in mind that they need to leave the website to download a file, comeback and then upload that file.

Even better, for those sessions from specific promoted sources (Facebook, Twitter, Reddit, My own portfolio), the completion rate jumps to above 80%.

Of course, there’s a small bias because users who consciously land on Sazhimi are actively looking for a solution. This is an extra motivation to complete the required tasks and proceed through the funnel. Nonetheless, the numbers remain solid for such a fragmented funnel, proving that this pattern can be valuable for other cumbersome processes.

Where to use this Pattern?

Many of the findings I did through the creation of Sazhimi are very local and self-contained to what Sazhimi provides. However, I believe that there are some valuable concepts that can be implemented in other funnels with positive results.

Some funnels that I personally think would benefit from this pattern are:

• Surveys
• Wizards, Setting-Up Experiences, On Boarding Mechanics.
• Checkouts that require extra/external information, like for example uploading a prescription when buying lenses online.

… or in general anything that can benefit from quickly providing users context about the length of a task and can be optimized through a waterfall of procedures (each task require a result from the previous one to proceed).

If you feel there’s value in any of the discoveries that I did while implementing Sazhimi, I encourage you to use those discoveries. Although the pattern itself has some unique implementations, in the practice is just a mix of multiple UX concepts that you can use if you feel they adjust to your particular situation.