Redesign of mtv3.mobi

We just gave MTV3 Mobile website a redesign.

The recipe:

  • Simple and usable
  • MTV3 News look & feel
  • Easy access to sections, cross promoting services and sibling websites
  • As simple a design as possible: After contemplating how to differentiate between link types, we chose not to—Everything needs not to be conveyed to the user
  • Perfect partner: Besides coding, Conmio handeled the UI/UX while we concentrated on content and brand

Mobile specific website simplified to the max. UI/UX Design: Tommi Koirikivi, Conmio

 

Advertising Concept: Opening page

Display advertising displayed on top of regular layout such as rich media ads must subside in given amount of time. Squeezing elements into limited screen space results in crowded layouts. Banner ads are notorious for their poor performance. Good isn’t enough—Banner ads must be downright awesome for more than 1 per cent of the viewers to click on them.

Opening page concept in practice, Design by ad agency

In collaboration with our sales department I modified the concept of the ’Opening page’ for their product portfolio.

Demo page (check out the subtle CSS hover-effects)

If you can’t change it, make a feature of it

Journalists may see ads as necessary evil, but younger consumers usually feel more relaxed towards advertising. The are ad-literate, they realize commercials are out there to manipulate them—And They are OK with it. High end magazines realize this and have embraced advertising for years. Readers welcome Cosmo and Vogue for the ads as well as the stories.

Play with an open hand and present ads for what they are—commercial content. When user interface behaves as expected, nobody will mind.

Like button will give the campaign points, and winners are recognized with Best Pixels of the Month -award.

…but you still need the creative to run a successful campaign.

Don’t give in to the Dark side

Advertising is tricky. Everybody understands that advertising’s primary objective is to manipulate people’s behavior in to consuming products X and Y. However, people are ad-literate and manipulative behavior will quickly earn you a stigma. An interesting collection of User Interface designs to trick people are demonstrated among the Dark patterns. Don’t give in to the rage–Don’t go on to the Dark Side. Consumers do not care whether you will fill your quota or not, and anxious mindset will only earn you negative results.

Football UEFA EURO 2012

MTV3 Internet graphics for UEFA EURO 2012 tournament

UEFA EURO 2012

As Art Director I designed the look for Football UEFA EURO 2012 Tournament using the recently redesigned UI, general Sports styles and official Tournament graphics.

The official Style Guide was impressive featuring detailed instructions of logo usage, broadcast graphics key visuals and mascots – just about everything besides the tournament itself.

MTV3 Internet Euro 2012 site

Ice Hockey World Championships 2012

Graphics for MTV3 Internets Ice hockey World Championship 2012 website

MTV MEDIA is the official partner, broadcasting all 64 games. Therefore the MTV3 website for 2012 Ice Hockey World championships got to be larger than ever.

As Art Director I designed the look using the recently redesigned UI, general Sports styles and official World Championship game graphics in sync with television broadcast graphics with references to International Ice Hockey Federation. The look also featured the Hockey Bird, designed by Toni Kysenius of Rovio Entertainment.

The website also required large amounts of cross-promoting throughout the rest of the website and tv-channels.

The website

 

Juuri Nyt: Design for a News Application

Juuri Nyt is a news application that brings core categories from our main site to mobile users. When user connects to a network she can download latest news on her mobile device (iOS, Nokia Symbian^3 touch, Nokia WP7), where they remain until she updates again.

Juuri Nyt

Application is built by Conmio. They have also built The International Herald Tribune’s application with the same technology. Since the first application was designed for IHT—a newspaper, my design challenge was to redesign the application—economically with as little effort as possible—to our needs, and to convey a look more suited for a digital media brand such as MTV3.

In comparing the two, reading and browsing gestures work the same in IHT and MTV3 applications. Layout and anything that was visually tied to print media has been redesigned for a digital brand.

Touching up a mobile webmail service

MTV3 Mail service ‘Luukku’ has been wanting an overhaul for a long time.

Due to limited screen spaces, it leaves less room for designer to work in. Mobile design is all about function and all aesthetics must be subject to functionality. This means we will be doing quite a bit of more testing than in our other projects. It also means that mobile presence of a brand needs to be boiled down to minimum.

When a service has been untouched for a long time it becomes less attractive for advertisers. Empty ad spaces leave holes in the design—something I did not foresee when designing this layout several years ago.

How did it get left so far behind? Maybe since the original HTML has been rather well constructed—this old work horse has been made less of a priority—But would it have gotten a make-over much sooner, had it been poorly designed?

Color scheme in Luukku webmail was bright – we might either go with that or introduce brand colors with a strong scheme. Microsoft Metro is all about ”Authentically Digital” – Maybe this approach could give the service a bit of a look of a web application?

Luukku styles
…or maybe not. Playing with brand colors proves that red is far out. In background it’s wild and using red in buttons suggests they all have alert functions. What was I thinking…?
I decided to keep a slightly more traditional approach and gave up the alert colors. With some quick tests that I ran with my colleagues, my options boiled down to these three.
Luukku Color schemes
Fonts for Android is more complex issue
Roboto
Scott Grannemans article about mobile fonts.

Cut&Paste in World Design Capital Helsinki

Cut&Paste Digital Design tournament celebrated Helsinki World Design Capital 2012. The event brought design process to the stage in an interesting and fun way.

I was in the jury for this event organized by Fjord and Platoon. Congratulations for all of the winners, and many thanks for all of the participants! We saw a lot of talent this night.

Here’s the work of the Motion/Animation champion Henrik Axlund for you to enjoy:

Hyphenation in web documents

Long words are typographically troublesome when you lay out pictures and words in tight columns. You might need to promote a lot of stories simultaneously, or convey an impression that your pages are packed with content. Then those long words can really mess up your layout. This is typically the case with front pages, in articles the layout is more narrative and you can use space freely.

Hyphenation is important in languages where long words occur on a regular basis. Finnish language has words such as kymmensormijärjestelmä (ten finger system) and ylioppilastutkintolautakunta (Student exam committee). German, Swedish and Hungarian equally have their share of long words.

Soft hyphen example

Hyphenation example

Normal text (top) and with soft hyphen applied (below)

There are subtle improvements hyphenation can achieve. This example illustrates the significance hyphenation has on how a block of text is laid out in a browser. On top is a screen capture with normal text, no hyphenation applied. Below the soft hyphens are manually applied like this:

…ilta­­­puvuista ja juhla­­kam­pauk­­sista…
itse­­näisyys­­päi­vän vas­taan­­otol­la…

Browser will apply word breaks when necessary.
Unless you have a content management system capable of inserting soft hyphens, hyphenation must be applied manually. Currently I have no knowledge of any such systems. Please feel free to suggest a way to accomplish this.