tiho tadic – information designer

How to Conduct Remote Usability Testing of SaaS Applications

Posted on March 16, 2016 by tihoni

If your task is to perform usability testing of SaaS applications, having your clients use the app thousands of miles away from you may leave you feeling helpless, but with a proper methodology, this disadvantage can actually be a blessing in disguise.

Unlike traditional corporate websites, e-commerce solutions and social networking sites that are aimed at the general population, SaaS (Software-as-a-Service) web apps are often a collection of tools for collecting, entering, manipulating and using data for commercial purposes, designed for a very specific user type or types, which usually correspond with their job titles.

Designing user interfaces for SaaS, if you start by researching and creating personas for each role, can be a very satisfying process because of that specificity of your end-user and your ability to concentrate on that exact person in representing their interests. The challenge, however, emerges when you need to test your design and realize that:

unlike conventional websites, you cannot test random people, such as your friends and colleagues, because their demographics are irrelevant; it would basically be like asking my grandma to test the new design of a surgical scalpel
your pool of actual users is probably very small, far away, sometimes in a different time zone and most certainly busy; you need to acknowledge and respect this, and finally
you need to sell the benefits of your work and how it will impact the user’s day-to-day tasks, announce the intent to run the tests far in advance, and be ready to work around their schedule to make this happen.

Setting the Goals of your Testing

Do you know what you are trying to do? Can you write it down as a question?

If I tell them to add a charge, will they know where to go and where to click?

If I ask them to delete an account, will they know they need to remove those charges first?

If they didn’t remember, how will they recover and will the system provide any assistance here?

If I ask them to describe what just happened, how can I quantify their response and experience?

By asking yourself these questions, you are slowly building your testing script, and also mentally preparing yourself for the possible outcomes of those tasks, which is one of the essential traits of a good, calm and confident test facilitator.

Scripting and Preparing for the Remote Test

Once you have chosen the areas of the application you want to cover, create a testing script in the form of a check list that you will be using for all your tests. This format lets you:

Keep track of what you have covered and where you are at; timing your script and noting timestamps can be a useful tool during the test, to give you some sense of elapsed time and whether you should pick up the pace
Group tasks together, so you can ask qualitative, open ended questions at the end
Skip over a set of tasks, in case a user gets stuck or the business does not use that area; think of skipping testing of financial bits for a non-profit client that is not charging their customers, and
As a test facilitator, get a better flow with each test you perform, because this type of testing is unnatural enough even without you sweating on the other side.

What you will want is for the user to share their screen, so go ahead and set up all your crazy technology, of which there is enough out there – never have there been so many paid and free remote screen sharing, UI testing, screen recording, webcam capturing, two-way audio, and video streaming services available to bridge the physical gap between two computer users. So use it to your liking, but don’t forget two important things: the user’s consent to being recorded, and technical redundancy in session recording. If it turns out you can’t get these two things, ask a co-worker to sit in on the session and take notes independently. FYI – a second pair of eyes, in context of user testing, is extremely helpful.

I’m personally using join.me screen sharing service, that comes with a phone number that I dial from a speakerphone, and the user dials from their phone. I’m also recording the session using my fully charged cell phone, that is in the airplane mode, and has sufficient storage available.

After setting up your testing environment, I recommend you do a dry run with one of your colleagues. Just like you would when preparing for a presentation, you need to be ready to conduct a remote test. Do a full recording of this session, time it, annotate the check list, analyze the content and adjust accordingly. Once you have done this, you know what to communicate to the user.

As a last step, communicate with the user. By this time, you have exchanged a few emails in which you have outlined what is the purpose of the test (remember, you are testing the system, not the user), and why you selected them. In this communication, remember to include:

a short breakdown of what they will need to do before and during the test; let them compile a list of questions you will be answering after the test
instructions on how to prepare their computer for screen sharing
how long the test will take, and
the legal side; you need their consent for being recorded, they might need you to sign an non-disclosure agreement, since you will be looking at live – possibly sensitive – production data.

Running the Test

Breathe. Get yourself a glass of water. Ensure nobody enters the room from which you are running the test. Have your check list ready. Have a post-it with the person’s name, phone number, and organization name in front of you.

After a short introduction, successful screen sharing and recording, reiterate the time frame and purpose of the test, and try to explain why this is so important to you, in a personal manner: this person has taken some time from their busy schedule to help you do your job, so remember to appreciate and mention this. Explain the mechanics of the Thinking Aloud test, and recognize that it is not a natural setting, but that it really helps to get that “raw stream of thoughts” and that sometimes the real problems are revealed in this way, before the actual opinions are formed. Remind them that you will go through their list of questions after the test.

Now start with the first thing on your list and work your way down. While at it:

Take notes as bullet points; don’t worry, you can always go through the recording after the test,
Watch the clock and your timestamps; people will go on tangents or have questions – note these down and ask if it is okay to answer them after the test if you feel it might derail the test or break the flow, but be aware of the time,
Don’t interrupt or bias the user in any way; it is okay if they cannot complete a task,
After completing a group of tasks, before moving on, ask what they thought about what they just did; you can analyze the response later, but do not try to justify, defend or give your personal opinions at this point – a simple ‘thank you’ and assurance that they are doing well should suffice before moving on.

After completing the Thinking Aloud portion of the test, you can break the structure and allow the user to ask questions. At this point, you are basically providing technical support/troubleshooting, which in the majority of cases means that you are about to discover an issue, while at the same time observing the person use the system.

Evaluating the Results and Reflecting on the Test

After conducting 4-5 tests, a pattern should emerge, and you will have a better understanding of your system. I tend to quickly categorize my findings into categories such as: “Issue, IA”, “Issue, UI”, “Idea, UI”, “Feature Unknown”, “Feature not used”, which then serve as a foundation for my usability report. I didn’t notice anything special evaluating remote usability test results, so you may interpret the test results employing your usual methods.

Interestingly, I did discover that because you are not physically present and the person is on the phone, an explanation of what they are doing on their computer makes the conducting of a remote Thinking Aloud test feel more natural.

Also the fact that the users are sitting in their work space, uninterrupted by your presence, using their own computer in the way they usually would, makes this exercise a good field study substitute. The ability to follow their mouse pointer and watch them use the system, make mistakes, miss elements, open multiple tabs, and use other tools on their computers, helps reveal many UX issues and missing features that they either did not verbalize or simply managed to find a way to work around it.

This test can be performed on the production environment, as well as in beta-environments, where a subset of users would be seeing the new features for the first time, and we know that the cost of fixing issues found at this stage is significantly lower than fixing them post-release.

Remote Usability Testing combined with the right participants can be a great tool that can be employed quickly, often and without great (or any) cost, at many stages of software development. It is Agile-compatible, and it can help teams discover issues and build better systems.

user interface design

bmw digital dashboard

Posted on March 21, 2013 by tihoni

UPDATE March 2013: It took almost 10 years, but it’s finally here! Keep reading below.

Bayerische Motoren Werke AG is one of many partner companies of FH Joanneum University, my alma mater, and as such, they offer a possibility for students to apply for an intern position or a full time job, to write their thesis or to present their ideas and solutions.

In 2004 we were given such a task – to design a digital dashboard for future BMW series. The designs were then sent to Munich and the winning team was invited to the BMW Headquarters to present their work.

After initial research on the product and target groups, my two colleagues and I started working on drawings and sketches of what was to become an all digital UI for future cars. We developed imaginary personas and throughout the process, we made design decisions to fit their needs. Having an all digital display, driver(s) could customize them whichever way they see fit; they could choose between presets or even download new layouts from the internet.

At that time, Aaron Marcus was our guest lecturer and I must say that I was still under the spell of his visionary ideas and information representation and visualization. He inspired me to drop all standardized data visualization, numbers and gauges and to come up with something completely different, better and, in this case, safer.

Since I’m not at liberty of disclosing the final designs, I’ll include two designs from the early stages of the project. The first concept, the “Classic”, was a high-contrast design that was based on the premise that everything important should be dynamically highlighted or enlarged.

The second concept, the “Dynamic”, was more about RPMs than actual speed.

The other concepts featured elements that would change in shape, size or color. There were gauges that would adjust themselves depending on the type of road the car was on. Also, there were GPS-linked gauges that would communicate the recommended speed.

All submitted concepts were designed so they can (also) transmit information using the peripheral vision, so the driver would never have to take his/her eyes off the road. This safety feature, I believe, was the “extra mile” that got my team the chance to visit BMW HQ.

UPDATE Mar-2013: BMW is shipping the LCD gauges, and there are two modes of operation:

“Comfort Mode” – image by BMW

I like the implementation of the concept where the current speed/RPM number gets enlarged and highlighted, while the remainder of the scale is dimmed.

“Sport Mode” – image by BMW

There are no subdivisions on the radial scale in Sport Mode on the speedometer, only RPMs are clearly marked for functionality. The size of the circular segment on the speed gauge is representative of the top speed percentage, while the subdivisions on the scale equate to 20km/h.

I can’t wait to see this in real life; although someone else will do the driving while I’m assessing the UI 🙂

advertising/corporate identity/print/product design

slice of the adriatic

Posted on June 7, 2011 by tihoni

Bearing in mind that Croatia is a country with beautiful nature, high mountains and almost 6000 km of Adriatic coast (mainland and over 1200 islands), it becomes obvious that tourism plays a significant role. Wanting to offer something different for the visiting tourists, the marketing agency I worked for entrusted me with the creation of a suitable brand and product line of unique souvenirs that would be distributed through postal offices on the coast.

The brand was eventually named “Your slice of the Adriatic” and the visual representation basically contained multilingual wording, the sun and the sea. Croatia’s geographical outlines, that are well known among the visitors, had been extended with the outlines of Croatian sea borders, creating a new, lesser known, shape of this tourist destination. The usage of the word “slice” was later intensified on the products in line.

Since the “look and feel” of the products had to be unified, an icon world was created to provide the shoppers with a clue as to what was inside a somewhat colorful packaging, in case of doubt.

For better in-store promotion purposes, a display stand was designed as well. The larger ones contained car sun-shades, t-shirts, gift boxes, coffee mugs, wall calendars, language guide books and beach bags with UV radiation indicators.

The “runner” product was a combo gift box with a t-shirt, pen and key chain, as displayed on the pictures underneath. This picture also serves as an excellent example for the literal use of the brand name; when holding the box in your hands you experience an optical illusion of holding a ‘no-wall’ aquarium. The water refraction, the shadow of the “floating” brand logo and the precisely positioned goldfish enhance this effect from every angle.

The empty interior of the gift box featured a photo of the Adriatic coast and a shingle beach. We thought that the box could be used afterwards as a souvenir, keepsake or jewelry box.

The resin key chain contained the image of a goldfish, and the pen was attached to a virtual notepad, defining the ink color as “Adriatic Blue” in scribbled letters.

The coffee (or tea) mugs were personalized for over 60 cities and towns where the souvenirs were sold, always featuring the seaside scenery and a road sign pointing right to take the next exit into the preferred destination.

The packaging included another optical illusion, as if holding a cube of water that contains the submerged mug.

There were different T-shirt designs available. Some of them are shown beneath.

The shirts were rolled and packaged into yet another box with an optical illusion.

Well, the “submerging” spree led us to the car sunshades for the windshield, which again led to some very disturbing and inappropriate imagery 🙂 Since no one wishes to see the inside of their cars submerged in water with fish swimming around, we discarded that draft and went for “convertible on a sunny day” and after minor fixes and tweaks, that effect was achieved.

The last product to design was a wall calendar featuring scenery from the Adriatic coast.
However, the clock was ticking and we still had no winning photos, and the project was to be done in two weeks. Luckily we had some help from a very talented amateur photographer whose work is now bringing smiles and nostalgic feelings to thousands of homes across the world.

Being a seasonal product, the wall calendars usually don’t make an interesting product to buy mid-summer, because it’s either six months too late or too soon. This specific product closed that gap; you’re looking at an 18 months calender (July 2011 – December 2012) that you can hang at home as soon as you return from your summer vacation.

corporate identity/web design

eos yachts

Posted on February 6, 2011 by tihoni

This agency job was to create a corporate design for a Croatian boat building company. The client wanted the design to reflect “traditional family values of a small entrepreneur”.

The logo is visually positioned somewhere between an emblem and a coat of arms. Its aesthetics resemble vintage, hand-drawn, monochromatic visuals, as if they were engraved into a wooden surface or drawn using a calligraphic pen. It incorporates a vintage ribbon with the brand name and a model name underneath, symbolic sea waves and a figurehead found on old sail ships.

The company’s stationery and business cards both have a watermark of an inverted logotype and three dividing stripes resembling navy rank stripes.

The requirements for the website were to keep it informative and product-centered. Next to the product models, there is a large gallery section that is updated biweekly.

The product pages are catalog styled, showing different configuration possibilities, add-ons and up-to-date prices.

One of the interesting parts of the website is the “Boat Builder”, where customers can customize their dream boat down to the smallest detail. They can also, in real-time, get the price information on the right hand side as they update their config. Once they are satisfied, they can input their name and e-mail address and automatically send the configuration to the dealer for a quote.

The website was implemented using WordPress with a custom built template, extended with a custom PHP mailing form that contained a jQuery driven calculation tool and custom JS-DOM functions.

do-it-yourself

diy: furniture

Posted on October 12, 2010 by tihoni

We moved into our new apartment and it was completely unfurnished. After a couple of days of living out of our suitcases and browsing shops for closets and shelves to fit our clothes, DVDs and other stuff, we decided to go on and build them ourselves.

The biggest challenge was coming to terms with the crooked walls; the discrepancy in depth on opposite sides of our (future) closet was almost 20%.

Anyhow, we measured, weighted, stretched and compressed our clothes to get an idea of how much closet space we actually need, but in the end we figured that there isn’t such thing as “too much closet space”, so it quickly became a wall-to-wall, floor-to-ceiling construction.

Clothes and shoes on the left-hand side and two clothes hanger bars on the right-hand side.

For the unused space around the fridge, we built shelves that soon became full of small kitchen appliances, pots and pans.

For my wife’s extensive collection of DVDs, there was 10 meters of shelf space, plus almost 3 meters of CD-space – which she quickly made disappear. I placed exactly one DVD there and the thing was packed. Oh, by the way, the coloring on the picture is all wrong. We went for white with red outlines 🙂

advertising

regina camomilla

Posted on October 7, 2010 by tihoni

The Italian group, Sofidel, is one of the leading European manufacturers of paper for hygienic and domestic use. Its flagship brand, “Regina”, is present in all leading markets, making Sofidel the second largest manufacturer of tissue paper in Europe.

The agency I worked for was in charge of advertising an upcoming contest where customers could win a cash prize in the amount that would cover their utility bills for a year.

The communication medium were billboards, POS and ISP. The campaign was divided into teaser and revealing posters. The main character, Milla the Ant, was unknown to the general public and this was a great way to introduce her, since she is featured on the product packaging. But even if someone made a connection to the company, it was almost impossible to guess the solution to the question posed on the billboard: “Are your utility bills too high?”

We pitched the idea with following photo montages and the third one hit the spot.

After two weeks, during the night, the billboards were replaced with posters that offer a solution to the teaser using a very familiar visual element; namely, in Croatia bills are paid using a “common pay form”. This form was “filled out” with the brand name and the amount to be paid “for your utility bills on a consumer card”.

The in-store promotion started on the same day as the new billboards, promotional material was designed accordingly: promotional stands, product flyers, product stickers, wobblers, shelf dividers and shopping cart ads.

For other products’ ISP purposes, we developed promotional stands.

The customer was very pleased with our work. An extra point was added for the visual presentation and 3D visualizations of the products during the design adjustment phase.

corporate identity/print/product design/web design

organizucci – purse organizer

Posted on September 7, 2010 by tihoni

You have probably seen those purse-organizing inserts that women use to fill up with stuff and transfer them from one bag/purse to another with no hassle. Well, they weren’t so popular in Croatia at the time and one local manufacturer decided to put them on the market.

First thing was the brand name and we were allowed to go crazy in this area, really. So after brainstorming for a bit in search of a perfect “useful and trendy” combination, there it was – someone yelled “it’s not Gucci, it is Organizucci” and it felt perfect.
Organizucci was born.

But it’s the product packaging that distinguishes this product from anything else out there.
Being a product that fits into a purse, the packaging was designed to resemble a purse. Made out of a heavy paper and laminated from outside, the purse featured a Vuitton-ish pattern on one side and a textile pattern on the other, printed, side. There was also what appeared to be cloth stitched on the side, describing the “messy purse” problem and offering a solution. The bottom side featured the organizer description and detailed instructions on how to use the product.

The complete wording was kept in consistency with the brand, like the order button on the website reading “Narucci” instead of “Naruchi” (Croatian for “order”), both words luckily pronounced the same.

It’s basically a quickly customized WordPress template with a custom PHP order form and a “thank you” page.

This teaser ad was printed in 2011 Personal Planner for Women and was adjusted to fit the Pop Art look and feel of the publication.

print/product design

interliber 2010 fair stand

Posted on August 7, 2010 by tihoni

As in the year before, the agency rented a booth at “Interliber” – Croatia’s largest book fair – but this time it was a corner position and five new products for the following year were presented.

This year, in addition to 10,000 pocket calendars and bookmarks, we had around 4,000 wall posters with different motifs printed as promotional material, so these were displayed on the stand walls to attract attention. Two “ship bows” this year and more space in front for the gimmicks.

Again, Google SketchUp did the job well. I was able to plan everything down to a millimeter, render previews for presentation purposes and blueprints with dimensions both for the printers and stand assembly guys.

Another addition this year were the totem displays that you can fold up to 2m in height and print on either side, so we had two additional “colleagues” that were displayed in the aisles as crowd stoppers.

catholic personal planner

Posted on July 7, 2010 by tihoni

According to the Vatican Information Service, “Croatia, whose capital is Zagreb, has a population of 4,429,000, of whom 3,981,000 (89.88%) are Catholic”, so the creative agency I worked for took this information as an invitation to offer something appropriate for this target group. This was the beginning of an “Illustrated Catholic Personal Planner”.

This 140 page spiral bound publication featured the work of Robert Fertitta, photographer and curator of The Gallery of Stained Glass Art. There was also an inspirational thought, monthly calendars and (saint) name days on every calendar page.

The planner came with a wooden rosary bracelet.

corporate identity/print/web design

kids personal organizer 2011

Posted on May 7, 2010 by tihoni

In its third year (check out the 2008/2009 and the 2009/2010 edition), the school calendar came out with a new design and a new addition in the content area.

The look and feel of this year’s publication was a kind of smash/destroy mixture where everything was hand-drawn and scanned, vectorized and colored. The inspiration came from school notebooks where kids usually draw and scribble on the corners and, basically, wherever empty space resides.

Content-wise, the publication came in three versions, represented by three colors on the covers. Every version contained a different study subject (math, physics and biology/chemistry) on the 32 removable inner pages that contained the “compressed knowledge” section. This meant that we employed several school teachers to compose the study guides (with all the formulas where needed) for the fifth, sixth, seventh and eight grade.

Since the publication got even more attention thanks to the Facebook fan page, there were a lot of inquiries from abroad, so the order form needed to be updated with countries other than Croatia, as well as the payment methods.

In order to enable the payment via credit card option, the ordering system needed to be updated to the “Verified by Visa” and “MasterCard Secure Code” standards, which meant that I needed to up my game as well, since I knew nothing about generating and using SSL-certificates, but I got it up and running.

web design

men-on-the-menu male modeling agency

Posted on May 7, 2010 by tihoni

This Zagreb-based startup agency managed to find a niche market in the fashion world and decided to offer services in this area. It may sound trivial, but it seemed at the time that you couldn’t find as many suitable male models if you needed them. Well, here you had them on the menu 🙂

The model booking business is usually done by phone, so I was told. Therefore, requirements for the website were clear – a corporate branded online portfolio of male models with their photos and fashion sizes, contact information for inquiries and for new models to apply.

I decided to keep it short and simple. It was to be a one page website with an overlay gallery, a restaurant style menu with the models divided into categories, for instance fresh faces as “Entrees”, that become “Main Courses” after couple of months, and “Desserts”, featuring models that are outside the typical age range or even some Croatian celebrities.

The extra feature I added was the “Favorites Post-It”; underneath every picture in the model detail view there is a “check/uncheck” link that places or removes that model from the list on the right-hand side. When using the list while on the phone with the agency, the interested party can click the name for a model’s headshot or remove the name by clicking on the red “X”, should the model not be available or lacking some of the prerequisites.

The back-end was custom made to edit the models, categories, contact information and the texts.

When managing the models, in addition to the name, category, dimensions and fashion sizes, you can add the headshot and unlimited number of photos via Ajax, so the administration is pretty swift.

corporate identity/print/web design

personal planner for women 2011

Posted on May 7, 2010 by tihoni

Following up on the success of its predecessor, the 2010 edition, this year’s “Personal Planner for Women” underwent some changes in style. In 2011 we went for the Pop Art look, working with large raster, brash and colorful.

Using the survey data gathered from customers, certain adjustments were made in terms of content. One of the changes was visible on the cover; in 2010 we introduced the feminine symbol in the year number by reshaping the zero – the same thing was done this year, but the brand name itself was not present on the cover.

Since the survey pointed out that almost every customer preferred having a rubber pen holder, and less than one third did not think that a ballpoint pen was a necessity, we went for something else instead of the pen. On the inside of the front cover, there was a picture of a vanity table with a flap on the bottom, that, when pulled, exposed a small pocket mirror for discrete make up adjustments 🙂

The product was sold in drugstores, bookstores and online.

The website went through a face-lift to accompany the new style.

If you want, you can flip through it!

advertising/print

autism centre zagreb

Posted on March 7, 2010 by tihoni

The creative agency I worked for supported the Zagreb Autism Centre in every possible way, often providing them with corporate materials and advertisements.

Over the years I designed numerous flyers, brochures, folders, event materials, posters, banners, buttons, ribbons, itineraries and gimmicks. Some of them are displayed here.

Awareness campaign ribbons

Business cards

Folders

Certificates of Recognition and a Special Lifetime Award

Awareness campaign buttons

corporate identity/print/web design

etela polyclinic

Posted on December 7, 2009 by tihoni

Using the existing colors and the logo (Aesculap serpentine wrapped around a crutch) I didn’t think that these visual elements needed any large modification, but a slight aesthetic alteration. The logo was redrawn and slightly adjusted, the gradients and excess colors were removed and the blue color was defined, again choosing an uniform instead of a gradient fill.

The changes were made on all printed materials.

Although this polyclinic’s website hadn’t been updated in a while, both in terms of content and internet technology, the visitor counter kept increasing, showing a significant number of interested parties looking for information regarding orthopedic procedures, physical therapy and rehabilitation.

Using WordPress driven custom-made templates, I replaced the old, static website. The content could be updated via WYSIWYG editors with no knowledge of HTML, which was the prerequisite of the old system. The old data was migrated with no problems and the administrative staff could fill the content whenever they wanted to.

There’s even a “Doc’s corner”, where visitors can follow the head surgeon on Twitter.

corporate identity/web design

ad vitam

Posted on October 6, 2009 by tihoni

Corporate design for a Croatian advertising agency. The client wanted a “rich, but simple logo with a feminine touch”.

The logo itself was based on the company’s initials, turned into a chalice form of divine femininity. The color used is deep violet, one of the most expensive pigment colors used in ancient times, next to ultramarine. The font used was a simple variation of Helvetica.

The agency also needed a CMS web solution that was easy to use and expand. The site was implemented in WordPress with a custom layout and basic plugins. The news section is maintained via Twitter.

print/product design

interliber 2009 fair stand

Posted on August 7, 2009 by tihoni

In order to present our new products for the following year, the agency I worked for needed a solution for the fair stand that would stand out and attract the visitors of “Interliber” – Croatia’s largest book fair.

With tremendous help from the guys printing and manufacturing all the products published by the agency AND this marvelous graphic tool called Google SketchUp, I managed to transform this small, lifeless cubicle with two tables into a place of product information, fun & free stuff :))

There were also wall boards, POS display stands, cash register skirting and some 30 different pocket calenders and bookmarks to be designed. One extra thing was the “ship bow” protruding from the stand area and drawing more attention of the people entering the aisle where the stand stood.

The guys and girls on the stand were wearing different t-shirts with the product brands printed on the front and the back.

corporate identity/print/web design

kids personal organizer 2010

Posted on June 7, 2009 by tihoni

Continuing on the success of the last year’s publication, the “school calendar” for the year 2009/2010 underwent some changes that were made based on the comments and reviews of the customers. The format was changed to DIN A5, no spiral binding and the paper weight was reduced. All this turned the product into a standard-sized notebook that wasn’t heavy in the school bag.

Since we decided that this publication had to have additional value in term of education, new content was introduced. Researched and composed by experts in the field, the “school calendar” featured chapters, hints and exercises in four topics: traffic, ecology, nutrition and children’s rights.

The new concept attracted sponsors that advertised their products and explained the processes and advantages of recycling, personal hygiene, vitamins etc.

The website was upgraded to a community blog with games, quizzes, contests and freebies. We also added a “do-it-yourself” category with Christmas & Valentine’s Day cards, as well as birthday invitations and personalized calendars, that drove page visits through the roof.

Just as in the year before, kids and parents had an opportunity to flip through the publication prior to purchasing.

Give it a go – flip through it!

corporate identity/print/web design

personal planner for women 2010

Posted on May 7, 2009 by tihoni

This product was made “by a woman for all women”, I would say. The owner of the agency I worked for had all her ideas for a “small, practical agenda planner” written down, waiting for the right moment for it to see the light of day. After the first edition in 2009, made by another designer, this project landed on my desk.

The outcome was a fully colored, 192 page planner in two different colored faux leather hard covers, two bookmarks, inner cover pocket and a rubber pen holder with a branded ballpoint pen.

The website was implemented in WordPress with a “Notepad Chaos 2” theme.

corporate identity/print/product design/web design

cool pokloni – personalized gifts

Posted on May 7, 2009 by tihoni

The agency I worked for needed a large quantity of personalized mugs for a high-profile client, so the sublimation equipment was bought over night and help was hired to produce the coffee mugs. After the delivery was made and the project was completed, there were these special printers with special papers and heaps of equipment left, so my boss was like, hm!

Shortly afterwards I started working on a concept of a web shop where you could personalize the designs and order them. We came up with the brand name and soon enough, the logo was there. “Cool gifts”. Self-explanatory.

After the initial sketches, I started working on the look and feel of the page and I aimed high. Every design was applied on a 3D model and rendered as a still, animation and detailed view. Animation was then converted to AniGIF (old school) which appears in JS Carousel (new school :)) when a mouse cursor hovers over. So you can take a good look at the gift before personalizing and purchase.

The homepage features new additions that can be accessed through custom-made banners. On the right hand side there are partner banners and the shopping cart.

After completing the website, it was time for the back-end. This was also made from scratch, since there were no open source products that would fit the specific requirements.
The admins can manage products, categories, news, users, orders and archive.

In addition to the regular stuff you find here, there are maybe two or three features worth mentioning; complete image handling is AJAX based, the user is notified in every step of gift creation (order received, payment arrived, gift produced, package shipped), there are loyalty and discount codes (both in amount and percentage).

On the processing side, every design template is created by importing the graphics in Adobe Acrobat, adding the text fields to fit perfectly and embedding the fonts. Later in production at the push of a button JavaScript populates the text fields with user data. One quick examination later, the personalized design can be printed, cutting marks included. There is a similar function populating the stickers for the package, receipt for the customer and all the forms required at the postal office. All this reduces production time to a minimum.

Here are some of the designs.

After a couple of weeks, orders started coming in and it was not only mugs that customers wanted to personalize. Suddenly, we needed a larger warehouse 🙂

art/do-it-yourself

vortex – hibernation

Posted on April 3, 2009 by tihoni

My dear friend, composer, artist and pianist, Belma, was just finishing her latest conceptual art project called “Vortex” when she came to see me regarding the stage design for her Sci-Fi masterpiece called “Hibernation” (link to the artist page). “Hibernation” was one of the product modules that was challenging audience perception of time and reality, guiding them visually through different states of awareness.

The synopsis placed a spaceship commander in the year 2053 on a journey across the Universe, carrying the cargo of hibernating humans in cryogenic chambers. My task was to create the mockups of the chambers and the commander’s control console.

Belma and I agreed on the design and I decided to create a wooden template.

With the help of a friend with a background in boat building, we decided to create the chambers out of fiberglass resin, coating the mold with an appropriate separator each time.

Once applied and rolled over with polyester resin, the fiberglass hardens and can be (sometimes not so easily) separated from the wooden mold. The result is a rigid, stackable, plastic form that can be cut, sanded and painted.

We put a 1mm thick PVC foil in place of a looking glass and fastened it in with 20 large screws, giving it a “submarinish” look.

The control panel was made out of wood and equipped with lights that would provide background lighting for the matte control board.

Blue lights and smoke machines were inserted into each chamber. When the light was on, the audience could see the upper body of a mannequin placed inside.

Using a switch on a control panel, Belma could power the lighting tubes connecting the chambers to the central unit.

The artist performed in Bosnia, Croatia, Serbia, Slovenia and Austria.

corporate identity/print/web design

kids personal organizer 2009

Posted on August 7, 2008 by tihoni

Sometime in mid-summer 2008, I needed a break from coding and developing applications, so I decided to take a job in designing a printed publication for school kids, that would help them organize their school assignments and extracurricular activities. It was called a “School Calendar” and little did I know, it marked the birth of a new brand.

These kind of organizers were widely spread across Europe at the time, but the Croatian market never even got a glimpse of it. Placing a new product on the market required introduction, a lot of promotion and a wise choice of distribution channels – it turned out to be an interesting and challenging project. Designing a product itself proved to be an easy task compared to everything else, since there were no similar products on the market at the time that could help us, at the very least to form a price range.

So in the year 2008 we went for POS displays and distributors, posters for schools and online advertisement. We also included the possibility to flip through the pages online, as well as in the stores, by applying a sticker on the covers inviting the kids and parents to flip through the publication, since this is a large cultural difference between Croatia and Western countries, in terms of consumer behavior.

The marketing company that published this school calendar already had the mascots registered in one of its previous projects, which we decided to use as “content guides” throughout the publication. They were called “Smartici” (Croatian for “Smartys”) and they combined learning with fun.

The large display stands contained six POS dispenser boxes with twenty calendars in each box. The stores always had one of the dispensers placed next to the register.

The website featured a detailed description of the publication content, a possibility to view the publication online and the order form. It was a simple PHP mailing-form with a “thank you” page.

corporate identity/print/web design

tadic design

Posted on May 19, 2008 by tihoni

When the time came to start my own company, I knew that I wanted a logo to depict my person; reaching from where I came from to where I was going.

The logo consists of a man with his wings spread, symbolizing the freedom to do new, exciting things. The base contains two letters of the oldest known Slavic alphabet, the Glagolitsa, enclosed into a “pleter” wattle, an important pattern of medieval Croatian culture, both representing my cultural roots.

And since a cliché is a cliché for a reason, this young designer was all about Helvetica.
The font version used in corporate materials is called Coolvetica.

do-it-yourself/print

perpetual calendar for house chores

Posted on December 1, 2007 by tihoni

Sharing a space with three people calls for good organization, unless you want to end up on a TV show like “Hoarders”. For a couple of years there was a large wall calendar with four names revolving each week, showing when it is your turn to clean the house – yes, the little yellow one on the picture 🙂 However, sometimes you conveniently “oversee” your turn or you manage to clean the whole house in 10 minutes (!?), leaving a mess for the next person to take care of it. I had a different idea.

By dividing the house chores into four areas: kitchen (K), bathroom (B), stairs and hallways (S) and assigning a position of superintendent (H) as a control instrument and general supplier for the week, I thought that if everyone cleans every week for 15 minutes, we could achieve more than before.
The roles were color-coded and the responsibilities were described in the form of a checklist.

And then the designer awoke 🙂
Instead of scribbling on a wall calendar every year, I decided to create a perpetual cleaning plan.

Every Sunday night the Superintendent (H) would turn the dial to the upcoming calendar week (KW). By doing this, everyone’s role would change, so during that week you would simply need to look for the colored letter next to your face/name and get to work 🙂

The designing process went surprisingly fast; it took me less than two hours to design, print, laminate, perforate and join the two parts, but nevertheless – it worked like a charm.

And yes, the house was never tidier 🙂

interaction design/user interface design

fh lite – digital info and guidance system

Posted on August 1, 2007 by tihoni

For the students, faculty, staff and visitors of the FH Joanneum University of Applied Sciences in Graz, Austria’s “green heart” county capital, it had became a challenge on how to get around the newly built campus. With close to 4,000 students and 300 employees, the university felt a need for an upgrade of the “navigation system” to direct the crowd to their destination.

With a budget in place and hardware installed, the only thing left to complete the upgrade was the information system itself. That project became my baby 🙂 There are touch-screen terminals linked with hanging plasma displays on all main entrances to campus buildings on remote locations, spread among three cities. The displays feature local information such as campus news & events, canteen menus, traffic, public transport schedules, city and world news bulletins etc., for each of the three cities.

Image and promotional videos and student project videos are streamed daily to display the latest work of undergraduate and graduate programs available. During the annual “Open House” event, these displays show current and upcoming events with timetables and locations.

These info points soon became interesting for commercial purposes as well, so the Marketing Department decided to turn them into advertising spaces, both on a daily basis and during special events taking place on campus.

The software to design and schedule the content on the screens was developed internally by the employees of the Information Design Transfer Center. After creating a display template and placing dynamic content containers, you can schedule that display to be active on a daily/weekly basis or to be shown only once at a specific time.

All of the touchscreen terminals are equipped with barcode readers, extendable with RFID readers. The idea behind this was to print barcodes on event invitations or even lecture notes, in order to get directions. The uses for RFID are numerous, since all students and employees are issued one within their ID cards, but the first one to be implemented would be for students to get their timetables displayed without punching in their ID via the touch-screen.

So, every terminal has access to following features:

Classroom, Lecture Hall and Office Locator
(this was to be extended with “infopoint-to-infopoint navigation”)
Timetables for All Students
Information About Faculty Members and Employees
Event Calendar

An example of an Employee Detail screen with the Locator button.

When the button is pressed, the following screen emerges, highlighting the office location of the employee selected and showing your location on the map. The buttons on the right hand side allow you to navigate the building levels, displaying the floor plans for each level.

Next to managing the project, my tasks included designing the user interface, screen design and providing the system with XML data. The system works surprisingly fast with no lag time between clicks and was accepted by users from the beginning. There is a constant feel of being in control of the system – you can always go one step back or back to the home screen.

From the interviews with users I received a general positive response.
One of them actually said: “I don’t think I can break it, so I like to snoop around it”, which made my day 🙂

On the technical side, I’m particulary proud that I managed to gather existing data and channel it into this system, so it needs practically no maintenance. To be more precise on the sources:

Event Calendar picks up all current and upcoming events from the CMS used to display info on the university website. These are inputted online daily by dozens of university web administrators. They are cached with every change and fetched in XML.
Locations are stored in a SAP database and managed by office secretaries for purposes of booking lectures and events. They are exported into CSV files, which I managed to parse and convert to XML.
Timetables can be calculated from the above files, so they get parsed and pushed in XML too.
Employee Data is kept in Oracle databases which can be queried. The request can be converted to XML. However, the telephone number is stored in MS Active Directory. After you get that info, you can query the Cisco system for information on the room where that telephone device is located and voilá – you are set to go. Append that XML-DOM with location and phone number and send it to the touch screen 🙂

This is one of the projects I had the most fun with, and one that has the most potential for expansion.

advertising/web design

head digital

Posted on October 7, 2006 by tihoni

This consumer electronic manufacturer ordered a web design for their German-speaking customers, where they could find information on the newest digital receivers and download the manuals and updates.

A highlight of this online catalog was the possibility to view the product from all sides. Try rotating the device underneath while holding down the mouse button (Flash required).
[SWF]/wp-content/uploads/2006/10/42.swf,680,190[/SWF]

The website and the back-end was developed in PHP/MySQL.
Administrators could manage the products, downloads, categories, news and users.

web design

fh joanneum university website

Posted on September 10, 2006 by tihoni

A couple of months before I graduated, I was offered a full-time job at FH Joanneum University of Applied Sciences, my alma mater. It was a new position at the University’s PR/Marketing Department, although there was an IT Department that would usually employ someone with my background. The idea was to use internet as the main channel of communication and, therefore, to have “the internet guy” at hand in order to avoid bureaucratic backlogging. As it turned out, someone with my skill set could contribute much more than web design.

The old system was developed in 2001 using ASP/SQL and it relied on HTML knowledge and FTP content upload. In the following years, the concept of Content Management grew to the point where it was considered a standard system feature. After testing a series of open source and commercial software, the University decided to purchase the ActiveWeb solution developed by a German company.

This was a whole new world to me, since I never had an opportunity to deal with XML and XSL transformations upon which the system relied. All query responses had to be in XML-DOM for the system to process, so it was fun to learn this new technology that was a drag at first for someone with straight, procedural thinking, but once I got behind XPath axes and node relationships I started digging this system to the point of worship 🙂

However, the coding had to come last. In the time before the actual redesign, I spent a lot of time with people who would be using this system, especially for the parts that were reserved for the intranet. Having future students, current students, faculty, employees and partner companies as target groups, I managed to obtain sufficient information to define their needs and expectations.

The existing data had to be “cleansed” of any HTML tags and content, where some parts needed to be completely rewritten, since they weren’t optimized for online reading. New information was added and the next step was the “card sorting method” to categorize the data, label it and display in such a manner that it was easy to find and understand.

The layout of the bilingual website was designed in conformity with the 16-column 960px grid system. Since the whole website was DOM-based, the JS driven menu was generated and cached every time there was a change in the system on objects that would be displayed in the drop-down menu.

There were around 40 newly assigned web content editors that I trained and provided support in using the system. They were able to conduct their tasks in the system’s back-end or “live”, while surfing the pages in the “context edit” mode, where they clicked on (now visible) buttons.

Once indexed, Google reported around 45,000 indexed web pages. This number rose to 333,000 in October 2011.

art/do-it-yourself

farewell present

Posted on September 8, 2006 by tihoni

In 2006, Markus, our dear Business Manager and Director at the University, got offered a dream job in the private sector and decided to take it. We were all happy for him, but we knew that we would miss him, because he’s a really cool person that we were used to seeing every day. Next to the official parting presents, a couple of us decided to give him something more personal to remember us by.

Markus was crazy for pizza 🙂 His two assistants were therefore in charge of ordering his favorite kind of this Italian treat at least three times a week. Since he was moving to Vienna, they decided to dig out decent pizza places that would deliver to his new office. This information needed to be presented in a creative way and this was my cup of tea.

One quick shopping trip to the toy store later, I was ready to start my little project.
Using the original pizza-box templates I found online, I designed three miniature pizza boxes and positioned the restaurant’s name, address and phone number on the back.

After constructing a small box to fit the boxes, I attached it to a small classic “Vespa” model to resemble a delivery scooter.

The box was then fitted in black leather and hand-sewn.

Markus liked the gift and was surprised when he first saw it.
Last I heard, he keeps it on his desk in Vienna 🙂

corporate identity/print

force2

Posted on August 1, 2006 by tihoni

A Swiss-based synergy drink manufacturer was entering the market and needed a complete corporate design based on their existing logo draft. It took me a few weeks to develop the brand and compose a corporate design manual.

The corporate materials were printed single sided on heavy paper with a 30% gray background. The business cards featured a monochromatic logo on the back.

interaction design/user interface design

cell phone for seniors

Posted on March 3, 2006 by tihoni

As communication technology progressed and cell phone manufacturers, along with telecommunication companies, entered the race for the “best mobile device and service out there” one large group of Earth’s citizens got left behind – the seniors. Soon it became evident that the progress was simply too much to handle and the pace was “not like in old days”. Since then we all spent hours with our parents and grandparents teaching them things we took for granted; key combination to unlock the keyboard, menus and navigation, address book handling etc.

One European company saw this as an opportunity; a market ‘hole’. So they hired one industrial designer to take care of the device and one user interface designer to pave the way for the software and firmware developers.

After initial interviews and field studies with our target group, we started working. The industrial designer produced few mock-up prototypes for the phone and I designed a way to use it. It was a fascinating process just talking with the elderly and watching them use the cell phone and keypad in ways I never would have guessed.

I have based the use of the phone solely on using two buttons: green for “Yes” and red for “No”, for the entire user interface is based on asking simple yes/no questions. To someone who’s never played “20 Questions” this may sound restrictive, but nevertheless this UI enables the user to:

Make a call
Answer a call
Read new and old SMS texts
Program speed-dial (via remote assistance) and
Make an emergency call via one button

Use case diagram flows below show some of these functions.

Next, I created an interactive prototype simulator as a test platform.
A real-size phone displayed on a touchscreen helps clear any basic errors in user interface before implementing a prototype for the phone, where the haptic component comes into play as well.

The design was published in volume 5/2006 of ‘i-com’, a journal of interactive and collaborative media.

do-it-yourself

diy: bed

Posted on March 1, 2006 by tihoni

There is a saying: “If you want it done right, do it yourself”. I don’t think this can be universally applied, but in this case, it just had to be. Namely, I prefer a hard surface to sleep on; all my mattresses were either ultra-hard or super-thin. When I moved to Austria, I needed a new bed and the only one that fit was IKEA’s Grankulla futon bed.

The thing was as simple as it gets – wood, a couple of screws and an inch-thick mattress. However, you’re sleeping only inches from floor, which doesn’t seem healthy at all. So it got me thinking…

…if I could only elevate this construction some 30cm or so…

…but it must not be expensive…

…maybe a headboard and a couple of night tables…

…yep, that’s the one.

After a couple of hours of detailed planning in Google SketchUp, I went to the hardware store and got the boards, one 2×4, a couple of big screws and some paint. Success!

The photos underneath were taken more than five years later. In the meantime I bought an excellent mattress and converted the “headboard/night stand combo” into a large jardinière, for my wife to plant cherry tomatoes and green peppers.

corporate identity/print/web design

digital dream

Posted on January 10, 2006 by tihoni

This was done mainly as a student job and spanned from 2002 to 2006. A local electronic shop owner hired me to create a corporate design, corporate materials, shop signage, promotional materials, a website and a web-shop.

There were two different websites. The first one was flash based, since this was a trend at the time, but I was more than happy to switch to ASP as soon as it was possible.

Once a year I designed a “Christmas Special” poster that was printed in different sizes – A4 to B1 (the “city-light” ad format). These are the posters from 2003 and 2007.

art

quadratischlick

Posted on December 29, 2005 by tihoni

This graphic is my tribute to Jörg Schlick, an Austrian concept artist, author, painter, curator and musician. He was my teacher for two years and taught me what art truly is. He died on December 29th 2005, leaving a big hole in our hearts.

Jörg Schlick’s work was controversial, to say the least. His lectures were different, colorful and refreshing. Sometimes he would speak for hours about his journeys, experiences and people he met, worked or talked with and it was always related to the topic in the curriculum, believe it or not. He liked discussing art, music, politics, technology etc. with his students, but he was also a true believer in learning-by-doing, so whatever topic, artist or art movement we touched, he wanted us in front of a linen canvas, paint and brushes in hands, ready to show our understanding by expressing ourselves visually.

He was the founder of “Lord Jim Lodge”, an artist association that published a magazine named “Sun Breasts Hammer”, which was the association’s logo. The idea was to make this logo “more famous than the logo of Coca Cola”.

One of his famous work collections were “vinyl record graphics”, ink on paper, of which he made dozens. They were exhibited at the turn of the century; some he sold, but most of them he gave away as a present.

I can vividly remember one of his lectures when he was discussing the aesthetics of printed formats; he stated that one of the most pleasing ones, in his opinion, was the square format, but he also characterized it as “the most challenging one to design”.

These were the thoughts that went through my mind when I heard about his departure and I wanted to keep them forever, so I expressed myself the way he taught me: visually, emotionally and “quadratisch”.

corporate identity/print/web design

textbox

Posted on December 20, 2005 by tihoni

In the winter of 2005, I was given an opportunity to create a corporate design for a start-up PR agency in Graz; they gave me a name – “textbox” – and I took it up from there.

Since I’m a big fan of everything simple, I really liked the concept of something saying a lot with as few words as possible. First I decided to pitch a logo, with these three in the final round.

The customer really liked the computer key concept, so it was used for the development of all corporate materials.

In the meantime, WordPress became a solid platform for blogging and has just announced the 2.0 version at the time. The company liked it so much that they are still using it.

interaction design/user interface design

ruwido vexo

Posted on October 10, 2005 by tihoni

Testing and prototyping before mass production saves time, money and nerves. Since prototyping became my area of expertise, I was hired by an Austrian-based broadcast electronic company that had been producing remote controls since the early 70s. From that time on they have supplied some of the world’s most famous electronics manufacturers with their (OEM) products, but have also designed their own line of remote devices, caring about usability all the way.

One of their usability experts approached me and told me that a “16-devices-controlling-one-button-universal-remote-control” is being developed. The user interface was basically done, but the task was to create a testing platform, an interactive device simulator, that would be controlled by one magic coin button, that you could click on five places and rotate both ways.

Using the provided screen design it took me only four days to produce the first simulator.

We successfully simulated the situation of controlling five different devices and the logic behind using the device, but the most important part was the possibility to specify, for instance, the device behavior when your thumb turns the wheel clockwise; does the selection bar go up or down?
Yeah, I see you turning your thumb imagining the correct movement, but until at least seven people do it while using the simulator those assumptions don’t mean a thing 🙂

The device was produced eventually and it was one magnificent piece of gadgetry. Encased in a rubberized plastic body, it has a glass front resembling a lacquered piano with a polished silver button in the middle, crowned with a thin rubber ring for better grip. Check out the photos!

Oh yeah, it even has a small flap (or “the leg” as they call it) underneath so it’s easier for you to pick it up from the table 🙂

art/print

reflections

Posted on July 12, 2005 by tihoni

These were the graphics used to promote a concert by Belma, my dear friend, a composer and conceptual artist. The piano/clarinet theme piece she composed was named “Reflections”, which she wanted to pursue in visual communication as well.

The billboard and invitation design are displayed underneath.

interaction design/user interface design

leica geosystems

Posted on July 27, 2004 by tihoni

Before I started working on this project I did not know that a) user interfaces and earth-moving equipment had something in common and b) Leica produces something else besides high-end cameras. Well, that all changed when I met Leica’s Machine Automation Development Team in Switzerland. After the initial kick-off meeting I was amazed by this whole other world behind the yellow-and-black construction site ribbons and signs.

So, basically a lot has changed since I was a kid playing with toy bulldozers and excavators. There used to be a time when there were these people that would plan where buildings, roads, tunnels etc. should be built. Then comes this other guy that does all the on-site measuring, hammering down funny sticks and connecting them with thread. Then the groundwork starts and everybody hopes they know what they are doing and where they are. After some heavy earthmoving, stuff is built and construction is over. Well, not so with this technology.

Leica Geosystems Machine Automation enhances the earth-moving and building process in terms of time, precision and quality. Using their systems, the whole (future) construction site becomes a digital playground with no need of measuring in the classical sense. The whole area is grid-mapped and every machine is tracked to the spot and fed with information on what it should be doing, when and where. The GPS location and optically-determined position of every machine is recorded, as well as the position and rotation of its tools. This data is fed into one rugged, industry standard computer with a touch-screen attached to each machine for the operator to handle under any weather condition; snow, rain, direct sun, smoke and dust. Imagine that device vibrating with the machine engine and a big guy with big fingers in gloves operating the touch-screen to access one of the machine’s 700 functions and settings.

Now imagine following: that guy has never used a computer or a cell phone, and some are also illiterate. Welcome to my user requirement specification world.

Leica is offering these systems to be connected to bulldozers, excavators, graders, road pavers and slipform pavers all over the world and it is astonishing what these machines can accomplish.

Back to the user interface.
Knowing that a certain amount of users have no previous knowledge of computers, I went back to the basics and explored the world of my imaginary persona; Sunil (47), the construction worker from Alipura Chhatarpur, India. Just as computer OSes have “Desktops”, I needed an equivalent for this real-world analogy for him. And I found it.

Remember those flaps/tabs on the side of a phone book? You know how you can put stuff into drawers?

Behold the “tabs and drawers” UI 🙂

This UI can accommodate 800 functions, where there is a “drawer” capacity of 20 functions distributed over 5 screens with a maximum of 8 drawers per screen. With each new screen, the capacity doubles.

The concept lacked icons at this stage, but it’s important to stress that the icon world needed to be designed specifically for this user group, while, interestingly enough, those users that were illiterate had a distinctive capacity in differentiating forms and colors and interpreting icons. This information was given to me while developing this user interface, and was confirmed during user testing. By examining other icons used on construction machines (i.e. turtle symbol vs. rabbit symbol for “slow/fast”), I realized that this had been done before.

Couple of years later, studies were published on using text-free interfaces for illiterate people.

In different iterations, while playing with colored backgrounds and button sizes, different I/O elements were developed and tested in the field until they were acceptable.

The simulated working screen included a status bar, working area, toolbar and a shortcut button to frequently used settings.

The user interface has been slightly adapted and implemented on the actual embedded device.

The system was produced and was a great success. The photo below accompanied the official press release in 2006.

This user interface is also used on newer machines.
Here is a device from 2010.

interaction design/user interface design

philips sagem multifunctional devices

Posted on July 25, 2004 by tihoni

In 2004, a Philips-Sagem corporation based in Vienna, Austria, started developing multi-functional devices. It was a time of all-in-one devices, when many companies entered the race for the pole position in this market segment. Philips was already very experienced in area of fax devices and the idea was to build on that premise.

Since this was a new area for the company, there were different departments involved in development: hardware, mechanics, firmware, software and user interface. I was assigned to the last one with an assignment to deliver an interactive prototype simulator based on two documents that circulated between all the mentioned departments: Functional Requirements Specifications and User Requirements Specifications. Basically, the first one is describing what the device must do and the second one how the user interacts.

Meet the devices.

In addition to the expected functions such as printing, scanning, copying and faxing, some of the functions of the devices were:

photo printing from a memory card or USB flash memory,
scanning onto memory card,
WiFi and Bluetooth connectivity,
color faxing,
SMS sending,
MMS sending using the scanner to send the picture to a mobile recipient.

So some pretty slick ideas that were new on the market.

In addition to the mentioned documents I was also provided with an image of the device’s interfacing controls.

For better simulation, I included the complete visualization of physical handling of the device instead on only concentrating on the device screen. Opening and closing the device, chip-card insertion and rotation, cartridge handling; everything was simulated as specified in the documents.

Here are the first sketches of the menu navigation and ideas on how to visualize the opening and ink-cartridge handling.

Animation still of opening the device cover.

Ideas on how to handle inserting, removing and discarding ink cartridges.

Last sketch and its final implementation underneath.

In this dialog box you need to open the hatches, take out the existing ink cartridge and toss it underneath on the marked area. Then specify the ink cartridge you’re inserting and place it in the hatch. Any one of two. Everything is possible, and therefore also simulated.

Funny story.
I accidentally left one of the hatches open before closing the device cover when it struck me; what happens in the real world? A quick call resolved that question – my supervisor called the mechanics department which had a mockup of the device on site. This is how it went.

UI: Hey, what’s up? Look, we have a question.
M: Shoot.
UI: You know when you’re changing the ink cartridges, you have to open and close the small hatches?
M: Yep.
UI: Well, what would happen if someone tried to close the device cover? Would that break them?
M: Hmmm. Just a sec…
<Rattling noises. Click. Click. Clack. Clack. … CRRAAAAAACKK!!!>
M: Yep.

Priceless 🙂

OK, so back to simulating. When inserting a new ink cartridge the user must authorize it by inserting a chip card supplied with the cartridge. The following dialog box simulates device behavior if a new/used chip card is inserted; both properly and incorrectly.

Other simulated devices featured a full-colored LCD screen where complete memory card handling was addressed and adjusted accordingly.

art

freeze – animation studio

Posted on March 21, 2004 by tihoni

The curriculum of my degree program required as much real world work and experience as possible, so during the fourth semester of my studies, students were asked to create virtual startup companies and work both sides of the trade: business & administration and design & marketing.

Our company was called “Freeze” and it was a virtual movie & animation studio.

The goal was to produce an animation series pilot and pitch it to TV stations.

We managed to cover all bases, from brainstorming, storytelling, sketching, storyboarding, animating, modelling, rendering, compositing and shading, to sound design and DVD production.

The cartoon was named “Goeff & Phlip”, after a lazy boy and his perverted penguin brother, that got kicked out of their parent’s house and now have to work for a living. They move in with some shady guy to cut the expenses, while checking out the classifieds. They manage to find a job, but the plot somehow always takes a turn for the worse, because they end up in the wrong place at the wrong time.

The story got picked up by a marketing magazine and we got a feature. Yay! 🙂

art/interaction design

jumper – interactive scalex project

Posted on March 11, 2004 by tihoni

The guys at the Information Design Transfer Center that developed that one tool I mentioned before had developed an excellent system funded by the EU called Scalex – short for Scalable Exhibition Server – that allowed interactive content to be displayed in museums and exhibitions, but they wanted something more “spicy and provocative”.
The goal was for Information Design students to create an artistic installation in a public space, so that Scalex would gain more popularity and media hype.

Scalex allowed for virtually any digital input such as webcam, midi-keyboard, microphone, any sensory device that could capture some change in movement, light, sound, temperature etc. This info would then be fed to a remote location which would fire the appropriate response onto the local system.

The “Jumper” in this project was fired by any of two cameras located on either side of a projection plane where the interactive movie was projected on. The idea was to have these trigger cameras approximately 1m away from the screen, so the system would have enough (lag) time to prepare. The person would go by and trigger the camera which would pick color values of two reference points on the person approaching, acquiring “what this person is wearing”. These two colors and the 2 second timer would be sent to the server which would than “clothe” the “shadow” of the person passing the screen, following her/him for two steps and than doing something random, thus “separating” from the subject followed.

In the meantime, there are “Sprayer” and “Painter” figures changing the background between different advertisements. Consider blue as the first ad, then red as the second, blue as the third etc.

Should someone pass by, the painting would be paused for one instance and the whole following+random gag would happen after which the painting/spraying would continue.

In the following example you can click the red dots that simulate the trigger.
This simulation is reduced to monochromatic actors and only the right webcam trigger.

[swf:/wp-content/uploads/2004/03/2phase.swf 640 500 white]

usability

eyetracking

Posted on March 11, 2004 by tihoni

During my studies I volunteered to take place in demonstrating services offered in the Information Design Transfer Center of the FH Joanneum University, one of them being the usability studies using eye-tracking and gaze-tracking methods.

The infrared camera attached to the base of the screen, when properly calibrated, tracks the movements of the eye, translating them to the pixels on the screen, recording everything that the user is looking at.

The gathered data is later processed, giving the test conductors information where and for how long the user was focusing his/her attention over the course of time. The software then allows the creation of “heatmaps” that can help in analyzing the user’s behavior, in order to optimize the layout or the content of the website.

In addition to the websites, the eye-tracking method can be used to assess advertisements, product design, user interfaces etc.