One of the most important aspects of product development is communication. From time to time you realize that people's expectations and views within a project can drift apart. Although everybody agrees on the same goal, the actual project might develop a little bit like this...
Software development can be a very artificial process and there is good reasoning why the sketch might have made you smile. The important part however is, that it doesn't have to be like this. From mockups we learned the value of allowing clients, users and the whole team to get an idea of how the resulting software might work in the future... not only does this help us to indicate the flaws of our design, we also through this process, that the actual piece is what the client had in mind, that we are following the same goal.
A long time ago we started to integrate mockups into the entire product development cycle and the results are great. The site http://getcoffeecup.net for example is a pure mockup. The product doesn't exist, yet by designing its box upfront it allows us to find out how much and where we have to invest to make this project a success. This mockup allows us not only to communicate the idea, but almost the entire project as it almost be finished.
Today we launched CoffeeCup, a software project we just started. However many artifacts we found important have been rapidly polished to communicate our mayor contribution points. Naturally this is far away from perfect, but that is the intention. Similar to most mockups, this is a playground nonetheless.
Being developers of mobile applications, we have a lot of testing devices to field test our apps with users and customers. Due to the rapid development of the mobile market, however, we also have a lot of devices in our drawers getting dusty, because they are no longer industry standard or of interest to our clients.
Though not in a great demand anymore, these old devices are still incredible gadgets. Our latest addition to 'the drawer' was the iPhone 3G. This device still sports some pretty impressive specs for a mobile device and conveniently fits in the palm. Now, with the introduction of Xcode 4.5, Apple finally dropped the support for armv6, thus officially labeling devices such as the iPhone 3G dead meat and we understand this decision for the sake of progress. In comparison to its younger siblings, even our 3G is now a bit worn out. However, because it has never been carried around a lot, it is still in good shape apart from the weak battery which eliminates its intended use.
Showtime
Because the 3G is such a great device, but officially of no relevance to our work anymore, we decided to honor it with a day of our monthly tinkering. Brainstorming about ways to upcycle the device by taking advantage of its hardware and software power, we decided to create an app for the bathroom. The app we created is not rocket science, but a nice contribution to our office and an instructive little finger exercise for many of us.
In order to give new life to our old buddy, we gave ourselves a simple but fuzzy objective: "Let's create an app that uses specific features of the hardware and reintegrates the phone practically back into an office life." We wanted to repurpose the device by showing off its capabilities and morphing it from an unfortunately useless object to a smart ubiqutious piece of technology in the office. Location and purpose have been decided through lot with the results of "bathroom" and "comfort" as design parameters.
Let's make an app for that
The app coined “DJ Privy” is addressing a simple issue. Daily maintenance routines, such as the walk to the bathroom, are monotonous. Moreover, in a bathroom we sometimes create sounds that we don’t really like to share with the world outside the bathroom door. Everybody has been in this situation once and although it has never been an issue in the office, we thought it might be a valid problem case for the sake of tinkering.
DJ Privy has been conceived as a combination of a stationary alarm clock, webradio and a light sensor. Placed in the bathroom, the app is built to play music once a light switch has been turned on so you don’t have to worry about any sounds anymore. On top of that it even caters for a little bit of entertainment.
Putting the pieces together
As mentioned, with the introduction of Xcode 4.5, Apple finally dropped the support for armv6 so there is no chance to deploy to the 3G under normal conditions. Fortunately, with the help of this little post, we were able to deploy to the 3G despite Snow Leopard and the new IDE.
Keeping in mind, that most of the problems we had to address had most likely already been solved by others, we looked around for code snippets and useful libraries. Matt Gallagher, for example, wrote a great streaming app that we used as foundation. Being able to stream a music station (we used soma.fm’s secret agent fm), we set up a little gcd to analyse the luminosity of the back camera in specific time intervals and handle the music stream at the same time. Thereby, DJ Privy is able to continuously check if the light in the bathroom has been switched on and to play a tune if this is the case.
Ready to take the stage
For a couple of days now, DJ Privy is filling the bathroom with acoustic irradiation. In the following video you can see our little project in action...
If you are interested in the source code, you can download a copy from the repository at github. It needs to be mentioned though, that we glued this app within a couple of hours with a variety of distraction along the way, so be warned, the code is as pretty as a rag rug.
Again, the app is neither rocket science nor constructive progress in any way. However, there is huge appreciation to them good folks on the interweb, who make this kind of prototyping possible and who love the idea of repurposing. It's good times for tinkering folks...
Many companies present themselves on the interweb. Many of them do the same stuff.
So how do you stand out? Truth is, that you don't have to be that different to make a lasting first impression. Just show who you are and why you are good at what you do, as a business, even on a personal level. As I was helping out friends with their online presentation, we revised a couple of factors that would lead to a successful and convincing site. We stated the following as essential:
Be clear, no gibberish. Just state what you are actually doing.
Get to the point and appreciate that everybodys time is valuable.
Ignite interest and create trust in you and your brand.
The elevator pitch
Image the following situation: You meet somebody in an elevator. Being a potential client or not, he is asking you, what you are doing.
Floor 1: Tell what you do.
Floor 2: Give examples.
Floor 3: Answer one or two questions in detail.
Floor 4: Thanks for the ride. Give me a call.
By the time your random visitor leaves the elevator, he should be able to grasp what you are doing and how good you are. Maybe he even asks for a number.
In a similar way, we created the site that you can preview at the bottom. Once you enter the site, it briefly describes what the guys are doing. If this is not for you, you can leave right now. However, if you think you stumbled upon sth interesting you are invited to the next floor. Scroll down, there is more beyond the fold. By the time you reached the end of the page, you have a pretty good understanding, what their business is about. The next step is up to you. Now this is neither rocket science nor novelty, however we paid particular attention to integrate the points that we stated as essential above. This is what happened:
Clarity not only on a textual but also on a visual level. In fact, you don't need to read a single word on the final page to understand what it is about and why you should go for it. Graphics, Gridding and friends are cerebral scaffolding and ease understanding. The text explains the rest.
Brevity comes by throwing out everything that doesn't add value. Pyramid writing and good content flow create a unique and coherent story from top to bottom.
Ignition by showing professionality and personality. That is all it takes as long as it shows who you are. The boys develop software. They are quick, practical, efficient, yet elegant and that is what they show.
I recently took over some design work for an online configurator that allows people to personally design their glasses (or well... the framing for them). As you never really get a second chance to make a first impression, we looked at the home/landing page of the configurator which would consolidate all the incoming traffic. Within a couple of hours we came up with a simple yet effective design that is worth sharing for its structure and its components.
It only take a glance for this site to work. Through the photo it creates a mood with the characteristics of the product. It briefly explains the concept of the configurator and with the 3 doodles makes it main points. Further more this site introduces a colour theme with an explicit action color (in this case, orange is used throughout the app, to lead users).
With a very small amount of effort, this page welcomes, directs and convinces.
I am not a morning person. I never was and will probably never be, but I have a plan. In the last couple of years I tried many things to improve my personal ability of getting out of the bed in morning, after a fashion. The problem is simple and consistent. I work late, tinker until early in the morning, sleep, try to do some sport, run to work. Most of the times: half asleep. This is going to end. Trying a lot of different helpers to get out of the bed led up to the conclusion that I have to combine the forces. There are a variety of factors that would create a perfect wake-up system. Naturally this might only work for me. Everybody's routine and preferences are different, but maybe you are a similar kind of edible dormouse and can benefit from this.
In the picture above you can see a little sketch. The sketch only shows some components that would make up a perfect personal alarm. It is a bit technical, but this is what will be built and in a couple of posts how it exactly works and how it will look like.
These are the important components...
The mobile
Like a lot of other folks, I don't really have a physical alarm clock anymore. My mobile phone is with me all the time and I don't even remember when exactly it replaced the alarm clock. Since it became some sort of miniature mission control for my life, it also handles the management of waking me up. Actually it doesn't do a great job, but is the most practical device for management and set-up.
The goal: The smart phone needs will be mission control centre.
Light
Sleeping in on a Saturday or Sunday is great. Not because you can sleep late, but you can wake up with the sun. Naturally. Unfortunately, most of the times, that I have to get out of bed, the sun is not quite there yet, so I have to wake up in the dark and find my way out of the cave. Philips recently tackled this problem quite nicely. Their wake-up light simulates a sunrise in your bedroom, hence helps you to. They say it's a clinically tested improvement. Friends say it works great. I tried it, I love it.
The goal: The alarm clock will simulate a sunrise.
Versatile Audio
This is where the iOS built-in alarm sucks the most. It is repetitive and limited. Getting new sounds is a hassle. The bigger problem is, that I somehow get used to repetitive sounds and learn to ignore them without intent. People living close to a streetcar or train station are most familiar with this phenomenon. Once you have guests in your place and they ask you, how annoying the noise is, your first thought probably is: "What noise". You learned to overhear it. Same for me with alarm sounds. That is why I have an alarm clock that plays real radio in the morning. Every morning something different. Because many German music stations are
The goal: The wake-up sound will be some sort of webcast.
Fun
Many of the components in the sketch, I have never touched in my life. They all have been discussed with friends and colleagues. Everything seems to make sense, but it is all subject to change. The reason for putting this together is simply to learn about couple of things about prototyping (physical, server side, clients) and for the sake of tinkering. At the moment, there is absolutely nothing interesting on the telly.
The goal: Enjoy and learn while doing.
A little extra
There is a little extra gimmick that might be worth investigating... but more about that later.
Recently we decided to beef up our bland ikea furniture a bit. The victim was an expedit rack that we use as a hi-fi rack in our living room. I am a huge fan of pixel art and would cover my whole appartement in 8-bit if I could. Anyhow, as we wanted it to be something that is functional and nice to look at, we decided the only reasonable thing to do is to cover the whole rack with a curtain of dice. From a functional perspective, this had two benefits. First it stabilised the rack by making it heavy and rigid, which makes it a perfect base plate for a vinyl player. Secondly it hides the mess in the rack. I have to be honest. Mess is inevitable and good cover techniques are vital sometimes. In any way, we also wanted something that is a bit unusual, interesting, but a pleasure to look at.
We finished it for quite some time now and are really happy with the results. As this little exercise however was quite simple and as it didn't take any time to jazz up the hi-fi rack, I quickly wanted to note down the process we went through.
Step 1:
At first, we chose an appropriate image. Essentially, we wanted a picture that is easily recognizable in a low resolution as we didn't want to the picture to cover our whole appartement. Moreover, the space on the little expedit rack was actually quite limited, so the image needed to stick out. Finally and most importantly, it should be something nice to look at, so we were test driving a lot of images. We started with something like this:
Step 2:
Using the Pixastic library we built a javascript based prototype (that you can find online here). Basically, we converted a variety of images into a monochrome version, scaled it down to a resonable amount of pixels and subsequently posterized the image to 6 levels of grey that we could easily replace with one of the faces of a die. This is how the intermediate step looks like:
Step 3:
In a final step, we replaced every grey pixel within the image with its counterpart symbol for the face of the dice. This way, we ended up with a map of how to place all the dice of the expedit panels. All in all the whole project took us about two tinkernights. One day coming up and playing with the tool as well as deciding for the final image. The other night we spent on glueing the image to the panels. Quick and easy. The map for the example image would like something like this:
Our final rack:
Finally, we had long discussions who would be best to decorate our new rack. Personally I am a big fan of italian spaghetti-western uber hero Bud Spencer, so the decision was quite easy. However, everything we were looking for was a picture that comes with a clear contrast and a pleasant smile. The overall cost for this project was about 90 Euros, for about 3000 dice (we found cheap remnants on ebay) and 4 expedit panels.
And this is it:
The tool
For your own pleasure and convenience, you can play with the tool live on: http://brauer.tv/downloads/dice/ to dice any picture on the web you like. If you're thinking about making changes to the code to adjust it for your own tinkerings, you are also more than welcome to downloaded the source files here:
In 2007 some 2.8 million people commuted to work in London. While many commuters tend to use public transport (train, underground or bus), over 285,000 people actually walk to work in London. Within larger urban areas such as the London metropolitan area, also referred to as the London Commuter Belt, the regular travel between the place of residence and the place of work can become demanding over a long period of time. According to the work of Haddad et al. long term commuting can have an extensive impact on the physical and mental health of employees and their work performance indicated by initial symptoms such as stress or fatigue. Therefore, regenerating one's energies needs to play a decisive role in the commute to assure a certain level in the quality of work based on the employees accessibility to personal resources.
Sketching proved to be invaluable for bringing the group to decisions because solutions could be easily compared and advantages made clear. During the initial meeting concerns were raised through the use of a storyboard scenario that it may be difficult for users to identify what weather conditions constitute good walking weather and also that the alarm clock may lead users to begin walking in conditions that they subsequently judged to be below their expectations, it was decided that default settings (eg. ‘perfect’ day, ‘lovely’ day etc) should be included to make these choices easier for users.
Learn Something Every Day is a brilliant project. Every day the folks at Young put out a new fun fact skit that amuses me a lot. Though I do look at their site on an almost daily base and even subscribed to their feed, I was wondering if their might be a somehow ubiquitous way to integrate these little units of mental candy into an everyday.
After all this widget is nothing too fancy. It simply reads the LSED feed and creates some sort of slideshow displaying ten fact skits, one after the other. Beyond just watching and enjoying it you can also skip through the slides by clicking them.
Please, feel free to throw the widget on your chumby, dash, android or whatever. It is listed here in the free widget section of chumby.com.
For your own pleasure and convenience, the widget and all the source files can also be downloaded here:
But as some of you might be interested in playing with the widget to create their own, let me walk you through some of the modifications that had to be made.
Cobbling the widget
Basically the widget I created is a quick-n-dirty modification of the Sample RSS widget provided from the official chumby wiki. Essentially all magic worth highlighting is bundled in two methods that are displayed below. But let me explain the tricky parts...
First this widget is written in Actionscript 2, which is a somehow old way to steer flash movies. Unfortunately flash doesn't allow your widgets in general to load external ressources without the need of a little effort. To load external ressources, I had to put a crossdomain file and a little php file to proxy the feed as well as the images to the chumby.
After creating the proxy, essentially one method needed adjustment - loadItem(). Lines 5 to 11 show how an XML based feed is being traversed to distill the adress of the images. The the previously loaded image will be removed from the stage which brought up a very strange problem about removing movieclips. You can see the solution to it in lines 19 and 20. Finally a new clip will be created dynamically (see dynamic referencing in line 14) and loaded into the widget via a common MovieClipLoader. Once the image is loaded it will be tweened and adjusted to the widget and equipped with the skipping feature.
Here are the important code parts for reference:
1: function loadItem(item) 2: { 3: g_currentItem = item; 4: //dig in feed for image 5: var xmlData = new XML(item.firstValueOfType('content:encoded')); 6: xmlData.ignoreWhite = true; 7: var url = ""; 8: for (i = 0; i < xmlData.childNodes.length; i++) 9: for (j = 0; j < xmlData.childNodes[i].childNodes.length; j++) 10: if(xmlData.childNodes[i].childNodes[j].attributes.src != undefined) 11: url = xmlData.childNodes[i].childNodes[j].attributes.src; 12: //fade out and get rid of the previous LSED image 13: var loader_mc:MovieClip = 14: _root["loader_mc"+(g_itemIndex - 1 < 0 ? g_items.length - 1 : g_itemIndex - 1)]; 15: var alphaTweenHIDE:Tween = 16: new Tween(loader_mc, "_alpha", Regular.easeOut , 100, 0, 6, true); 17: alphaTweenHIDE.onMotionFinished = function() 18: { 19: if(loader_mc.getDepth() >= 1048575 || loader_mc.getDepth() <= 0 ) 20: loader_mc.swapDepths(2000); 21: loader_mc.removeMovieClip(); 22: }; 23: //load new LSED image 24: var container:MovieClip = 25: createEmptyMovieClip("loader_mc"+g_itemIndex, getNextHighestDepth()); 26: mcLoader.loadClip(makeURL(proxy+url),container); 27: } 28: function onLoadInit(mc: MovieClip) 29: { 30: var alphaTweenSHOW:Tween = new Tween(mc, "_x", Strong.easeOut , -330, 0, 3, true); 31: mc._yscale = 50; 32: mc._xscale = 50; 33: mc.onPress = function() { nextItem(); }; 34: }
Tough to realize, but in the last couple of months, I spent quite a lot of time on writing, sculpting and vagabonding over a single page of text; i.e. the abstract of my master's thesis.
In retrospect the process of gradually sculpting it has even been quite helpful. Not only did it help to communicate the gist of it to friends and colleagues to develop and discuss ideas. Primarily it served as a mental scaffolding to define the scope of the research project, while keeping track of what is being done, how and why of course. As usual I was looking around how others performed on writing an abstract for their project and found it quite helpful to look at their work. Returning the favor of sharing attempts on this, please have a look on my attempt on...
Summarizing the master project
The need to increase physical activity is a burden to many. In order to encourage physical activity with the help of technical mediation, related research has taken a wide variety of promising attempts to support individuals in facilitating and sustaining healthy lifestyles. When it comes to offering valuable clues about personal performance though, the problem space of providing motivational feedback is characterized by a lack of substantial techniques and strategies that assure to affect an individual user effectively.
To address the present issue this study investigated the problem space of applying negative reinforcement into an ubiquitous computing environment to examine potential opportunities as well as drawbacks of applied persuasive conditioning strategies to encourage physical activity. A qualitative approach has been taken to investigate the present problem space after the applica- tion of negative reinforcement into an intervention design accompanied by an observation phase lasting two weeks time. Post to the observation phase, interviews have been conducted with eight participants followed by an analysis based on the combination of Grounded Theory and the Transtheoretical Model of behaviour change as an underlying theoretical framework for investigation.
With regard to the current discussion within related fields of research about the effective application of negative reinforcement, this study found appreciation of its application based of several design factors, which will be presented and elaborated over the course of this paper. As a result this study aims to emphasise on the general potential to incorporate a wider set of conditioning strategies into application designs to support their overall persuasive effect. In the way these strategies are understood to naturally shape desired behaviour, potential design space is supposed to institute to similar application areas as long as these strategies follow design considera- tions that align to their target audience in the most elegant manner and in particular aim at the provision of efficiently graspable feedback.
Some months ago a couple of colleagues at Fraunhofer ESK Munich and me duct-taped a mobile projector together with a webcam aiming at a software solution to combine the intuitive work with physical information resources, e.g. books or papers (for research or courseworks) with the benefits of online research, e.g. effective search or cross referencing. After some weeks of trial and error cowboy coding we finally came up with some kind of reading lamp used like device to annotate special physical objects with meta data. The augment reality flashlight system (physically similar to MITs 6th sense) first of all recognizes an object, then searches for important data on the internet and finally creates a seamless interface right next to the object.
Even though this is work in progress and the software is pre alpha, we'll be presenting the system and primarily its interaction technique in October at UbiComp 2009 to share some thoughts about it and to discuss ideas about several application areas.
For the last few weeks I have been involved in a research project called ELEPHANT (backronymic for: Elements for Pervasive and Handheld Assistants) helping to design a kind of mashup-IDE to develop mobile, multimodal and context sensitive assistance applications. In a nutshell the system provides tools to stick together applications out of simple modules for any type of occasion without cluttering up your system. The benefit of using Elephant furthermore is that your application is able to react on certain situations... either a user or a device presence. A generally understandable example on this broad topic is given in the video above.
Further progress on the project will be published at the Mobile World Congress in Barcelona and via the institutes' website.
Boost is a location aware mobile music player that considers the position of a listener in Brooklyn and delivers tailor-made content to create a unique user experience. Moreover this player invites to explore the city and its rich musical landscape.
The Automated Interior Designer analyses architectural models and automatically places objects within a given region, based on user defined rules. The prototype imports 3D models from Cinema 4D, furnishes them and exports the composition back into Cinema.
Since a fellow student from the University of Applied Sciences Bremen and I have presented the AID indie study as a poster at SIGGRAPH 08 in Los Angeles, from this day it is also possible to generate small level for the Crysis leveleditor Sandbox2.
If you are interested in the techniques behind this gadget feel free to go through the paper.
Terranoxa is a project where some friends and me try find a new perspective on the browser strategy game genre driven by the fascinating anytime-anywhere access of browser games.
Therefore we are developing a platform for creating - on a technical base - common browser games, like they are often played in Germany redefining common user interface design, interactions, usability and game play to create an application that reminds more of high-class computer games than contemporary browser games.
By using state-of-the-art techniques we try to close the gap between classic computer games and browser games making browser games more popular and combining the best features of both sides into a expandable composition.
Enhancing immersion of video games is a popular research topic along many disciplines. As the question of immersive environments came up in lectures some friends and me decided to build a simple jump'n'run like game concerning the interweaving of surrounding and gameplay into the design.
We came up with a little not-that-but-somehow-scary game called Fatalis and decided, although research seems to point into the direction of concentrating on senses that work more nearby (e.g. olfaction or sense of touch) rather than from those, working in distance (e.g. vision or audition).
Since we did not feel the need of ventilation after defeating a boss enemy we concentrated on increasing the visual and auditive experience by listening to and filming the ambience of the player and reacting to it, e.g. attracting enemies by noise.
Long story short. Based on the ideas of tile-based games in Flash we have created a isometric engine in AS2 that can easily be fed with xml-based descriptions of level and new textures. Please feel free to play with the code.
