

Ask HN: Landing page for our upcoming app. What do you think? - mansigandhi
http://shoutt.me/

======
vinaykuruvila
I like the concept.

We recently A/B tested the hell out of our landing page at Sidelines
(<http://sidelinesapp.com>), so there are some interesting things we learned
that may be applicable to you:

1\. Coming up with an effective single-sentence explanation of your product
will affect your conversion more than anything else. I don’t think you’ve
quite nailed it with “An app for you and your campus.” Figure out what the
most compelling use-case of your product is and make that clear on your
landing page.

2\. Make sure your landing page looks great on mobile browsers (especially
since yours is a mobile product). Right now, on Safari on my iPhone, I don’t
even see the map.

3\. I would get rid of “Exclusively at Stanford University”, since I think it
will turn off people from other schools. You should experiment with removing
it or even better, showing it only if the IP of the person clicking the ad is
in the Bay Area.

4\. I would get rid of the “What do you want to shoutt about?” I think for
most people using these kinds of apps for the first few times, they start of
as consumers of info/content and you later have to convert them to producers
of content. Your value prop with “What do you want to shout about?”” here is
all about the producer side, and I think that may not be as appealing for
brand new users. Look at Twitter for example. Their landing page is all about
the consumer value prop, and doesn’t mention the sharing aspect (“Find out
what’s happening, right now, with the people and organizations you care
about.”)

5\. A launch date and countdown would be awesome.

6\. Get people to connect their FB accounts instead of just giving you their
email. This way you could potentially send them FB notifications as well when
you launch.

7\. Try putting your messaging front and center instead of to the bottom left.
We got great results with this.

8\. Experiment, experiment, experiment. Anything I or anyone else here may
tell you would just be intelligent guesses at what we think will work. You’ll
get way better results from doing some quick A/B tests. We went from about 7%
conversion to our landing page to about 55% conversion just by running a
series of A/B tests.

Good luck!

~~~
lionel_lei
I don't agree with 4. I think the the name "shoutt" suggests that the app is
heavily focus on content producing. The animated dot on the map further
reinforced this impression. So I don't think it's necessary to tailor to the
content consumption aspect. My understanding is that this app is strictly for
expressing oneself, so who wants to "shoutt" if everyone else is shouting and
nobody listening? There is still value prop in this case, if the app is
intended to aggregate what people shoutt about and somehow connect people with
that? Still have to see the demo video to find out exactly what it does.

------
dmerfield
The following CSS will fit the background image to the page dimensions and
eliminate the letter boxing for all viewport ratios.

    
    
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
    

Before: <http://bit.ly/NY7ZtE>

After: <http://bit.ly/POyEaA>

~~~
mansigandhi
Wow thanks! We made the change.

~~~
spohlenz
Not quite. You've added those to the body element (inline as well, which is a
bad idea), whereas the background is on the #wrapper div. I'd suggest moving
the background onto the body element, and adding the background-size
definitions to the body element but within your CSS.

With that fixed, it looks very nice indeed.

~~~
mansigandhi
The pulses directly correspond to specific points on the map and we want the
points to scale with the map on window resize. Making that change would
require some more work from our end. We'll incorporate it later. Thanks
though!

~~~
spohlenz
Ah. In that case I'd suggest extending the map downwards so that the
background image is taller. My browser window is roughly 4:3 and the map
cutoff detracts from what is a very nice design.

------
benologist
Unless you're LaunchRock or similar your product is not a landing page.
Feedback on a temporary "give me your email address" placeholder page is the
_last_ thing you should be asking for and especially acting on in any stage
between deciding to make something and launching something.

Energy spent on your landing page is energy you should have spent preparing to
delete it.

~~~
mansigandhi
Hi there. I think there's been a misunderstanding.

We're actually launching this week at Stanford (our app has already been
approved by Apple). The launch page is to get the email addresses of
interested people and to create a pre-launch buzz at the school. We also have
our pre-launch marketing on the campus going on.

~~~
benologist
I think we do have a misunderstanding - I see this page as the modern day
equivalent of an "under construction" page, that should be replaced as soon as
humanly possible because every eyeball on it is an eyeball wasted.

Even the early signups have to be convinced twice to try your app, the fewer
people who see your launch page instead of your _launched_ page the better.

~~~
mwilcox
In the 'under construction' context - of course it should be replaced as soon
as possible - startups want to launch. But having one there is much better
than the alternative, which is to have nothing. Think about it more in terms
of market validation than customer acquisition.

~~~
benologist
I think you're only right if you're just gauging interest for something you
_might_ build. Once you start building the product stops being (slash never
was) that page you have to create, optimize and market just so you can double-
opt-in users.

------
efader
Why would someone use Shoutt instead of something like Twitter or Facebook?

~~~
mansigandhi
Shoutt is a location based app. We are bringing the concept of shouting to
your mobile phone - when you shoutt, only the people around you can hear you.

It's basically an information platform to share with people around you. It
would work best in existing communities like colleges, neighborhoods and even
cities. The network moves with you and connects you to the people you share
the same time and location with. Also, there are no friends or followers. On
Shoutt what you share is more important than who you are.

It's also a great way to find the most relevant information around you.

~~~
corporalagumbo
This description (and justification!) is missing on the splash page, and could
be helpful.

Eg something like this:

"Shoutt lets you hear and share what's happening around you, no matter who you
are or who you know. It's a social network that moves as you move, connecting
you to the people around you."

Also, can I ask why Shoutt instead of Shout? The double T doesn't really
appeal to me.

~~~
mansigandhi
We're changing our page once we launch this week to a more descriptive one. It
will cover everything I mentioned (and more).

We initially stumbled into "tt" because we couldn't find a domain name for
Shout. But once we did, we felt that it added an edge.

------
DanielRibeiro
Reminded me a lot of Like a Little[1] (YC S11) [2], before it became known as
Circle[3]

[1] <http://likealittle.com/>

[2] <http://techcrunch.com/2011/04/28/likealittle-funding/>

[3]

~~~
sumrania
I was also reminded of Like a Little and Shoutflow. Apparently, their website
is defunct now but I found an old article about it:
[http://www.addictivetips.com/mobile/discover-like-minded-
peo...](http://www.addictivetips.com/mobile/discover-like-minded-people-near-
you-with-shoutflow-for-iphone/)

It would be helpful to research why some of these social discovery apps did
not work and ensure Shoutt doesn't make the same mistakes. Like a Little went
on a rage for many months and then started plummeting. Personally, I love the
idea though! Good Luck!

------
Meai
I think it would be best if you didn't loop the little location aware hints.
After a while, show one that says something like "Activities all around
campus, now in realtime." (or any other better marketing slogan)

------
doctorpangloss
The map sort of explains the concept. Don't have the points fade away: let
them stack. Gives us time to read the texts, and let the messages aggregate on
screen.

A real flourish would be to show a device with your app running on it. Same
deal: phone, black background, white text box. Show the message text typing
out on the phone, have it disappear, then fade in the message. Now the concept
is crystal clear.

You can get rid of Fall 2012 probably. But otherwise really nice and polished.
Looks great on a big screen.

~~~
mansigandhi
Hey doctorpangloss, thanks for the feedback!

Once we launch (this week) we're going to change the site to have much more
information, including a demo of the app.

------
graeme
Really clear. The moving dots caught my attention, and explained the concept.
At this point, I want to put in my email to find out how it works.

~~~
mansigandhi
Thanks. Feel free to leave your email. We plan to expand beyond schools once
we finish with our beta launch at Stanford.

No spam. Promise.

------
humaknlght
I noticed that the page took a long time to load. Page Speed has some good
recommendations for speeding it up:
<https://developers.google.com/speed/pagespeed/>

~~~
humaknlght
Direct link to results:
[https://developers.google.com/speed/pagespeed/insights#url=h...](https://developers.google.com/speed/pagespeed/insights#url=http_3A_2F_2Fshoutt.me&mobile=false)

~~~
mansigandhi
Nifty tool! We'll use it to improve the page load times.

------
simplegeek
Awesome. I'm just curious did you consider buying <http://shoutt.it> (if it
was available)?

~~~
mansigandhi
Thanks. It was, and we just bought it!

------
Tiz
You did some great work dodging most types of injection, something any (what I
assume to be) college student should be proud of!

~~~
mansigandhi
Haha. Thanks! We know the tendencies of college students.

------
lionel_lei
Love it, orange and black is my favorite color combination. Idea seems
interesting, too bad I am not stanford student.

~~~
mansigandhi
Feel free to leave your email. We do plan to expand beyond Stanford in the
future.

------
freeslave
built something kinda similar a year and a half ago but never put any effort
into marketing it - <http://shoutfast.com/home> \- anyway landing page is
slick - good luck!

------
electrum
The text is blurry on the Retina MBP in Chrome. Looks fine in Safari.

------
alid
Hey man! I love it, great concept!

~~~
mansigandhi
Thanks a lot! We are really excited and launching next week. We set this up so
that we can collect emails from Stanford students. Do you have any suggestions
to improve it?

~~~
alid
None! (ok one ridiculously small thing - you could add a Favicon). It will
obviously change as you scale to more campuses. Exciting! :)

~~~
mansigandhi
Thanks for that - just added it.

------
jaseemabid
kickass!

------
wilfra
I think it's fucking gorgeous.

On what could be improved:

-Too much text in the lower left. You can use less characters and communicate the same thing better. Such as...

-'Leave your email and we'll let you know when Shoutt arives' change to 'Request a beta invite' and change from 14px to 18-20px. Alternately, remove this text entirely and change button text from 'Submit' to 'Request Invite'.

-Logo could use a bit more spice

-Where you say 'what do you want to shoutt about', I'd use your logo in place of 'shoutt'

-'an app for you and your campus' can be moved under the logo and put it on one line instead of two. Alternately you can move 'Exclusively at Stanford University' under the logo.

-Make the button and email form a bit smaller in relation to everything else. And consider something with a more low-key/elegant look, like rounded corners and with effects when the cursor is in the box: see Bootstrap forms. I'd also change the placeholder text to a more low-key font color, same with the button color. It shouldn't draw so much attention (at least not if it says 'Submit' if it says 'Request Invite' drawing attention is good).

Just incremental improvements, everything looks great as is. Feel free to
email me if you want to follow up or for future feedback.

Good luck!

~~~
mansigandhi
Hi Wilfra.

Awesome! Thanks for the feedback...really useful. We've changed the "Leave
your email..." to "Request a beta invite". And we made the fonts slightly low-
key.

We'll look into the other changes for the layout and incorporate them.

~~~
NaOH
Two minor tweaks. As long as "An app for you and your campus" is going to be
split across two lines, change where the line break is. I'd suggest "An app
[line break] for you and your campus." This brings greater emphasis to the
idea of "you and your campus," plus it makes that line and everything which
follows (beta invite, exclusively at Stanford, and what do you want)
increasingly long (left to right), helping the eye move through that part of
the page.

Edit: I should add, though I'm seeing it after some other folks have suggested
tweaks, I think it looks fantastic. Well done.

~~~
mansigandhi
Great point. We split it now to be An app for you. And your campus.

Looks good?

~~~
NaOH
Yes, I do think the revised line break looks good.

One other idea: I wonder if removing the periods after "campus," "invite" and
"University" might look better. My thinking is two-fold: One, they seem to
catch my eye a little. That's not a big deal, really, but I wonder if removing
them will make the map points more attractive since they would then be the
only period-like character on the page.

Maybe try it and see what you think. It may look off to you when implemented,
maybe not. Obviously, this is just a stylistic suggestion, so go with
whichever you think is more attractive.

