For my internship I had to design the interactions of a UI to control complex and dynamic light setting.
The process of this project is described below. It is illustrated with a lot of images. The images are divided in four parts, all containing a separate image. In the text I refer to the letters of the individual images when I discuss them. Each time, the four smaller images together represent a particular phase of the design process. When looking at the images in sequence, they show a clear progress from first explorations to final interface design.
The image below shows three pages of my final design (A, B, C) with next to it the web-app currently in use by Invisua (D). You can see the similarities in the bottom two pictures: the interactions that I designed are the basis of the interface, only the layout has been adapted (developing a final layout was not my task, someone else would do this).
The next image shows the process in an illustrative way. Every vertical line of blocks represents a week.
I started this project with an exploratory research (visualized in the next image) to understand the design case (A), to explore the context (B), to find some initial inspiration (C) and to do a ‘pressure cooker’ (D). Even though I assumed the pressure cooker to be widely known (I learned about it during my studies) I was never able to find any references to it. Just to be sure I will explain it here. It is a technique where you execute the entire project during a short and simplified process, with a ‘final’ design as the outcome. In this case, I used one week for the pressure-cooker. The idea behind it is that you can quickly discover major pitfalls of the project.
This research was very brief (e.g. I took only one day for the pressure cooker); unlike my graduation project, this project had a clearly defined design case at the start. Therefore less time was needed to study the design case and the context. More time could be spent on the actual design phase of the project.
After the exploratory research, you can see three big iterations in the process illustration. Broadly speaking, each iteration consists of four phases: user focus – ideating – conceptualizing – prototyping (and again: user focus - …). The particular techniques were not the same each time. During the first iteration, I implemented the user-focus by making empathy maps and storyboards, while during the second two iterations I evaluated the concepts both times by conducting usability tests and analyzing them. However, the two tests were performed with two different prototyping techniques: paper prototyping for the first, and a lo-fi but operative prototype for the second test.
Besides these three main iterations, various small iterations were involved in the process. For example, each time I was elaborating the conceptual model I was iteratively developing the corresponding prototype. And during the first two main iterations, I was simultaneously ideating and making empathy maps & storyboards, where the two influenced each other.
The two images above and below show these ideations, empathy maps and storyboards. I start with the one above You see an empathy map (A) and three different storyboards (B, C, D). They helped me with projecting myself in the user's position. His preferences, needs, potential frustrations, capabilities and general behavior with regards to the context became more clear to me. In the image below you see the outcome of two individual ideation sessions (A, B) where I brainstormed for useful interactions to control the UI. The ideation techniques were derived from the book Thinkertoys. The techniques discussed in this book help in opening up your mind and linking your thoughts to random, new insights. I hang all ideations on the wall (C) so I could (re)view them during any stage of the process. The generated ideas together with the user awareness made me develop four different concepts for a UI (D).
The next image gives a view of all four concepts (A, B, C, D). They were all elaborated as paper prototypes, where the pages depicted in the image are one of many. Simultaneously the four different concepts were also worked out as conceptual models in written form. The combination of visualizing and writing down the interactions exposed many detailed needs of the UI I should not overlook.
As said, all four paper prototypes consist of multiple pages. Showing the pages in the right sequence exposes the different ways the UI’s operate. The paper prototypes were all examined during a usability test, as can be seen in the image below (A, B). Afterwards, the test outcomes were evaluated in a QOC analysis (C, D), to determine the strengths and weaknesses of the different concepts.
As the start of the second iteration cycle, I decided to perform some fresh brainstorming, since I had got new insights into the project during the last few phases. The results can be seen in the next image (A). Then I took all the project output so far (ideas, user awareness, concept aspects, research, analysis, etc) and connected the individual parts into as many meaningful combinations as possible (B). Then I selected the most useful combinations (C) to develop two concepts (D) that were more elaborated than before.
In the image below, these two concepts can be seen in the form of prototypes. Although being lo-fi prototypes, they are operative; in contrast to the paper prototypes. Both prototypes were developed for a next usability test. Because it takes much time to develop such a prototype, I got help from another intern. Martijn, studying Informatics at that time, programmed one prototype (C, D) while I made the other one (A, B). Martijn used the (former) house style of Invisua in his prototype. I prefer to keep my prototypes for usability tests lo-fi. In this way, time is saved and the prototype communicates that it is not ready: there is room for improvement. This might affect people while giving feedback.
The execution of the usability test is visualized in the next image. The user test was prepared by use of the DECIDE framework (A). This is a checklist that helps to prepare a reliable usability test. An interview was set up for after the test. Both prototyped were tested by five users (B, C). The outcomes were analyzed by listing all information and highlighting similar results in the same color (D). In this way, I could see clearly which errors were made frequently and if certain preferences and aversion were shared among multiple users. Afterwards, the prototype with the most potential was selected for the final design.
The image below shows the development and improvement of the final interactions. The finishing iteration cycle was again started with a few ideation sessions (A) to generate ideas for details of the interactions. Then all ideas together, also from earlier ideations, were reviewed (B) and considered for the final concept. The interactions for the final design were now developed (C, D).
Before I made the finished hi-fi design (see the first image again) a more lo-fi version was composed, which can be seen in the last image below (A, B, C). This version was assessed one last time and then, after a few small adaptions, converted into the final design. The first and last image on this webpage show the same three pages of the UI. But the UI consisted of more pages. The structure of the entire UI, the different pages and how to navigate through them, was depicted in a graphic model (D).