If you’d like your own landing page to be analyzed, follow my 1-step process.
Michael requested a landing page analysis (LPA) of uberspace.de. His ideal reader is at stage 1. This means his reader is actually not (yet) a reader of his publications. Michael is a „nobody“ to the reader because he or she doesn’t know he exists. There’s no relationship.
Michael and I also haven’t met in person. I have no idea about him. That makes the analysis as a stage 1 reader easier for me. But I am aware of Uberspace since I’ve been a customer since 2011. This makes it harder not to be biased but not impossible, see below.
As a reader at stage 1 that I’ll be representing throughout the analysis, Michael wants me to move to stage 2. Although it would be a step forward in the buyer’s journey, at stage 2 I would still be far away from a purchase. Therefore, the page needs to provide value (or point me to value) that I can apply and see results. Then I’d move up to the next stage.
Consequently, it means that this landing page analysis is not about the conversion or purchase. As a stage 1 reader, I’m totally new to the site. It’s a „nobody“ and means nothing to me. That’s why the analysis is about whether Michael can make me move up or not.
Read below my thought process during the analysis. I recommend opening the screenshot of the original page in parallel to reading the analysis. To see the final result including my amendments open this screenshot.
Keep in mind that although it’s my first contact with Uberspace in stage 1 I will use my analytical skills and my 10+ years knowledge in user experience design. So, I’m looking at the site with two pairs of eyes: as a stage 1 reader and as an analyst/optimizer.
I open the site and I’m seeing a dark background with small white dots in different sizes. On top, I see the name „UBER SPACE“. So there is something about space going on. Below I see an animation that says „Hosting for…“ and then an animated text pops in. It’s the kind of animation that you see often on modern web pages now where there is a blinking cursor and the text animated as if someone was writing and deleting text. Fits the zeitgeist and makes sense.
I’m looking at the animated words. They are:
So what do I know now? The site is about hosting and it aims at technical people (hackers, Shell lovers, Unix friends, privacy enthusiasts) and creatives in various fields (inventing, making, creating, writing, photography).
The targeted people are those who make stuff (intentionally), who are not shy of using computer technology with it and have a healthy amount of skepticism towards what’s going on with technology (for example privacy-wise). Interesting. It’s appealing.
If I had to sum it up in a few keywords I would sum up the ideal reader of Uberspace in the following way:
„Everybody“ is clearly not what Michael what is aiming at with Uberspace. If you’re trying to serve everybody you’re serving nobody. Therefore, delete „Everybody“ from the list of animated text.
I like „You“ and „People who know what they want“. „You“ always works in marketing and referring to people who know what they want is precise enough and not too generic. You could A/B test the text by removing „You“ and „People who know what they want“ from the list and see how different the site performed. But that would require knowledge about how many people are seeing how much of the text. Removing the text could also be too radical since the words do appeal to me.
After some time of reflection, I notice something is missing. It says „Hosting“ but it would be more precise to change it to „Web Hosting“ or „Cloud Hosting“. While that sounds theoretically correct, it doesn’t look good on the page. So, „Hosting“ is fine for now.
Also, the „UBER SPACE“ logo is too dominant. At least that’s my initial impression. I’m thinking: „The site is not about the service. The site is about the person visiting the site.“ I recommend either decreasing the size of the logo, removing it from the center of the upper area or moving the logo up to the very top left corner and replacing the „HOME“ link in the menu bar with it.
I decided to decrease the size of the logo from 230px max-width to 180px:
.main__logo {
max-width: 180px;
}
Removing the logo completely from the center upper area would make „Hosting“ and the animated text look very lonely and have less context. So I abandoned that idea.
To my surprise, and it was an accident, it works pretty well to 10X the logo in size with the following CSS code:
.main__logo {
max-width: 1800px;
}
Why does it work? The logo font has a cartoon-ish character. A logo that big jumps into your face like those cartoons from 90s cartoons on TV. It’s bold, it’s confident. It says: Here were are. We are your guys. So, this accident works so well that I’m sticking to it. In fact, now the animated text below even gets more attention through the increased logo. Somewhat ironically.
Moving on. I’m seeing „TIME TO START YOUR PROJECT“ and I’m also seeing the top menu bar. I decided to check the menu first where it says „HOME“, „PRODUCT“, „SUPPORT“, „ABOUT“ and then further right in a smaller font „REGISTER“, „LOGIN“ and a language switcher icon.
I won’t check the subpages because that would go beyond the scope of this analysis but let me go through the naming of the menu.
„Home“ is fine. „Product“ should be replaced with „Pricing“ because what I actually want to know is how much it costs unless it’s a free service which I don’t have the impression of so far. It’s a commercial offering. And on the pricing page, you can refer to the product offering in detail. Both pricing and product go hand in hand. Also, „Product“ sounds too generic. So if you want to stick to a product page change the name to „Hosting“. That’s more precise. Also, I know already that the product is hosting. If you now show me a page that is called „Product“ I’m wondering and doubting whether hosting is your service indeed. The clarity that you’ve built up so far would be gone all of a sudden.
I also changed the order of the menu bar.
Original order:
New order (and naming):
With the new order in the menu bar, Uberspace has the chance to first introduce itself to me and then talk about pricing and support. It’s nice to first say a few words about you and then go into the product-pitching.
I’m paying attention to „REGISTER“, „LOGIN“ and the language switcher icon. Something is bothering me in terms of the redundancy that I’m seeing with the register and login link. I know it’s a common challenge to have a registration and login function there. So, showing both links is fine but visually something doesn’t work because REGISTER and LOGIN are on the same visual hierarchy. None of them is dominating although REGISTER should dominate. You want signups, don’t you?
With this in mind, I generally find the home page too passive. It’s not selling to me as straightforward as it could. I will talk about that in a minute.
So, there is little spaceship/rocket icon in red next to REGISTER. The red color is your subtle attempt to make me aware of it and make it stand out. BUT: It does not stand out enough. Make REGISTER red as well, and use the red you already have in place:
color: #e2001a /*—color-red--uber*/
Now the animated red text after „Hosting for…“ visually leads to REGISTER and vice versa.
Also, rename REGISTER to JOIN because it sounds less antiquated and more modern. It’s also more inviting and sounds like fun. Registering is what you do when you set up your company at the tax officials. Joining is when you enter a party or a community that you enjoy hanging out with. It’s something you’re excited about. „Join“ also works better with the spaceship icon. Do you register or do you join a spaceship (crew)? Again, I would A/B test that.
The LOGIN button. Make it more passive and give it less visual attention by removing the lock sign. You want signups so give functions that don’t lead to the signup less visual priority.
I also switched the order. Now it’s LOGIN and REGISTER. So, the visitor can see that you offer a login function but is visually drawn to the JOIN text.
Also give the LOGIN text a darker color:
span.navbar__item__name {
color: #999;
}
The language switcher is nice, in theory. But it’s a little iffy in the real world. First of all, the animation takes too long to start. I don’t immediately see what I get when hovering the icon. And since we’re only talking about two languages here, remove the animation and make it a static text. Something like:
EN | DE
EN would be highlighted as currently selected (non-clickable), and DE would be shown as the option to click. See the following HTML and inline-CSS code:
<span class="navbar__item__name"><span class="active-language"> EN |</span> DE</span>
I also added the class „active-language“ that you can colorize with the same gray as the LOGIN button:
.active-language {
color: #999;
}
And because bilingualism is a strong feature, move it to the left-hand side of the menu bar, and make it another list-item next to SUPPORT.
<li id="menu__items_about">
<a href="#">
<span class="navbar__item__name">
<span class="active-language"> EN |
</span> DE
</span>
</a>
</li>
Ok, EN | DE looks a bit technical but since these are the people you’re addressing it’s fine.
I’m assuming, at this point, that it’s important for you to show your offering is bilingual, and therefore being more „aggressive“ with the language switcher is in your business interest.
In general, the top menu bar and the hero unit (logo and animated text) now look much clearer and straightforward.
I’m greeted with „TIME TO START YOUR PROJECT“.
Too passive. Where’s the sale? Right now I know you’re offering web hosting for me as a creative person but you don’t let me sign up. Nothing is really happening here. I’ve scrolled down further and found something that looks like a signup box. Move that box up here because I want to try your service.
So, instead of showing me a visual of a moon crater combined with something that looks like servers, show me the signup box. Because you say „TIME TO START YOUR PROJECT“ loud and clear but you don’t deliver on that. The impact of the call to action fizzles out.
Let me first edit the copy.
The original says:
TIME TO START YOUR PROJECT
No matter what: travel blog, wallpaper shop or your self-written service - we deliver the machine for your ideas! Thanks to our universal hosting platform, you can focus entirely on your project. With our manual and many guides for all levels of knowledge you will always reach your goal. We support you in launching your website and best of all, you decide what you want to pay!
Here’s my edit:
Create anything - Pay what you want
alternative: Start creating - Pay what you want!
alternative: Time to create - Pay what you want!
You kick off your project. We deliver the machines. Tech blog, travel website or your online portfolio. Tell us your idea and we help you launch it. Contact our support team or read through our extensive knowledge base to figure it out yourself, tinkering is in your blood, right? Get your idea from the dusty shelves into our high-performance servers—and pay what you want!
Again, I’m being more aggressive in the copy and leaving out words that only fill instead of moving the message forward.
I like the „universal hosting“ because it goes super much hand in hand with the whole context of space, moon, tech, and so on. That’s a very good word choice. In fact, I like the word so much that I added it to the top hero unit. Now it says „Universal Hosting for…“ there and it looks good and works well. The pun is also subtle.
I decided to scroll down further and get a grasp of what’s waiting for me. I wanted to scan all the information ahead so I can make better choices for content, layout, and design.
I like the moon-crater-server-visual, and first I thought it’s at the wrong place. It’s such a massive visual that I was about to move it further down because on top we need stronger sales arguments. But then I realized it’s actually moving up and down. So, it has some dynamics. Only make the animation a bit faster. Instead of 10 seconds maybe 7 or 5 seconds:
>animation {
floating-server 7s cubic-bezier(.645,.045,.355,1) infinite;
}
I wasn’t able to test the optimum number of seconds because changing the CSS code live didn’t work in Safari. So, you would have to fiddle here a little. Also, make it a little smaller. It’s pretty dominant.
.section--uberserver img[src="/img/server.svg"] {
width: 75%;
}
Now, let’s move up the signup box because I actually want to repeat its appearance (further down).
I moved this HTML code…
<form method="get" action="https://dashboard.uberspace.de/register" class="signup__dualstack__form form__signup">
<input type="hidden" name="from_beta" value="1">
<input id="signup__email" type="email" name="mail" placeholder="Your Email">
<input id="signup__button" type="submit" value="Beam me up!">
</form>
…inside the bottom part of this div (before the closing )…
<div class="content section--flow-margin content--text01">
That’s the complete HTML code for the div:
<div class="content section--flow-margin content--text01">
<h2 id="time-to-start-your-project">Create anything - Pay what you want</h2>
<p>You kick off your project. We deliver the machines. Tech blog, travel website or your online portfolio. Tell us your idea and we help you launch it. Contact our support team or read through our extensive knowledge base to figure it out yourself, tinkering is in your blood, right? Get your idea from the dusty shelves into our high-performance servers—and pay what you want!</p>
<form method="get" action="https://dashboard.uberspace.de/register" class="signup__dualstack__form form__signup">
<input type="hidden" name="from_beta" value="1">
<input id="signup__email" type="email" name="mail" placeholder="Your Email">
<input id="signup__button" type="submit" value="Beam me up!">
</form>
</div>
And now I’m realizing that the 75% width for the moon crater visual is too small. So I’m taking a step back and making it 100% width again:
.section--uberserver img[src="/img/server.svg"] {
width: 100%;
}
The signup box is at the top, the crater looks big and great and now I’m seeing the wording „BEAM ME UP!“. Of course, I get it. But it’s distracting from your goal (a signup). Rename it to „SIGN ME UP!“. Say what you want the visitor to do. There’s some room for playing with words. I’ll tell you about later in this analysis.
Also, notice how the big crater is now visually balanced out with the signup box. The crater is connected with something. Before, it was just the paragraph and the crater with no connection. Now the signup box connects the crater and the paragraph (visually speaking).
Your first attempt to get a sign-up maybe succeeded, maybe it failed. So, let’s make sure that the following section adds trust.
I’m seeing the following copy:
AT EYE LEVEL
We are the friendly hosting company from next door - without frills, full of possibilities. We are as data economical as possible: All you need to sign up is an e-mail address. In case something does not work out as planned, our support team is always available to lend you a helping hand.
SUSTAINABLE
We are fair from head to toe: To our suppliers, to our employees, the environment and to you. Our servers are run using green electricity and we like to travel by rail or bike.
FLEXIBLE AND RELIABLE
We offer a technically sophisticated product without unnecessary restrictions for a price of your choice. So whatever programming language you prefer or how much money you have - we’re more than happy to host your project.
OPEN AND COMMUNICATIVE
Our documentation is constantly being improved. Feedback is not lost with us but highly appreciated!
And there are testimonials via Twitter from Uberspace customers. Good idea because tweets are dynamic testimonials. You can actually verify the person who wrote it, see the conversation that happened based on the tweet and even reply to the person and ask further questions. What’s the point of a testimonial? First and foremost, I want to be able to identify with that person who tweeted. Is it someone like me? A good testimonial answers that question.
Ok, let’s edit the copy:
100 % friendly, zero fuss, no frills
Our job is to not stand in your way. You get the advantages of a modern hosting company and all the possibilities to realize your idea. If you want to get it done and you’re stuck, our support is ready to help. You can be a beginner asking rookie questions (which is great!) or you can be advanced or a pro at the terminal. We treat you equally, no matter your technical expertise.
Remember why you’re writing these lines. You’re talking about your service but you’re writing it for your prospective customer. Don’t „We do“. Do „You can“.
Next paragraphs:
Fair, sustainable, data-economical
You support our fair treatment: To our suppliers, to our employees, the environment and to you. You also promote the use of green energy because that’s how our servers are running. Sustainability is important to us which is why we like to travel by rail or bike. We are also data-economical and privacy-aware: You only need an email address to use our service.
Any language, every budget
It’s very technical and sophisticated to run as many servers as we do. Still, we offer fair pricing, a wide selection of supported programming languages and a reliable 99,9% server uptime.
You ask, all of us learn
Your questions help us build our knowledge base, and improve it. Customer service is not a pain in the ding dong for us. We encourage you to ask as often and as in-depth as you can. We appreciate every question, and if there is an answer we guide you to the respective entry in our knowledge base or find the right words to explain it in plain English (no jargon).
We’ve gone through the main meat and it’s been pretty yummy. Let’s reward your visitor (and myself) with a signup.
Now I’m seeing a signup box and four features that should convince me to hop into the Uberspace rocket.
It says:
We don’t ask you for your personal data except for an email address
One month free trial
No subscription, no hidden costs
No contract period
An old sales wisdom says: Turn a negative statement into a positive version. Let’s apply it to the copy:
Your email address only, no other personal data
Try 30 days for free
Transparent costs (no subscription)
Pay as you go (no contract period)
Build your own 🚀 rocket :)
Again, I’m renaming the „BEAM ME UP“ submit button. This time my choice is „JOIN OUR SPACE!“ to have some variety and pick up the space topic. It’s still more straightforward than the abstract „BEAM ME UP!“.
Still, something is missing. First I thought it’s a headline that is missing for this section. A clear and final call to action. My initial choice was:
Join our Spaceship and build your own 🚀 rockets
A spacecraft without you is like Kirk with no Spock.
I then reused a div from another part of the site:
<div class="cwrapper padded section--flow-grid">
<div class="content section--flow-margin content--text02"><h2 id="open-and-communicative">Join our Spaceship and build your own 🚀 rockets</h2><p>A spaceship without you is like Kirck with no Spock.</p></div>
</div>
But then I realized that the section headline doesn’t work here.
My solution was to still use the text „Join our Spaceship, and… A spacecraft without you…“ but distribute it.
So, maybe you noticed that I added a 5th element to the feature list, and I named it „Build your own 🚀 rocket :)“. I did this because four elements look weird to the eye and are harder to parse. Psychologically it’s also smarter.
And I applied the text „(because what would Kirk be without Scotty or Spock…)“ below the submit button.
Finally, I switched the position of the submit box and the feature bullet list. It’s more visually pleasing to see the signup form on the right-hand side and the features to the left.
This is the complete HTML code for the call to action area:
<section class="container section--signup">
<div class="cwrapper padded section--flow-grid">
<div class="cwrapper section--flow-grid">
<div class="signup__dualstack__list iconlist iconlist--rocket">
<ul class="fa-ul">
<li><span class="fa-li iconlist__icon highlight"><i class="fas fa-sm fa-rocket"></i></span><span class="iconlist__text">Your email address only, no other personal data</span></li>
<li><span class="fa-li iconlist__icon highlight"><i class="fas fa-sm fa-rocket"></i></span><span class="iconlist__text">Try 30 days for free</span></li>
<li><span class="fa-li iconlist__icon highlight"><i class="fas fa-sm fa-rocket"></i></span><span class="iconlist__text">Transparent costs</span></li>
<li><span class="fa-li iconlist__icon highlight"><i class="fas fa-sm fa-rocket"></i></span><span class="iconlist__text">Pay as you go</span></li>
<li><span class="fa-li iconlist__icon highlight"><i class="fas fa-sm fa-rocket"></i></span><span class="iconlist__text">Build your own 🚀 rocket :)</span></li>
</ul>
</div>
</div>
<form method="get" action="https://dashboard.uberspace.de/register" class="signup__dualstack__form form__signup">
<input type="hidden" name="from_beta" value="1">
<input id="signup__email" type="email" name="mail" placeholder="Your Email">
<input id="signup__button" type="submit" value="Join our Spaceship!">
<p style="color: #b8b8b8;font-size: .9em;margin-top: .5em;">(because what would Kirck be without Scotty or Spock…)</p>
</form>
</div>
<div class="cwrapper section--flow-grid" style="--padding--horizontal: 0;">
<div class="signup__dualstack__list iconlist iconlist--rocket"></div>
</div>
</section>
Notice that the „Kirck, Scotty, Spock“ text received an inline-CSS style:
color: #b8b8b8;
font-size: .9em;
margin-top: .5em;
And you may also noticed the smiley emoticon that I added as a human element to the rocket, just in case there could be a misunderstanding that you do offer rocket building services ;)
Before I continue I’ll be taking a little bio break. It spent 3 hours and another 3.5 hours on it. I don’t want to rush into the finish line.
Ok.
It’s half an hour later. Let’s finish it.
I’m seeing three headlines and three paragraphs:
TECHNOLOGY
We offer all the freedom of a normal Linux shell on powerful hardware - no matter if you want to host your homepage or git repos, compile your own software or run your own service: the possibilities are endless!
PRICES
You pay what you think is right. Seriously! There is no minimum contract terms and the first month is free of charge: no risk, no small print, no hidden pitfalls.
DOCUMENTATION
We explain what you can do with your Uberspace and help you to get started. Thanks to our experience, we provide exactly the right amount of information: No gibberish, no misunderstandings, no secrets.
The three headlines are a visually more prominent version of the kind of links you put into the footer of a website. It’s a good solution.
Here’s my edit of the copy:
The Linux you love + Powerful hardware = Endless possibilities
You get all the freedom of the Linux shell you know running on our powerful hardware. Host your homepage, store git repositories, compile your own software or run your own web service. You can do it all!
Pay what you think is right
Seriously! There are no minimum contract terms and the first month is free of charge: no risk, no small print, no hidden pitfalls.
Shared Knowledge Base
We explain what you can do with your Uberspace and help you get started. We provide the right amount of information: No gibberish, no misunderstandings, no secrets. And if you have questions, our support team is always there for you.
It’s time for the footer.
I like it the way it is. No amendments from my side.
Though I have to say that the inflation of the logo to 1.800 px applied to the footer as well, and it looks great!
Overall the website has an appealing design and plays well with the space and technology topic. I find it visually pleasing and it makes sense to me.
The copy revealed a common misconception of how websites should be written. You write about your service so that the benefits for the reader become obvious. Not „We, us, our“ but „You, yours, your“. I hope I caught all weak copy spots. I also added subtle humor to stress the friendly tone to be expected when dealing with the Uberspace customer support or Uberspace in general. Friendliness and „We are guys from next door“ mentality is the image that you want to project through Uberspace. At least that’s what that I gained from the landing page.
Based on what I saw I’m stepping up to stage 2. Uberspace is now a somebody to me and not a nobody/nothing to me. If I heard the name I would be able to associate it with something.
Now it’s your turn again to prove that I did the right move by trusting you a bit more. Provide me with something that adds value like content through a blog post, newsletter, tweet or a video. If your content then will be relevant to me I could step up to stage 3. Remember, only at stage 6 will I actually buy or sign up (even if your starting offer doesn’t cost a penny). So, what next value can you provide?
Although I like your one-month trial, I would like to see examples of Uberspace customers. What have they been doing? What are their projects that are hosted on Uberspace? What kind of people can I expect here? Tell me their stories and what they are about (by respecting the privacy, of course). That’s something you could put on your email newsletter.
If email marketing is not your strong suit, then don’t do a weekly newsletter but a monthly magazine. Wrap up how the month went, bake in new testimonials, show me what’s going on behind the scenes by taking excerpts from your blog (if you have one). Invite me into your world and show me around.
I’m curious, so why not use the first 30 days after the signup for an introduction into how Uberspace works, for example with 3 emails that tell the newly signed-up person what you want him to know. Send the first email after 10 days, the second email after 20 days and as soon as his Uberspace trial period has come to an end, send the 3rd email and tell him what’s about to happen and what options he has. It’s a smooth way of onboarding the prospect.
Thanks for reading, I appreciate your attention.
Alex :)
If you’d like your own landing page to be analyzed, follow my 1-step process.
served by naii.io