Bare Naked App

It’s time to write the copy for the website so that Jason can start to put the site together design-wise. It took us about two days to write the copy for the website and for the first half day we wrote nothing at all but looked at other sites, and thought about what our visitors would want to know. Good site copy is concise, short, to the point with absolutely no jargon, but it doesn’t start off like this. Getting your ideas down is the first hurdle. You can always smarten it up later with a few tricks stolen from the world of journalism.

As you know we have the logo and name already in place but we needed a strap to sit under the logo that tells the visitor in five or six words exactly what the product does. For instance, ‘Flickr - the best way to store, search, sort and share your photos.’ The strap should be short, to the point and leave people in no doubt what your service does and/or who it’s aimed at.

Once you have the strap pinned down things get much easier. Firstly, because you know who to aim your copy at tone-wise and secondly because you should begin to get a clearer idea of what information people will want to know next.

Try to suspend reality for one moment and imagine that you are not so immersed in the build of your new app that you know every nuance of its character. Imagine that you are your mum, and you have stumbled on a new site called Amigo that has a nice smiley face for a logo. Oooh! nice, tell me more… What does it do? (this is solved by the strap line). Sounds great. Now think - what’s your mum’s next question? It could be ‘how much is it?’ or ‘how does it work?’ or ‘how do I sign up?’ This will be specific to your app.

Of course your mum may not be your target audience so you have to be sensible when writing your copy from this point on. However, it’s useful to imagine that when your customers arrive at your site they will know as much about your app as your mum probably does right now, so make sure to explain everything in clear terms and second-guess the questions your visitors will be asking themselves.

Skype does this very well. The first box you see on Skype’s site is a huge green box that says: With Skype you can talk to anyone, anywhere, for FREE, forever’ - with the word free in caps on its own line. Why? Because when you land on the site and you start to understand that Skype is all about telephony, your next question is ‘aah but how much does it cost?’ Skype dissolves this barrier immediately by telling you it’s FREE. After that, most people are sold and so the next button you find is ‘download Skype’. For those who are not sold there is always the ‘learn more’ button.

In journalism college when they teach you how to structure a news story they tell you to use the ‘Who, What, Where, When, Why, How?’ test on your copy. Who did it, what did they do, where did they do it, when, why and how? A good news story will give you all these facts very quickly in the first paragraph and usually in this order (grab today’s newspaper and check it out, most still use this structure).

You can use this to double check that you have all the information your visitors require quickly accessible on the home page.
Who - who is the app aimed at?
What - what does it do?
Where - where do I sign-up?
Why - why should I use it?
How - how does it work? (edit: better still, How much?)

All this information should be on the first half of your home page.

It’s very important to keep your copy concise. People get bored if you go on and on so don’t use three words where one will suffice. The space on your home page is precious. Each pixel is marketing space that needs to work hard for its place. Don’t use phrases that are vague, can be misconstrued or include jargon. Jargon in particular will alienate your potential users. You may know that your ‘Ajax-driven’ interface is kick-ass but your customers don’t care. Leave it out.

Trim your sentences to get your message across in the quickest way possible. Adding more words doesn’t make you sound clever and it certainly doesn’t make your app better so again leave them out. A couple of examples of this are:

What you write - What you should write

At the present time - Now
Provided that - If
Owing to the fact that - Because
In order to - To
The majority of - Most
Accordingly - So
Facilitate - Help
Frequently - Often
Commence - Start
Nonetheless - But
In conjunction with - And

And you can pretty much delete the following words from your copy altogether because they don’t mean anything:

at the end of the day
basically
by and large
currently
simply
well

If you want to learn more about writing tight, snappy copy then try reading ‘English for Journalists’ by Wynford Hicks.

Your copy doesn’t have to be in a highly-polished state to hand over to your designer. But it does need to have the main messages in place. You also need to prioritize the information so that your designer can see what’s important and what is less so.

Like this article? Digg it!

Dave (our developer) wanted to know if we were going to send out text e-mails when we welcome people to the service or html e-mails? We’ve decided to go with all plain text emails for now. It’s simpler and you know that everyone is going to be able to read them. Obviously text e-mails don’t look as nice as HTML, but it sure makes things simpler, as you don’t have to try to test the HTML e-mails on 50 different e-mail clients (ugh!).

Click the header to watch the video clip.

(more…)

We chose a URL, it’s www.heyamigo.net

It wasn’t difficult to come up with this. We knew that it was HeyAmigo as soon as we thought of it. Predictably though the .com was already taken by these guys. Don’t you just hate it when that happens?

Now obviously the .com would have been better but it’s not available so we were faced with a choice. Do we settle for a URL that is clearly substandard, like amigoonline.com, or gotamigo.com (apologies to those who have any URL with ‘got’ infront of it). Or we could stick with our first choice, fly in the face of fashion and hope that no-one notices, or cares that it’s not a .com.

Selfishly, we sought to gratify our own pleasures and went with the .net.

We’ve had a mixed response. The average comment is (sucking air through teeth noise) “aaaah .net?” or “I’m not sure about the .net, couldn’t you get the .com?”.

So there we have it. This one error could be the ruination of all our plans to take over the world one web app at a time. Or….people may not give a shit. Our money is on the latter.

We knew it would happen, but we’re falling behind on our schedule.

Jason is due to have the UI design finished tomorrow but we haven’t even decided on the logo and colours yet so that isn’t going to happen.

Dave is still working on getting the alpha live which is fine and he is on track for his 9th June deadline for version 1 to go live.

We (myself and Ryan) were due to have all the copy written for the website by tomorrow but (eek!) we’re going to London for the awards ceremony of our 55DSL competition on BD4D. So that won’t happen until next week at the latest and besides Jason is not ready to start the website design until he finishes the UI design.

Our schedule was ambitious and to be honest we’re surprised we got this far without it falling apart. Hmm…time to regroup, rethink and push back some deadlines.

The new deadlines are as follows (updated on Basecamp)

UI designed = May 1st
Website copy = May 4th
Website designed = May 19th

Thanks goodness we worked in three weeks contingency for this kind of stuff.

Now that we are happy with the basic concept of the logo it’s time to work on the colours and fonts/text etc. This is what Jason said:

After exploring some more type options I realized that my problem wasn’t with the type so much as the “G” specifically. While I did try a bunch of other type choices, I didn’t think that any of them were nearly as strong or as simple. So, instead I just ended up redrawing the “G” to read better (especially at small sizes) and look nicer all around.

After that I whipped up some colour combos. I think there are some really strong color choices here. All of these are striking and don’t bring to mind petrol signs anymore. Even though these are more colorful than the original ones, they still retain that simplicity due to the basic shapes and smooth type being used.

There are certain ones that really stand out for us (the yellow, orange, and blue coloured ones). We realised that we want the emphasis to be on the word ‘Amigo’ not on the smiley face and those three do that. We ask Jason to work up the blue one with some variations on secondary colours.

We did have one other concern. That because of the capital ‘G’ people might read it as ‘Ami Go’ instead of Amigo. Jason has agreed to fine tune the ones we chose so we’ll see what he comes back with!

… well, that was the plan, however so far we’d been down the route that users would use an email address and a password to login, I hear you asking how this affects URLs. Well, if we’re identifying users by an email address then it makes sense that their “rating page” could be accessed by a nice URL that looked similar to their email address. There’s the problem:

An email address, public, on the web = spam

Okay, so it wouldn’t quite be an email address, but for someone with the know-how it wouldn’t take much to get that information. Apart from not wanting to annoy the users of Amigo with more spam, given the nature of the service, spam is the last thing we’d want to be associated with!

Pretty URLs were the plan, so pretty URLs there will be, something had to change. The simple solution here was to have something else to identify users by, i.e. a username.

Okay so we had a chat with Jason and he managed to convince us that this logo was the way forward. In his words:

This smiley gets the imagination going a bit more. I know we have been referring to it as a smiley, but when it’s not around all of the other similar logos, it begins to be more abstract. Not to the point where you would miss seeing a smiling face, but it isn’t hitting you over the head. There is something about the stark simplicity of this one that is most striking. The other thing is I think the smiley does is convey friendliness and simplicity very well. It also helps to illustrate and reinforce the name by implying there is a face (an amigo) behind this service.

We’re sold - where do we sign?

When you are not a designer making decisions on design work is ’so’ difficult. You may like a certain design, or combination of colours but does that mean that it’s good, right or even relevant for your app? You need to use other criteria to make your decision.

This is where your initial list of ‘words that are associated with your app’ really come into their own. If you know how you want your app to make people feel then your logo should be doing that from day one. If you remember the words were.

• Simple
• Professional yet friendly
• Approachable
• It’s easy, not complex
• A service for everyone

The smiley does that perfectly. Not only that but it’s intelligent, doesn’t look like anything else out there, and is inviting.

We’ve learned that it’s good to listen to your designer. You chose him or her for a reason and they are the professionals here so let them do their job. You can agree or disagree but respect their opinion - they’re usually right!

Firstly, we were drawn towards the yellow billboard logo becuase its yellow and black colours are so striking. It’s easy to read and it stands out on the page. We think the lights above the billboard need some work as some people may not realise that they are indeed lights.

The smiley faces on the other hand we felt were a little too dumbed down (colourwise mostly) and they might get lost on the page. Also the ones on the far left felt too much like maybe a petrol (gas) station sign to really give that friendly look (that’s the petrol station logo designers fault not Jason’s). And the smiley face coupled with the word Amigo makes you think it’s social software (which it’s not).

We also had an interesting discussion about being careful ‘not to look like other web apps’. I’m not sure whether this is even relevant, because after all if the logo is a good one; it catches people’s eye, makes them feel the way we want them to feel and encourages respect for our product then who cares if it looks just like the Flickr logo. Right?

Well, that should be the case but the web industry is a pretty tight place and sometimes respect comes from doing something ‘new’ and not to be seen to be ‘copying’ others. Right!

There is definitely a need to ’stand out from the crowd’ purely because there are so many new web apps emerging right now. I think this is where the smiley faces come into their own. They are definitely different. Which means that we are leaning towards them - maybe purely for their ‘differentness’ (made-up word, don’t repeat).

But is that because we are children of the industry and being different is what’s required? In truth we think that the yellow billboard (although you could argue a tad predictable) is the best logo there. Oh the decisions!

We asked Jason to work up the two logos that we liked (the tiny billboard and the smiley face). And these are the visuals he sent back. With these comments.

One of the things I really tried to latch onto from the questions I asked you was the idea of friendliness and approachability. I wanted these logos to really feel like a handshake. Very kind, and colorful.

These logos are obviously much tighter than the sketches, but don’t feel like you need to pick just one look and go with it. These aren’t set in stone. Colors and arrangements can change. What we are looking for here is the right feel for a logo. Refer back to your list and see how these compare with what you set out for what Amigo should be.
I really tried to boil these down to their most basic forms, giving the impression of ease of use and simplicity.

First up, the billboard. This is just a basic progression from the logo. I love that it conveys the idea simply. I also included just the basic type treatment apart from the billboard.

Next, the smiley. I tried moving forward with it from the sketch, first a pretty direct interpretation.

Then, I tried to make it a bit more fun and abstract the smile a bit. This turned out pretty well, because it make for a very strong logo that is less overt about the smile. As you can see on the lower left, it also reduces to a very nice iconic form suitable for small usage and branding. Very simple and memorable.

I then took it one step further by playing up the type and name a bit more. Still powerful and iconic, the smile is even further abstracted.