Blog


Mar

Streamio Marketing Site - the Design Process


I will explain my typical process when designing a marketing site by showing you examples from my work with Streamio.

Why Streamio? Because they are a fun company to work with, easy to cooperate with and they give clear and good feedback.

First I got a mockup from Streamio with some thoughts and wishes. It's actually rare that you get a mockup this good from the customer:

The mockup from Streamio

The mockup from Streamio, which I'm very impressed with. Sooner or later they won't need my help anymore :).

An important thing with a marketing site is to get the user's attention. This is done by giving enough information in a short amount of time, so that the user gets interested and keeps on reading further down. This means that we need to scale down the information, put it in a natural order and keep it simple and clear.

It's quite known how much, or little, we read on the internet. Studies show that we read very little, I myself is a typical example. We browse sites very fast, and it doesn’t take many seconds before we jump to the next one. This is something we have to think about when designing web sites, we only have a couple of seconds to catch the users attention, not much more exposure then a logo. Some interesting articles on the subject are UXMYTHS - People read on the web, How Users Read on the Web and E-Mail Newsletters: Increasing Usability.

The first thing I do in the design process is to look through the information on the customer's mockup. The second step is to make my own interpretations. My first thoughts on the Streamio mockup was that there was too much information and the headlines were unclear. On the following drawings I have scaled down the information and changed the layout in the at the top:

Draw with pencil on paper

I love to draw with pencil on paper - a great way to get your thoughts down at the beginning of the process.

Close-up on Streamio's mockup

Close-up on Streamio's mockup.

Final drawing of the design

My final drawing of the design, which I showed Streamio.

What's left is:

  • a short headline about Streamio: they help you upload and publish videos online.
  • then a picture of a computer and two devices with their video platform or video, to show that it works on all modern platforms.
  • followed by 3 short blurbs about their advantages.
  • the 3 blurbs are then put into one sentence to make it even more clear.
  • a prominent Call-to-Action button makes it easy for the user to try the service.
  • finally there is a price tag with the minimum price.

When I'm done I show the customer the new drawings. This time Streamio was happy with the result, so then I continue with the next step: the real designing.

I design directly in the web browser, which is most efficient today. This way you work closer to the end result and you don't have to work in two steps, like when you're using Photoshop. I do additional graphical elements in Photoshop, but I constantly look at the end result in the web browser. Another great advantage with working in the web browser is that you have access to A LOT of fonts from @font-face services, such as Typekit. Today you can do a lot with the design using html and css3, which I'm sure you already know, but if you want to read more about it you can take a look at Smashing Magazine or NetTuts.

Two fonts

Two fonts used on Streamio's site. The first one is the popular serif FF Tisa which I think is great! It is used for all the content on the site. The second one: FF DIN Pro Condensed, is used for the logo.

First layout

This is my first layout after the drawings. Here I have made the basic layout and placed the content, and made some screenshots and additional graphics. But it is a bit plain and boring.

Streamio likes a very sharp and glossy style, and I won't say no to that. A lot of sites can't pull this of, but I think it gives a great vibe and harmony to this site and it works with Streamio's kind of service.

Some screenshots from the final site:

Final site 1

Final site 2

Final site 3

I really like the last page because it's only built with three images. It's a fun challenge to try to use as few images as possible. This keeps the loading time for the site short, or rather compensate for custom fonts.

Streamio launched their site on March 7th. It looks a bit different from my final version because they combined some of the final design with some of the earlier to create what they want.

Take a look at Streamio.com.

In my next blogpost I will write about the design process behind the actual video tool which David at Streamio has developed and I've made the design for.

If you have any comments or questions you can text me on twitter: @leuchovius, thanks!

Jun

VTD Billing Support System


Client :Västsvensk Tidningsdistribution (VTD)

Year :2009

Web site :http://www.vtd.se/

To keep track of what to bill each month, newspaper distribution company VTD used to rely on spreadsheets emailed back-and-forth between the regional managers and the billing department. The process ment a lot of manual work for everyone involved, and was also very prone to errors. To fix both of these issues, eLabs developed a simple web application where the regional managers report their billing data each month. The billing department then has access to all the data in one location.

Using an agile approach and test-driven development allowed us to discover and verify the complex business rules. If we had tried to map them all out beforehand, some would inevitably have slipped through the cracks. The automated tests made sure that the end result - the billing data - was always correct and consistent.

Are you currently managing one of your important business processes by manually sending around Excel spreadsheets? We can help you automate the process to cut down on errors and save time. Contact us.

VTD Billing Support screenshot

May

Mittpostnummer Hyperlocal Portal


Client :ICE House AB

Year :2009

Web site :http://41104.se/, et al

On behalf of our client ICE House we developed a platform for hyperlocal portals. The portals are accessed through nearly 7000 domain names, one for each Swedish zip code. Visiting the portal for your local zip code will show you all kinds of things available near you, such as classified ads, houses on the market, current offers of local companies, etc. Think of it as the common bulletin boards at your local grocery store, on steroids.

The sites use Google Maps to give the visitors an intuitive interface to browse the site. The posts you see change as you pan and zoom around the map. The sites' content is mainly provided by agents - people local to each portal's area. We also created a simple API that the developers at ICE House can use to post things that their spiders find while they crawl around the web looking for geocoded data.

This was also the first project where we used CarrierWave, a Ruby on Rails plugin for handling file uploads developed by our very own Jonas Nicklas. We'll talk more about CarrierWave in an upcoming post on this blog.

Mittpostnummer screenshot

ICE House has created a film describing Mittpostnummer (in Swedish). Check it out below. The sites are currently in a public beta while ICE House tune their spiders and agents to fill the sites with content.

Apr

Hemmalivs Online Store


Client :Hemmalivs Skandinavien AB

Year :2009

Web site :http://www.hemmalivs.se/

Hemmalivs is an online store letting people in the Helsingborg area of Sweden do their grocery shopping from home. In addition to being very convenient for the customers, the efficient deliveries are also more friendly to the environment than if people were to drive to and from the supermarket themselves.

When the developers of their original system went out of business, Hemmalivs asked us to help them design and develop a brand new system to replace to old one.

We simplified the user interface and made the design feel more open and welcoming, while still being familiar to old customers. We used Javascript and Ajax to streamline the shopping experience for customers.

The Ruby on Rails-based backend integrates with the payment gateway Netgiro to allow customers to pay with credit card or direct payment from their Swedish bank accounts. The backend also integrates with Hemmalivs existing order and logistics system.

Hemmalivs screenshot

Mar

Mediatec Group Web Site


Client :Mediatec Group

Year :2008

Web site :http://mediatecgroup.com/

In cooperation with our parent company, Edithouse, we created a web site for Mediatec Group, one of Europe’s largest corporations working with technical solutions for event and television productions.

We developed a simple CMS that automatically gathered products, news and case studies for their different business units.

The power of Ruby on Rails allowed us to quickly develop this custom solution that was specifically tailored to their needs, instead of trying to shoehorn them into a complicated off-the-shelf solution.

Mediatec screenshot