GoldenTao

A number of people have asked how exactly do we go about design the UI for MetroTwit, what it takes for a feature/idea to make it from a tweet/email to us to a release.

Our process is fairly simple... we fight... like brothers (we're all in separate states so our fights are over WLM/Skype).  That may sound like a bad way to design but it means we are actively fleshing out the details from each of our perspectives and experiences and our shared understanding of the outcome we're trying to achieve.

Quite often there is no fight, we all agree on exactly how something should be implemeneted and it's recorded for when we get to actually programming that feature.  On the rare occasion it comes down to a majority vote as to how something should look/act.  Usually when we get to this stage we've already asked numerous people for their opinions or had user polls etc.

When it comes down to the exact design (the pixels that we know you all peek at when you change MetroTwit themes... you monsters) usually when coding a feature Winston (@winstonpang) and I will do the basic design/make it work and then let Long (@longzheng) make it look amazing.  A lot of the design of MetroTwit comes down the basics we decided upon when starting MetroTwit.  We wanted MetroTwit to look amazing no matter the DPI of your screen, something that WPF is made for.  Due to this all of our resources (icons etc) are all vector paths and every style has had hours and hours getting them to be pixel perfect and a good implementation of the Metro design guidelines.

If a great looking app is something you're trying to design, you can't go past The Noun Project for great vector icons to help improve the sharpness and quality of your app. This has been a hard post to write as our process isn't exactly follow 5 steps and you have something that looks good, but hopefully this has helped some app developers/designers.

As any astute reader might be able tell (for the 2 people that read this post) this post is a tad late... almost a year late.

So what happened?  I will admit I'm fairly lazy when it comes to blogging, but mostly we let this little twitter app that turned out pretty cool go out into the big wide world and found ourselves in what I like to call the 'Oh Crap' period of doing something new.

A lot has happened since Part 1 of this story, we went from a very small alpha of about 25 people to opening open MetroTwit to the public with over 800 users registering to be notified of the beta. 

Of course we were wise enough to release the beta in a nice quiet period in our lives so we could easily get bugs fixed and out to all the new users from a lot of different countries.  Except we didn't.  We released the MetroTwit beta during the Microsoft ReMix 2010 Conference in Melbourne while were attending sessions and 'networking' events at night.  Over the 2 days of Remix we released 6 new versions of MetroTwit to combat all kinds of issues with Non-latin Languages, resource hogging and geneal user experience. Overall it was great experience with our first release and we learnt a lot (like controlling Long's hit the release button)

MetroTwit has been an awesome rollercoaster of fun for everyone involved over the past year.  We're now at over 35,000 users that have tried MetroTwit and we thought it might be a good idea to give everyone an update on the plans for MetroTwit as we move forward.  Firstly, this week we announced our great new partnership with Windows Phone 7 Twitter Client, Rowi as part of The Nest and believe me there is lots more to that coming in the coming weeks and months.

One of the most requested features of MetroTwit is some kind of other social network integration, Facebook or Linked in mainly.  After a lot of discussions about MetroTwit in regards to changing MetroTwit from a twitter client to a social media client like the other big name clients out there, we have decided to stay as a Twitter Client from a 1st party perspective (even if Twitter doesn't like clients as much, we still <3 them).  This means you won't see us building in Facebook or LinkedIn directly into MetroTwit.

HOWEVER :) MetroTwit has a plugin architecture that overtime we will be looking to open up to developers which would allow some kind of 3rd party integration with other services (initially this would be for URL/Map and Geo services.)

We have a MASSIVE list of features and requests from all our users (sorry if we don't get to reply to everyone) and while some probably won't end up happening, a lot of the ideas are great and we will try to get to implementing them at some point.  A lot of people have asked for a list of upcoming features and while we do have a list of what is upcoming, due to our work schedules being quite fluid (we have full time jobs as well) it we don't like to make feature or timeline promises.

For the future from MetroTwit crew you can expect great new releases with some very cool new features (Streaming, Multi-account and other secrets) for Metrotwit. Thanks for all the support we've received recevied so far from users, developers and companies and we hope you'll continue on this (somewhat) wild ride with us.

Over the next few weeks and months, I'll be slowly posting a few bits and pieces on the more technical side of MetroTwit with even some code for the Metro/Zune style window, Media Previewing and a few other things, as well as a general how we find WPF to use as a dead language (#fixwpf).

It was a sunny Saturday Morning on the 27 March 2010 when I got up to check my daily RSS Feeds.  I found a post from Long’s IStartedSomething site with a screenshot of his idea for a Metro-inspired Twitter Client with the hope of making it an awesome Silverlight Out of Browser app.  (See the original post here MetroTwit: a Metro-inspired Windows twitter client)

My first thoughts were cool, I reckon I could smack together that UI in Blend (I’ve done plenty of mashing xaml in Blend as I’ve always learnt better with the raw Xaml than the UI tools).  My background is not in .NET Apps, I’ve been to many MS conferences and played with a lot of .NET ‘Stuff’ but never created a production application.

I figured I’d leave it to other .NET Developers but I’d see what I could throw together.  By that afternoon I had the basic layouts and design of a Silverlight Application starting to happen with the main window when Long woke up and came online.

After sending Long a quick copy of where I was up to, we decided this project might actually be a goer.  When we got to the more detailed design, (such as a Drop Shadow on Window border when running Out of Browser) we hit our first wall.  Silverlight doesn’t support a transparent window chrome in Out of Browser Applications.  Unfortunately the entire idea of MetroTwit is to be an amazing to look at and an amazing to use Twitter Application.

We decided (with a sigh) to switch to WPF and cut out the ability to have our app run on Mac and PC.  Thankfully switching to WPF .NET4 opened up quite a few other awesome features for us that has really made MetroTwit look awesome (new Text Rendering Stack for example).

For about a week we worked almost completely on the UI, mashing together how we wanted everything to look, Long being a full on designer that  cracked open Blend and recreated templates for every control we used.  Not a single control within MetroTwit is a standard WPF Control which is testament to the UI Frameworks flexibility and something that makes me scream when I have to go back to normal controls on .NET Forms (or in my day job, Delphi VCL Controls).

During this week we didn’t really have a Version Control System, however we had decided to use Microsoft’s Live Mesh.  I can’t say I’d recommend Live Mesh as Source Control, however it did give us a really quick way iterate our initial designs and code and have a Cloud Backup.  It was somewhat amazing to see UI changes that Long was making being built into my new build when I was testing new background logic.  It did turn out however as we worked more and more on files close to each other Live Mesh started having a lot of conflicts so we had to abandon Live Mesh.

We are now using a SVN server hosted on my own server that happily does our Source Control for us.  Both Long and I quickly realised MetroTwit was more than a 2 man part-time job and Long brought Winston onto the team.  Armed with 2 part-time (night work) developers and a Long as our designer we started implementing new features into MetroTwit pretty quickly; trying to get somewhere near parity of the Twitter website.

By the end of our first month we had implemented enough features (and fixed some fun WPF-related perf issues) to begin our Closed Beta program with a number of friends/people we knew used Twitter a lot and who would be able to give us some great feedback on both the good and bad parts of our UI design and features to let us know if were on the right track.

Stay tuned for Part 2 : Return of the Perf which I’ll have ready as soon as we get to our next Beta phase (coming sooner than you think).