It is now exactly one year since I created the first conceptual sketches for this site. This seemingly simple project was one of the most challenging projects I have ever completed. The site really forced me to use all the methods I have normally use in my projects for clients and have consumed an unbelievable amount of effort to make it perfect in every respect. Here is the story of how it was created.

I flipped through my old photos last night and realized that it is almost exactly one year since I made the first conceptual sketches for this site. Some of the 300 hours of work later I am actually very pleased with the result, even if I whish I had published more case studies to my portfolio.

For you all designers out there you all know how hard it is to create your own site. My own site is suppose to show of my design skills without focusing to much on one particular style in my aesthetic repertoire. The site is also suppose to be appealing to potential clients and function as a easy to overview portfolio. I have started the project to design a new site several times in the past. However, the projects have all fizzle out when client projects and lack of inspiration lead me to focus on other things.

I did the first sketches a couple of very sunny days in june last year at my Öland studio.

In June last year however, realized that I tried to do this project as fast as possible instead of organizing the project as a would do for a client. Isn’t this strange? I have worked out brilliant methods for creating successful projects for my clients and at the same time doing all the beginners mistakes on my own site. To my defense I’m not alone in this abomination.

I know of so many examples of skilled design agencies to skip all methodology and just do it when they are designing their own projects. The questions is this: If an agency do not apply their own methods in their own projects, why to they recommend the methods for their clients?

A detail view from the primary taget group from the effect map.

So, in the spirit of being true to what I preach I started with creating setting up an effect map for the project. I defined the primary target group for my site to be potential clients. The secondary target group was defined as potential fellow project members meaning other designers, developers and project managers.

The most important overall goal is for potential clients, that are interested in my work, is to by a quick glance should confirm that I walk my talk and know what I m talking about. As I saw it, a client should get the possibility to dive deep into any of the areas of my focus and get a lot of information in order to make an informed decision of hiring me.

After completing the effect map, the next step I recommend clients is to establish conceptual sketches for the concept. Documenting the overall solution. I have found that hand drawn sketches have the unsurpassed ability to support thought process and prevent me to get stuck in details to early. As I see it there are plenty of time to zoom in on details later in the process when a solid concept has been found.

The basic concept for the start page in an early draft.

In the case of aesthetic qualities I wanted to go for a very simple and minimalistic concept. Almost sterile in its simplicity. I wanted the fact that I in present day focus on interaction design to show clearly in the design. Color were to be added by adding large iconic images in the page header and for vary from category to category. I aimed for an extremely minimalistic design.

In order for the site to not get boring I wanted to add some movement and animations on the front page. The solution became a picture of me sliding in accompanied by some featured posts from selected from the blog.

The design and interactive prototype desgined in Adobe Fireworks

After completing the conceptual sketches I started the graphic design. I work in Adobe Fireworks which is a really cool tool for designing web sites and producing interactive prototypes.

The development of the site was done by Ola Sundqvist at Get it done, a word press equilibrist of large proportions. Later, after the site was initially published I moved the production to some cool developers in Ukraine.

The most interesting observation for me was the amount of time and resources the text work was. In all projects the texts are the hardest to get in good quality.

A quick snap with the mobile camera fixed the illustration for the about section on the site

In order to get the design and the basic content in an ok manner took somewhere around 200 hours to complete. I know this sounds like an enormous amount of labor, and I can ensure you that is was, and still is. Among other things, this project has really made me humble when it comes to the challenges involved in creating good content for a corporate site.

Finally I want to thank all of you who has contributing with feedback and suggestions along the way. This site would never has been nearly as good if you guys was not around to help me. Thank you all!

/ Yours truly

One of my goals as a professional is to share my knowledge with people that I really respect in the business. I got a perfect opportunity for doing just so, last week. I was asked by some of Stockholm’s most brilliant mobile interface designers to give a  seminar on

Ocean Observations is a highly creative and extremely skilled design agency in Stockholm specializing on mobile user interfaces. They have an impressive track record of successful mobile applications and site projects. Ocean Observations shares my view on the importance of sketches completely, and are effectively working with paper prototyping today. Obviously, it was an honor to get an invitation and present my views on this subject.

I have worked out some quite unusual methods for effectively using hand drawn sketches as a way of enable communication in all stages of an interactive project. I have had the opportunity to share this with several agencies in the past. I believe that in a constant flow of ideas, suggestions and abstract concepts drawing while talking is the most effective way of communicating.

In order to enable dialog between designers, developers and clients I therefore passionately advocate that everyone involved should have basic knowledge in how to draw conceptual sketches. In fact, I do not usually start any design application on my computer until the solution is clearly documented in scenarios where each step is illustrated by sketches.

Here is the presentation. Enjoy!

/ Mårten

By using Wiki technology as the main presentation tool when inviting the clients, they get the opportunity to take an active part in understanding the result of the usability study. As a tool for social contribution a wiki publishing environment invites to safe interaction, reflection and dialog. The cool thing is, that being invited to monitor the process, clients do provide invaluable input to the process without getting in the way of the usability consultants work.

Using a Wiki for this purpose requires a new way of looking at the information. Story telling in interactive media is, in fact, very different from an ordinary slide show or text document.

Here is my presentation. Enjoy!

/ Mårten

Just using statistic tools and calculating a conversion rate will not get you very far in terms of improving your online business. Without getting to know how users from your target group react, and feel about your online propositions, the statistics will not be of any use.

By inviting your every-day users to take part in usability tests, you will get a strong indication of what problems there are, that prevents them from purchasing your products. If you choose to use eye tracking to support your tests, you will get clear cut instructions on how to improve the experience. Not only usability, but also more elusive factors, such as inproper use of colors and other graphic design issues.

Here is my presentation. Enjoy!

/ Mårten

Getting to know the customer is much harder in e-commerce sites than in real life stores. Most visitors of an e-commerce sites will become just a number of page views and clicks in the over all statistics, taking their thoughts and feelings about the interaction with them when they leave. Getting to know even the people that actually act on our offerings is not easily done. If we want to know what the users think we have to invite them to an active dialog.

If you want to know more about how your users experience your web shop you have to set up usage tests and observe them wile using the sites. Conducting usage tests with eye tracking is the most advanced method of conducting usage tests. By studying the user’s eye movement we get the invaluable information about what they think in every stage of the experience.

Amazingly, few e-commerce sites have actually been subjected to thorough usage testing, with or without eye tracking, before release. Using a really good e-commerce platform will not in it self guarantee that the users, in your particular target group, will be able to effortlessly use it. Clever features and cool design will not always lead to desired results, but might equally as well leave the users confused unable to figure out how to become customers, even if they want to.

Inviting real users from your target group, and observing them when they try to use your web shop, is a brilliant way of easily identifying usability problems, and get all the information you need to be able to correct them. Preferably before you even release the site. With the use of eye tracking you might also get a clear picture of what segments of your offer are acknowledged by users.

In my presentation you will get to meet some people, that could have been your customers, struggling with some of the most common problems in e-commerce sites. You will also get insights into how to solve them.

If you involved or interested in e-commerce in any way, The Nordic e-commerce summit in Stockholm is the place to be 19th and 20th may!

The user experience is all about the small details. Some times very small things can affect the experience to such extent that an otherwise brilliant service completely looses its meaning for the user. A good example of this from my own experience is Wifikartan. A service that I found, loved and suddenly stopped using. Let’s take a look at how a small missing feature can make a loyal user to move on.

Wifikartan is only one in a series of services called “Min Karta”, eng. ”my map”, The services is all created by Ted Valentin, an entrepreneur, developer and a well known blogger from Sweden created to find, rate and comment on specific category of places like Sushi restaurants, churches, hotels and other establishments as well as places like beaches and camping sites. The solution is based on the Google map api. All sites are fast, reliable, offers an easy browsing experience and are fun to use.

I got really excited when I found Wifikartan and thought I found the ultimate service. By entering my current location I could instantly get directions to a spot with a free Internet connection with the closest one listed at the top. This proved to come in very handy for me because I like working at coffee shops. I feel very productive, particularly like going to a coffee shop were there is a wlan available and I don’t have to use my own mobile phone to connect the Internet. A common situation in my life is that I have a few minutes to kill before the next meeting or activity and I then need to find a spot large enough to open my lap top to sit down and fit in some work. The mobile version of the site made even more sense. By using it I could find the place exactly when I had the need while being on the move.

The spot page on Wifikartan.se. An easy search field in the header enables the user to enter the current location. A Google map view to the right with the near by spots marked. The details of the spot is shown in the main column along with the users ratings, comments and uploaded images.

I started to rate the places I found through the service and uploaded photos and found it a lot of fun. Whenever I  hade some white space in my daily plan a set out to find a new place and a was very active for a few months. However, suddenly I started to get annoyed by the service. From time to time the offered access in a place was temporary out of order or it was not free. Sometimes I got even more disappointed when a place that was listed didn’t offer any connection to the internet at all. Whenever this happened I felt misled and got frustrated that I had spent the time to use the service and ended up at a place that didn’t live up to the expectations.

I learned to read the comments more carefully. Sometimes other users had presented their complaints about a malfunctioning or missing connection and by studying the comments I could avoid some of the places. At one time I ended up at three different places recommended by the site without connection on the same day and by then I finally stopped using the service all together.

On my personal page you will find my last comments where I express my frustration of beeing guided to a spot by the site, and not finding a wlan at all or beeing asked to pay 8€ per hour to use it.

The interesting question from a usability point of view is how this is possible. If Wifikartan is all about spots with a free Internet access, why are places without an Internet connection showing up at the first place? Why are the users not allowed to report a malfunctioning connection in a way that and make this information clearly visible to other users?

It turns out that the critical feature that could solve this problem is missing. There is no field in the comment and ratings dialog to report if the connection is temporarily unavailable or not available at all. As a matter of fact, a status indicator of this information is not available in the search result and spot detail page either. The users are by design refrained from sharing this information. From a usability perspective the site is there for simply badly designed. The other maps from the “My karta”-services does not suffer from this problem, at least not in the same extent. A sushi parlor does not temporarily stop serving sushi in the same way a wireless connection has its mood swings. All Internet connections suffer some down time. But while the connection is temporarily down the first user of the Wifikartan, should be able to report this so that other user wouldn’t fall in the same trap.

The other problem the mobile user faces finding electric sockets when the batteries are low. Some places that offer wireless lan does not offer any sockets from their tables because they don’t want the customers to hang around too long. This is a drag when both you and your electronic companions feel exhausted and need refreshments. It would therefore be great when choosing a place to get information about the sockets availability of the establishment in question as well.

From an interaction designer as myself the suggestion to Ted Valentin is to add two fields to the ratings dialog in the service:

1. The connection quality — were the users can add mark a connection as temporary unavailable, or not present and one for the outlet policy. If a spot is marked with no connection the administrators of the site have an easy way of knowing which places to remove from the site completely.
2. The electric socket policy – The users can describe if the place offers any electric sockets and if they do, were they are located.

Furthermore, if a place that no longer offer a free Internet connection, and therefore are removed from the site, decides to reinstall it or stop charging for it there ought to be a way for users to reinstate it and start to rate it right away.

From an effect management perspective one of the most critical part of any site, is that the users feel that they are always able to get access to updated and correct information. If they find out that the information is wrong they are often willing to make an effort to correct it. One of the goals for users of user generated knowledge bases like Wifikartan, Wikipedia, IMDB or other such service strive to become big heroes in a small niche. To get attention from fellow users is the inner emotional driving force behind the interaction and make this services go round. To aggravate or prevent users from providing their input or not giving them credit for doing so will eventually lead to discouraged and lost users.

/ Mårten Angner

We at Creuna decided to ask Mårten to give his sketching technique workshop for our design team consisting of both Graphic designers and Interaction designers. What we did not anticipate was exactly how profound effect this little two hour workshop had on our daily design practices!

With offices in Denmark, Sweden and Norway, Creuna are Scandinavia’s leading full-service digital agency. Our 300 professionals serve leading organizations across the Nordic region. Creuna offers a full range of services and a unique combination of technological expertise and conceptual creativity. We understand business processes, user behavior and systems integration, and are on a lifelong  journey to learn and stay at the forefront of interactive communication.

In our practices we noticed a tendency among our designers and interaction designers to move to quickly from the conceptual work and starting the prototyping phase. We decided to aim higher and make sure all conceptual aspects were fully explored before moving to computer generated graphics. So, when Mårten presented his course in sketching technique for digital media it sounded like the perfect thing to do.

To be honest, our expectations before the course were not very high, I mean, how much change can you fit into two hours of presentation?

What we did not anticipate was the effect this course had on our design process. The team got really excited and started using their new gear passionately. Like the turn of a switch, hand drawn sketches suddenly appeared in places were we usually wouldn’t find it, even as effective parts of presentations to our clients.The basic outline of the course was really simplistic and goal oriented. By starting with how to draw a line everyone got something to work with regardless of current drawing skills.

As we see it Sketching skills should be a standard tool in a designers or interaction designers toolbox and I highly recommend Mårten’s sketching course to any professional design agency.

/ Niclas Giertz, Usability team manager, Creuna AB

My friend Helena changed her relationship status on Facebook to “Single”. This particular dialog caught my attention. Let me tell you, right off the bat, that this post however is not about Helena or her love life. This is just one example of the implications involved with social interaction on line in general. With this said, lets dive right in!

Technically Helena being “Single” is just that she changed the value of the relationship status field in the database from what ever is was before to “Single”. This however does not necessarily mean that she became single at this moment. The relationship field may be left blank for one reason or another and not show up at all on her profile. Stating that she is “Single” may there for not mean any change at all. Here is all get’s a little weird, if Helena just browsed around her settings and realized that the relationship status was still empty and decided to fill it, her entire on line community containing of xxx friends will still be presented with the new that “Helena is now Single”. The crowd will now be led to believe that that she was in a relationship that that maybe no one knew anything about and now, suddenly was single again. How is this for drama!

This is not the most interesting thing however. More interesting is the number of people that states that they “Liked” the fact that Helena now is single. In my mind this response to this matter is a bit strange. Off course there are certainly a few men around this both good looking and vibrant person that sees their chance when Helena now seems to passionately be back in the dating game, but this can’t be the complete explanation. If somebody wanted to get together with Helena they would NOT “Like” the single status but rather express their hope that Helenas relationship status would at some point be pointing in their own direction. Or at least that the status was cleared. “Like” in this meaning does not make sense at all and a “Hope” button is still yet to come.

In my book the term “Single” is charged with rather negative value. It implies a broken relationships and a state of “lonelyness” In this case it would be rather unpolite to “Like” the fact. You would not use the “Like” button if somebody told their online community that something bad has happened, right?

I know that the term “Single” also carries a nother possible interpretation. I may mean freedom from old and stagnated relationships, to be able explore options in life and what not. If this would be Helenas perception then a number of Jolly and cheerful “Likes” would be perfectly appropriate response from loving friends. As it turns out however different people in the actual thred is clearly responding according to their own interpretation!

There is another bothering thing with the “Like” functionality. If I have clicked “Like” by mistake and want to reverse it I should use the same button that has a toggle functionality. The text however is changed to “Unlike” which may not address my purpose at all. In my book “Unlike” is far more negative compared to the state matters was before I clicked the “Like”-button in the first place. Did I just loose you? Probobally. If I wanted to reverse a “Like”, “Undo Like” would in my opinion explain more clearly what I was aiming for.

As a matter of fact there are several groups on Facebook that want Facebook to add a dislike button in the interface. This, I can tell you, would be a disaster for the community building effort of the users. Bullying on the internet has become a great distress for the people growing up now. When the conversation flips to digital channels after school the victims continues to be victimized on line at night. Your friends may not love everything you write about yourself online, but you have to be rather strong in your self image to not be affected by some of your friends, meaning people that you have invited to your private space by accepting them as friends, suddenly started to state that they “disliked” the small pieces of your life you choose to publish.

I strongly believe that it is the “Ignore” and the “Maybe” concepts made Facebook great and is one of the things that separated it from all other networks available when it introduced a few years back. The possibility to get help from Facebook to induce uncertainty into relationships is actually giving us some space. If you for example gets invited by someone you love to an event that you don’t love you can still show your support for the event by accepting the invitation with a “Maybe”. You will not be there, but maybe a little bit in spirit even if you are not showing up in the flesh.

So, if Helena is happy with the life as “Single”, whatever meaning of the word, or happy with the fact that a certain population within her on line community likes the fact in question, this story will tell nothing about. But be sure that journey in the on line landscape will probably will continue to be rather inspiring and fun as long as the people that dislikes what you do or say are forced to mind their own business and go else were with their negativity.

/ Mårten Angner

The iPod and the iTunes application have played a large role in my life. In fact, my whole interest in music was seriously awakened first after I discovered iTunes. I have always hated CD’s. The fact that the music stops every hour and the fact that you can’t just throw away a bad track on a otherwise good album. The possibility to organize and browse my music in genres, artists and albums really made it fun for me. When the iPod was released I was first in line to get it.

The one thing that always bugged me is the case of amnesia the Ipod experiences when I attach it to my computer. Whatever I’m currently listening to is just lost. For me it is obvious that if the iPod is currently playing a song and then connected to the computer, I should be asked if I want to continue playing the same song from my music library on the computer. Making the experience slick and seamless is The iTunes application is started automatically and all the information is obviously available. It cant be that hard?

You might think that this is a tiny problem in the thick and thin of things, but it is extremely annoying. When I listen to audio books for example. There are sometimes hundreds of files. Losing track of the current track makes it virtually impossible to find where I was. In order to keep track of the tracks, I had take refuge in sticking a Post It note on the player where I can write the current track and position with a pen whenever there is a risk of losing touch. As you can imagine, this method is a little bit too old school for a digital freak like me!

I recently got an iPhone. In the iPhone the iPod is created as a separate application. This is a fair enough idea but the application is actually a great disappointment. I’m sad to say that this application is not as simple and intuitive interface as the iPhone’s older brothers. It seams that they have spent a lot of effort on making it look and feel exactly like the address book application, which for me seems like a downgrade.

When it comes to the loss of the current song the iPhone is both better and worse than the iPod. On the iPhone 3GS 32GB I currently use, the iPod actually remembers where I was in terms of navigation, even if the battery runs out. This is far better then the old versions that just woke up to a new day when rebooted due to low battery. The fact that the iPhone remembers what I was listening to does not help all the way. After you reboot the iPhone and open the iPod application and press play, the little bugger actually starts playing a song completely selected at random. Exactly what the engineers at Apple were thinking is not clear, but starting to play any song except the one I want to hear is a bit over the top.

I love music, I love audio books and I hope that Apple will help me not lose touch with what’s on in the future, even when I hook up my gadgets.

/ Mårten