Jason wanted to use Futura Medium as the typeface for headers on Amigo. The only way to do this (to my knowledge) is sIFR, a clever technique with Flash that allows you to use any typeface you want, regardless of whether or not the user has it installed.
There’s one major drawback to sIFR though: if you increase your font size, it doesn’t dynamically scale. It will only rescale the browser text size if you reload the page. I think that this is a pretty big usability problem.
So in the end, we decided to go with bold Arial. Obviously not quite as fun, but definitely more user friendly.
Sheesh, after what seemed like two years, our server is finally ready. It’s so exciting to see the app actually working in the dev environment.
What we learned from all this is that it’s wonderful to have a developer who understands Linux boxes and can run their own server. We survived on Dave’s server up until now and it really saved the project from falling behind!
Gillian Carson | The Design, Amigo | Wednesday, May 17th, 2006
Jason has been working hard on the interface designs. He’s pretty much finished most of the sections of the app. Here’s a sneaky preview of how they’re looking. They’re small so you can’t see the words but you get the general idea. Jason has coupled the logo with a smokey blue background and used a tab device to enable users to get around the interface. We really love the colours he’s used (not too serious but not too kiddy either). He’s also used a nice mix of serif and sans serif fonts that we think really make it that little bit different. Each screen is super simple with everything you need to operate the app in one tidy place. The Q&As are located down the lefthand side and will (hopefully) help us to answer users’ questions as they go.
Jason is still working on the interface designs so this is very much a work in progress. Some tweaking will occur as we go through each slide to test its usability. But initially we’re really happy with what we have so far.
Just a quick note to say that the deadlines have changed slightly again. This is more because things are just taking longer than we thought they would (designs going back and forth, fundamental questions from our developer that need more than a yes or no answer etc) rather than us falling behind because of external forces.
The new deadlines are:
Start website design = 19th May
Finish website design = 26th May
Website XHTML started = 29th May
Website XHTML done = 2nd June
App coded = 16th June
Launch = 7th July
This means that the launch has been pushed back to July 7 (previously 22nd June). This is not ideal, and to be honest we are hoping that we won’t need that long. But we can only wait and see. We’re more or less on track though, which is encouraging! Whatever you do, don’t skimp on your contingency time - you’ll need every last second of it.
When we built DropSend, we learned that good project management can be the key between going way over schedule or delivering on time (and budget).
When it comes to project management, here’s the important stuff:
Milestones
Project assets like logos, graphics, wireframes, etc
Messages
To-dos
In order to manage all this, we swear by Basecamp, a great tool from 37signals. There’s a free version if you only want to manage one project, and then it moves up to $12/mo. (We’re on the $24/mo plan, so we can manage 15 different projects at a time.)
The reason why Basecamp is integral to the process of building this web app is because we have to manage three freelance teams (Jason - Designer, Dave - Developer, BitPusher - Server Team). Doing it all over email just gets too confusing. It’s great to know everything is in one place.
One of my favourite parts of Basecamp is the Milestones area. It really helps me understand where we’re at with the project. The screenshot above shows all our completed milestones. Late Milestones are red, and upcoming ones are yellow. Seeing a bunch of green ones (completed) really makes you feel great and top of things! (And of course, seeing red ones makes you panic!)
One thing we’ve learned is to reply to messages quickly. If your designer or your developer asks you a question (usually over Basecamp) then reply straight away. They may be working on the project in the evenings, or at the weekends (as they are freelance there’s no reason why they should work on it 9 - 5) so this may mean checking e-mail at the weekends. Whatever you do, to keep the work flowing, answering queries fast is the key.
Jason finished the UI for Amigo late last week, so once I got to a natural break within the code I was currently doing I decided it was time to start on the XHTML/CSS (jumping in and out of code too often isn’t productive, wait for a nautral break!) - I’m sure Ryan, Gill, and Jason can’t wait to see something that both works and looks the part, I know I can’t!
While the XHTML/CSS isn’t completed quite yet, it’s been more interesting then other projects I’ve worked on: this has been the first project where I’ve built the wireframes in XHTML before any design has been done. So rather then coding the XHTML from a blank slate I’ve been refactoring (as such), and so far I’ve noticed a few things:
Early on we had something to look at. Yes it was rough, but it was in a browser - where it would end up, for everyone working on the project to see.
Refactoring XHTML is very quick - while some pages needed more editing then others they were all done quickly.
Refactoring CSS isn’t - removing redundant styles after the changes to the XHTML, checking all the browsers etc. isn’t as quick as refactoring XHTML!
Any interaction questions you had about the UI will become much clearer once a version of it is working with the back end of the application.
If your in a similar position any time soon, and haven’t tried "XHTML wireframing", I’d recommend it, even if just to see if it works for you and/or your team. Personally I’ve not 100% made my mind up, I’d like to try it again on another project before I do, but so far it seems mainly positive.
Building web apps is nice. It’s interesting and challenging and imaginative, but it doesn’t pay the bills in the beginning, at least not for most of us. So we have other jobs to do, like running workshops. We’re at a workshop today, Eric Meyer’s ‘Professional CSS XHTML Techniques.’ It’s in London which means that we have to stay over for a least two nights and it also took us around two days before that to prepare for the workshop. So this week we haven’t been able to devote as much time to Amigo as we should.
The point is that this is normal. Unless you are Google and you do have gazillions of dollars and just as many workers then you will have to build your web app ‘on the side’ and while you are doing other stuff. Work this into the timeframe. Don’t assume that you can work on your web app every single day, it’s not realistic. Stuff happens, you need to work (to get money), you get tired, it’s Sunday and your family is visiting. Whatever the distraction is don’t deny that it exists. It’s the only surefire way to get behind with the build.
We work with a company in San Francisco, who takes care of setting up, deploying and managing our servers. Amigo is going to be hosted on a single LAMP box at 365 Main (one of the world’s best data centers, in my opinion).
They were really responsive and wonderful when we worked with them on DropSend, but they’ve gotten really busy lately and it’s taking them forever to get our server deployed.
This has made it hard on Dave, our developer. He’s had to use his Linux box as a dev box. It’s not in a data center, so the connection is unreliable at best.
Lesson we learned: get your servers deployed at the beginning - don’t wait.
Gillian Carson | The Design, Amigo | Thursday, May 11th, 2006
While scouting around the internet in my search for concise web copy I also found some nice layout features - devices to help your readers either get to your info or help them understand your app better.
I thought I’d share these with you as they’re better off on the page rather than stuck in my head. So here goes…
The BNA Web App Oscars.
Cute Navigation
The prize for cute navigation goes to Skype for their very useable site map that appears at the bottom of each page. It’s a simple device and an old one at that but doesn’t it work well? With so much documentation on one site the map really is a Godsend. Skype site map
Best Sign-up Page
Shutterfly may not be everyone’s favourite Flickr imitation but they do sport a tidy sign-up screen. The design is a bit rainbow and too happy-go-family for my taste but the sign-up page really works. It’s simple without being childishly big, and there’s enough information there to convince you to sign-up without overloading your with data. The images tell the story which is normally the quickest route to get information across - they say ’see this picture of people having fun, this is you, and all you need to do is print your pictures and you can capture this moment forever.’ Heck they had me sold! Shutterfly sign-up
Dealing with a Split Audience Well
These people have a very daring application - a web app for the financial industry - yikes! They have the problem that their user base comes from two very different backgrounds (lenders and borrowers). It’s a problem that Amigo has to overcome too (if indeed it is a problem). I think they deal with it well, the split screen idea works very well and their icons draw you to the right area straight away. Ambitious but it works. Zopa split screen
Lightning Fast Info
BlinkSale’s ‘Learn’ section is the fastest in the West. They just use big pictures of the app in action with very little explanation. I was surprised to see how quickly I understood the app, considering it’s fairly complex. The screenshots were genius. Be warned though, you can really only get away with this if your interface is super-easy to use and well sign-posted. Blinksale’s ‘Learn’ section
Best Overall Communication
This prize goes to Skype. Now I know that some people will argue that Flickr is an overall top performer too - and I agree - but someone has to win! Skype just has it all for me, The whole site is very short, sharp and to the point which makes me feel like there really is nothing to this ‘free telephony thing’ (right or wrong). While the winning feature has got to be the animation on the home page. Any animation that still makes sense in Korean really does deserve to win. Skype’s animation
In this video, we talk about how we screwed up the holding page. We were rushed to put it up and made a school boy error on the PHP. Goes to show that everyone makes mistakes!
