Redesigning the frontpage step 2

June 4th, 2007 by Anders Toxboe

We earlier described the long iterative process it was to redesign just a banner on the front page of motigo.com. We recently launched the last part of the front page redesign, which was a result of an even longer iterative task of trial and error.

The starting point for the front page redesign in the start of May 2007 was:
Front page of motigo.com - start of may 2007

*We had several things that we wanted to change in the old layout.*

  • We wanted to promote the “Developer blog”:http://devblog.motigo.com
  • We wanted to get rid of the bottom “how it works” box that explained that you could signup and get access to our services - only through icons. It was an idea that looked good in the eyes of our designer, but confused more than did good in the eyes of our users
  • With the new front page top banner, it did not make sense to have the signup box so close to the signup-button of the top banner
  • The graphics that showed how the blind-down worked was outdated - and is soon to be irrelevant (oops - did I say too much?)
  • The static content explaining what motigo.com was all about was more confusing more than explaining.

As soon as we had the change, we changed what we could and removed the bottom “how it works” box, put in a box printing an excerpt of the latest developer blog post, and moved the blue signup banner down lower on the page.

Front page of motigo.com - mid-may 2007

But, what is motigo?

When conducting “heuristic evaluations”:http://www.useit.com/papers/heuristic/heuristic_evaluation.html on motigo.com or in other words: When letting potential users browse motigo.com in order to find usability issues, the most often heard quote was: “But what do you do? What can I use the site for?”. Admittedly, this is far from the result we wanted to hear, why we took immediate measures to improve the general usability of motigo.com. The frontpage is only the first of many great changes to come.

Even though we in clear text explained what motigo was on the front page, users answered that they didn’t understand what our concept was. They admitted that the new “frontpage banner”:http://devblog.motigo.com/2007/04/27/redesigning-the-front-page-v1/ had helped dramatically on their understanding, but that they could still use some more guidance. It came clear to us that our visitors did not all visit our “about pages”:http://motigo.com/about/services to find out what motigo is, but sometimes gave up on the front page, when they could not find an immediate answer.

We needed to more clearly communicate what motigo is about - without too many unnecessary distractions. Based on heuristic evaluations and what our analysis told us, we agreed to concentrate on showing:

  • *Screenshots* of our services
  • *Explanations* of each service and motigo.com *that make sense*
  • An excerpt of our Developer blog, as this communicates who we are and what we stand for
  • Easy access to sign up

Finding a way to show screenshots of our services in a manner that matches the cleanness of our general look and feel was a dificult task. We had several solutions up on the table:

Screenshots proposal 1

*Proposal 1:* Looked clean, but did not give room to explanations of each service.

Screenshots proposal 2

*Proposal 2:* Trying out the bubble layout from our about pages. It unfortunately did not fit all of our services in the way we wanted.

Screenshots proposal 3

*Proposal 3:* Showing the screenhots alone without too much extra graphics turned out to be a good solution. At the same time, we could put in explanations of each service neatly together with each screenshot.

Screenshots proposal 4

*Proposal 4:* Adding the color code of each service gave the final touch that added the right amount of style and nice feel to our front page that we feel suit motigo. It also helped show that we use colors to distinguish between our services and what those color codes are.

When inserting the new screenshots and accommodating explanations of each service, the frontpage came to look like this:
New frontpage of motigo.com - ultimo May 2007

We are very happy with the result and have now started working on a redesign of the webmaster administration area, that will bring coherency into play and give a great overview of all your motigo services.

We also have plans to create tutorials and guided tours for each of our service.

Localization day

May 9th, 2007 by Anders Toxboe

Today has been the big localization day.

Two days ago, we announced an update of the forums and guestbooks that was to happen last night. The update was about converting our entire database for forums and guestbooks from latin1 hell to utf8 bliss. The update has allowed us to not only handle special characters without the problems of HTML encoding, but also to offer support for languages which aren’t based on the western alphabet. So this is a happy day for our Arabic, Russian, and Asian users.

Another big update is the support for timezones for guestbooks and forums. To change the timezone for your forum, simply log in with your motigo account, click on “my account” in the top bar, change the timezone to what you prefer, and save your account details. If you wish, you can even change it to another timezone afterwards, and everything will be changed on-the-fly.

We are happy to announce these to features, which has been on the top of the wishlist for a load of motigo users.

Webstats now shows your traffic visually

May 7th, 2007 by Anders Toxboe

If we have to say it ourselves, we just added a really cool feature to “Motigo Webstats”:http://webstats.motigo.com. When you click to see the stastitics of your page, for instance that of our “highest ranked member”:http://webstats.motigo.com/s?tab=1&link=1&id=710309 at the moment, a google map now shows you the most recent visits to your page visually on a world map. The most recent hits are marked with map markers on the map.

We are very excited about this nifty little feature and just wanted to tell you about it. Expect a lot of new cool stuff from motigo soon.

New motigo webstats google map mashup

Rapid feedback and multiple languages

May 1st, 2007 by Anders Toxboe

One of the biggest advantages of developing “web applications”:http://en.wikipedia.org/wiki/Web_application as opposed to “desktop applications”:http://en.wikipedia.org/wiki/Application_software is their often “short development cycle”:http://www.extremeprogramming.org/rules/iterationplanning.html. “Lightweight development methodologies”:http://www.extremeprogramming.org/light1.html with short iterations (development cycles) allow for the developers to react more rapidly on feedback from the customer and the product’s users. There is a relatively short path from when a feature is suggested until it can possibly be implemented.

As both desktop applications and web applications grow in size, it gets increasingly harder to react rapidly towards customer feedback in order to point the developer’s attention in the right direction. As applications grow bigger, a small change to the software can possibly effect many parts of the whole application, why each new feature gets increasingly cumbersome to release as the product grows in size.

To be able to react to changes in its environment, the application should always be the “simplest possible implementation”:http://en.wikipedia.org/wiki/Refactoring possible.

At times, the fundamental requirements of the application go against the goal of always having the simplest possible implementation. To stay “agile”:http://agilemanifesto.org, this dilemma needs clever and flexible attention.

At motigo, we have services that originate from multiple countries. “Motigo Webstats”:http://webstats.motigo.com was originally nedstat - a Dutch website, and “Motigo Forums”:http://motigo.com/about/forums, “Motigo Guestbooks”:http://motigo.com/about/guestbooks, and “Motigo Shorturls”:http://motigo.com/about/shorturls were originally “webtropia”:http://webtropia.com/ products - a German website. This means that our primary users are from the Nederlands and Germany - thus we have a need for more than just one language.

We currently have everything in 5 languages. This has put a serious barrier for us to be able to make rapid changes and react rapidly upon feedback. Every time we want to make a new screen, or just make changes in the existing practice, we need translations in all of the 5 languages that we currently support. This means that many changes that has been thoroughly tested and are ready to go public have to wait several days for our translators to finish their job.

A clever and flexible solution to cope with this problem in all contexts is still something we aim to find. If any of you have any experience with this, we would love to hear from you. However, for changes that have to do with presentation, we already found an approach that works fine.

As an example, in our process of “redesigning the front page”:http://devblog.motigo.com/?p=5, we started out making the changes visible only when you had chosen English as a language.

This proved effective, as we had made several changes based on user feedback even before the first translations rolled in. If you’re quick, you can even see that at the moment, it is only for English, German, and Dutch, that we have the new frontpage banner implemented. For French and Spanish, the old flashy banner is still showing.

When starting out by only implementing changes in English, which we (the developers) are all fluent in, we can again start to react rapidly on feedback instead of having to wait 4-5 days for all translations in all 5 languages.

As our plan is to implement 7 more languages (12 in total) in the new future, the dilemma will become increasingly more important to cope with in a clever way as we move along.

Again - if any of you guys have any input about our dilemma with wanting to push the features out to you as soon as possible and still having 12 languages to cope with, then please comment this thread and let us know.

Redesigning the front page step 1

April 27th, 2007 by Anders Toxboe

We are constantly trying to make small tweaks to make motigo a better place for you to spend your time. We strive for a usable yet aesthetic website. The fine balance of aesthetics and usability can however be tough to find. It is a often a result of a long iterative process of trial and error rather than a magic splash of geniality from our designers. For each little change you see in our products, such long process of trial and error lies behind. Creating the perfect website for you to use requires much effort and energy.

As an example, I will take you through the process of redesigning the front banner on motigo.com. It is a part of a total redesign of the front page - just a part of yet another iterative process.

When we first launched motigo in beta, we had a “flash banner”:http://motigo.com/images/motigo_en.swf showcasing motigo and our main products. Although this banner was pretty, flashy, and had some “wow” effect to it, it did more wrong that it did good. It left visitors saying “nice site, but what is motigo?” Of course, our egos could not live with this, why the process of designing a new and more friendly welcome page (and banner) began.

The starting point in the beginning of April 2007 was this:
motigo.com - April 2007

We had several goals for the redesign, although becoming aware of these we just as much an iterative process as designing the graphics itself.

*The goals for the redesign were:*

  • The less reading required, the better
  • The clearer the statement, the even better
  • Simplicity over “featuritis”:http://headrush.typepad.com/creating_passionate_users/2005/06/featuritis_vs_t.html
  • What motigo can help you with needs to be clearly stated
  • We wanted to clearly state what services we provide and what they are
  • To start take advantage of our free services, you need to sign up
  • A very important selling point of motigo needs to be stated: *it’s free*

The frontpage banner looked as this:
motigo.com -front banner v0

It didn’t really fulfill any of our goals.

It had a lot of text that was too small and too long to read (and too boring as well). The flashy effects of the banner gave the page a severe featuritis. When you moved your mouse pointer to click a service, the banner moved into something different. When you finally clicked anything, you were just taken to the sign up page instead of being presented with a proper page that could elaborate on the service clicked. It obviously didn’t work.

motigo.com -front banner v1

The first redesign captured a lot of our goals. The reading had been drastically reduced. The message was getting across much better. We now state what we can do for you, and with what tools we can help you kick ass. The featuritis was gone.

The banner was however one big piece of graphics, all linking to one page. We also needed to state that you need to sign up to get access to our services. It was however much better than the prior banner, why we put it up on the page immidiately. After a few days, we had ideas of making it much better.

motigo.com -front banner v2

The next redesign first and foremost included a sign up button. The background color of the banner was made brighter, and to illustrate that a signup would give access to all of our services, we made a gradient background becoming brighter towards the sign up button.
We also had an overuse of the motigo font (Yup, we have our own specialized font. Pretty cool, huh?), why the Tahoma font of the rest of the site replaced the subtitles of each service and of the main message (to the left).

motigo.com -front banner v3

Next, we realized that we left out the most important selling point of our services: *it’s free*!
This is why we added a banner showing that motigo is free. Realizing how important this actually is for how we help you kick butt, we made the “FREE FREE FREE” banner even bigger and darkened the font:

motigo.com -front banner v4

Tadaa! And that concludes the trivial task of designing a new welcome banner. On an after thought, we are aware that we shouldn’t bloat the banner too much with extra small banners and small gizmos. Then we’ll just end up creating a “parody”:http://video.google.com/videoplay?docid=36099539665548298 of the starting point.

Much work goes into the smallest task. In this way, we are slowly moving towards a better motigo that will help you make your website kick some serious butt.

And so it begins…

April 20th, 2007 by Anders Toxboe

After the launch of “motigo.com”:http://motigo.com on March 31st, we’ve been busy tweaking and correcting small things making sure our users are happy. Our support team has been brilliant in keeping track of the minor glitches which we’re now on top of.

All in all we’re happy about how well our launch went. With existing users in the hundreds of thousands it was only very few existing users who suffered from the minor glitches that happened in transfering them from their former services (webtropia and webstats4u).

As we are finally on top of things again, we can begin to look ahead and concentrate on many of the exciting new features and services we have in store for you. We, the developers, have created this blog to have a direct channel with which we can communicate with our users.

Regarding the future… First and foremost, we will continue to improve the existing services we have, but we’re almost more excited about the new services that are coming. You will hear about all this shortly. We can’t wait to start!

Stay tuned. 2007 is going to be a great motigo year.