design – code – interaction

In this week we had to create a GUI mockup as real as we can and present it in the Friday morning to the faculty. So divided our work between us. Ujjval was responsible for presentation slides, I was designing caretakers device and Yves was designing the elderly device.

In the meantime we come up with the name for our system : eldia.

Here is eldia logo that I designed:

For designing both logo and GUI I was using Inkscape – an opensource vector drawing software. I’m using it since three years now and it has turned out to be very easy but powerful program that I can strongly recommend.

Because we had chosen iPhone to be our prototype device we started to make some test very quickly. For example after first test we increased size of the buttons by 150% percent. And after having some readability issues we decided to drop a text displaying the time of receiving the request in favor of simply displaying how many minutes passed since we received it.

Hah. It was the first time I wrote something in Objective-C (programming language for iPhone). It was very simple program, one scrolling text and switching between several images but I took me whole day to finish it.

Another thing worth mentioning is how many things we had learned or had been reminded about during Niels and Alex lectures. For example in our device we have request and daily schedule displayed on the same screen at the same time. To avoid clutter on the screen we introduced visual hierarchy in our GUI. Request messages are colorful and bigger that schedule entries which helps caretakers focus on what is most important at this moment.

Yves to design interface for the elderly was using Photoshop. I find vector graphics more useful that bitmap graphics while designing GUI because you can always change things (eg.: color, size) what happens many times. Yves had every object on separate layer all grouped in different folders and this system worked for him quite well. Because Yves’ device was designed for people that often have some problems with bad sight you can see that icons are much bigger and contrast is higher.

When we finished our GUI we decided to shot a short video explaining our concept. This was the first time I had used HD (High-definition) footage. Even after downscaling to SD (Standard-definition) resolution the quality was much much better. You can easily read text displayed on the iPhone.

I like two trick that we had used in this video. First one is blurring the screen in the beginning of the video. It was Ujjavl idea to make audience feel like being an elderly person. Second one is starting and finishing each shot in our video with the hand standing still. This way we can fade between screens of our interface easily without doing it on the software side. Enjoy!

The presentation we gave went very well.

Here you can download the slides eldia.pdf.

It was two weeks of hard work. Often we stayed late at school until 9 or even 10pm. But it was definitely worth it! I was tired but happy

Taking previous week as a base for further development of our ideas in these two weeks (17-28th Nov) we focused on designing graphical user interface (GUI) for solution of our choice. During this process we were guided and inspired by Alexander Wiethoff from CIID and Niels Clausen-Stuck who worked at IDEO for seven years.

First all teams put their ideas from user research week on the wall. Then we formed new 3 person teams. I was with Ujjval and Yves. We went through all the ideas and voted for most promising ones.

We spend next several days on brainstorming and developing our new ideas. We used post-its to describe these ideas, so we could quickly reorganize and extend them.

The idea that we liked most was called Cold Zone. Cold Zone is a state that caretaker is in. He or she is having a break while all requests to him or her are diverted to other caretakers automatically. Now caretakers have rarely time for break but their job can be very stressful. They receive request from the elderly but they never know how important it is. Is it regular request like “I want coffee” or emergency? Having theme of our project “Helping the caretakers is helping the elderly” in mind we started imaging how a device supporting handling request and taking a break might look like.

Because now caretakers use mobile phone-like devices that are quite clunky we wanted our device to be small and portable. On the next photo you can see one of our paper prototypes. We decided to design two devices. One smaller like iPhone for the caretakers and bigger one for the elderly.

When we already knew what we wanted to do we started to design GUI of our device on paper. We did it collaboratively – Ujjval was drawing while we were discussing which features to include.

After Niels advise we created two or three short use case scenarios and designed features around it. This helped us a lot in staying focused on our core value.

In the end of the first week we went back to the elderly homes. We presented our idea to the caretakers and the stuff. We got a lot of positive feedback and useful comments.

We also had an opportunity to present our GUI to some of the elderly. We also tested their ability to use regular mobile phone and an iPhone.

The interface for them consist of seven icons. A big red cross for help, a sandwich and a drink for food, a telephone handset for calls, a dice for games, a speech bubble for chat, a person with an arrow pointing a door for going out and a dumbbell for physical exercises. The most confusing ones were speech bubble and person going out. I was surprising to us because nowadays speech bubble means a chat or a talk, but the elderly should know them a least from comics. In the second case we suspect that reason of misunderstanding was in the way we had drawn a person. Maybe sticky man would be better that rice-shaped person.

After this visit we had several ideas how to improve our GUI concept and we felt prepared for the next week.