Category: Physical Prototyping

Today we explored sketching as a mode of prototyping during a short workshop conducted by Johannes.

What is Sketching?

A sketch is a rough design of what you want to present. It’s a pictorial representation of thoughts, images or a mental picture in your mind. It can be an idea or a concept. There’s also the concept of paper-prototyping. Sketching and Paper-prototyping utilize similar tools, such as pen&paper, Illustrator, Photoshop, Keynote, Arduino, Processing, and so on. However, paper-prototyping includes complex paper constructions as well.

What is paper-prototyping?

Paper Prototyping is a prototyping method in which paper models are used to simulate computer or web applications. After initial design, a paper prototype is drawn on plain or construction paper.This a lo-fi, cheap and easy method of prototyping, just like cardboard-prototyping.

Paper prototyping as a prototyping method relies on tangible objects for usability testing and functions under the assumption that the user will interact with the paper application as he or she would with a real application.

We were introduced to the method of paper-prototyping, but today the focus was on sketching only.

Sketches are an important part of the design and development process. Sketches help to convey ideas, demonstrate functionality, visualize user flow, and illustrate anything that requires human interaction. UX designers have to generate concepts, communicate ideas, map processes, or simply problem solve throughout each project they work on. The difficulty is always how to share these ideas with clients without using up too much time or money, or hiding away and working on a problem to find you’ve missed the core project objectives that your client was expecting. The best way to quickly, easily, and comprehensively communicate with both the team and the client is to share sketches throughout the whole project. Not only does this help articulate how one plans to tackle a problem, but by thinking out loud on paper, it allows everyone to see how ideas begin, evolve, and work towards the solution.

It’s important to iterate ideas during a design process, that’s why sketching is a handy form of prototyping.

Sketching Exercises

Exercise 1: Sketching Dieter Rams… upside down! (10 minutes)

Goal: Focus on shapes instead of objects. The purpose of the exercise is try to escape from trying to draw an actual portrait of a human but to perceive the portrait as a series of shapes and shadows. This help heighten observation skills.

Results:

• 

• 

• 

Reflection:

Not quite an accurate sketch, is it? The proportions are completely off, since it was definitely a challenge to draw a face upside down. However, I felt that I was still trying to focus on drawing the figure and making it as realistic as possible, instead of perceiving the face as an oval, two small circles, a triangle, etc, I still sketched while thinking head, eyes, nose, lips… and so on. In the future I will consider letting myself go and perceive objects as shapes instead and see how the results will turn out.

Exercise 2: Five frames of your morning routine using star figures (2 minutes total)

Goal: Star figures > Stick figures. Johannes emphasizes that they can carry the same characteristics as stick figures but you can draw them as a foreground or a background as they afford overlapping each other. This is a simple exercise just to practice drawing star figures.

Results and Reflection:

Human figures are commonly used to sketch out the “user” in a specific environment or context. Therefore, it is important to learn how to draw human figures in the most simplified way possible. I definitely prefer star figures as well as it somewhat brings a sketch to life but not being messy scribbles and lines.

“It’s not uncommon to use several prototypes to create a single product”
–Dan Saffer

In addition to cardboard and paper prototyping, we’re now introduced to a third technique– video prototyping. The use of prototypes is communicate and evaluate an idea, and a prototype should obviously be convincing, at least to a certain extent.

Why video prototyping? It is quick but also complex, it can be both lo-fi or high-fi, it consists of element of storytelling, it’s easy to display context, shape, size, form, users, function, and behavior all in one, and you have the ability to create and demonstrate impossible situations.

Examples

LO-FI
↘high functionality with low finish
↘low functionality with high finish

HI-FI
↘high tech, high functionality and high finish

There are some tips for how to create better video prototypes, but it’s important to remember there’s never a right or wrong in what you create. Being aware of what is visible is pivotal, even professional movie-makers make mistakes by accidentally including something in a scene that’s out of context. Far shots should be implemented for establishing context. Close-ups are for emphasis on detail or for creating intimacy with a character or object. Contrasting colors are what makes a video standout, unless it doesn’t fit with your context, lighting is very important, and finally, the rule of thirds is a trusty companion as goes to almost all design projects.

While creating a video prototype, it’s important to know what you want to tell/illustrate in your video, you should be prepared to tell your story efficiently, have the viewers’ interest in mind and not bore them to death. As you establish the context in the video, it’s essential to show the physical interaction and behavior between the product you’re presenting and a user, to show physical qualities of the object or objects, and finally, the video should be kept smooth and steady with both the physical video as well as the editing.

If you want to watch some projects we have previously worked on in class, see Wonder Bottle or the Netflix Gesture Exercise.

The second and more extensive group video prototyping exercise is about making a video prototype with focus on user values. The brief states to create a video that communicates some sort of a shape-changing interactive object. In the video, we must tell the story of how it is used and what user value it obtains. We’re allowed to pick pre-existing objects from example videos Johannes’ provided or come up with something completely novel.

Brainstorming

After a series of brainstorming, jotting down ideas about objects us ordinary people use on a daily basis, we came up with ideas such as shape-changing apparel, pillows, phone cases, and so on. By creating something the team-members could also make use of on the daily would make it easier for us to convey its user values. By the end of the day we settled with the idea of a smart water bottle with different functions.

Initially, I was somewhat against the group’s idea of creating a smart water bottle. First of all, the bottle presents many functionalities, but the brief placed a huge emphasis on the shape-changing element and by including many functionalities to the bottle does not necessarily mean that it’s physically “changing shape”. As I proposed this to my fellow teammates, they were able to stray away from the technical functionalities such as a smart meter that can connect to your smartphone, into more physical functionalities and shape-shiftingness. A water bottle definitely has a user value, but how could we include a shape-shifting element? That’s when Bahr brought up the idea of an integrated screen display that pops out from the water bottle, this hopefully suffices as a shape shifting element. In addition to that, some had previously proposed for the bottle to have two compartments you can separate in order to to store different liquids or solids as well as a heating attachment to enable a cooking function for the bottle. These all sound like outrageous ideas but I guess the purpose of video prototyping is to be able to showcase or demonstrate impossible situations or objects.

Storyboard

Why do we create storyboards? With storyboards, we come prepared during the filming process. If you’re coming up with ideas and scenarios while filming, the progress would not be as efficient. With a storyboard planned out and drawn up, it decreases the chance of failure out in the field.

I was unfortunately unable to participate in the storyboard planning due to work but I think I have a clear grasp of what is going on in these illustrations. The setting starts in a room where the actor packs his camping gear. We have decided that the user for the Wonder Bottle will be targeted towards campers. He pours liquids into the Wonder Bottle, so the audience understands that the product we’re trying to convey is the bottle. Then the next scene cuts to the actor walking towards and walking in a park, setting up a camping tent. And finally the core functionalities and the shape-shifting elements will be displayed while the actor camps in the park.

• 

• 

• 

• 

Final Product!

The storyboard was indeed helpful for the filming session of our product. Everyone had a clear grasp of their roles as well as how the video pans out. After editing the scenes, we also incorporated animations to better illustrate what functions our bottle has. Finally, the scene I’m most proud of, is how we made the screen on the bottle actually look like a screen by implementing green-screen and chroma key compositing.

A Reflection

To my surprise, the video came out solid contrary to my fears about the final outcome. I was worried that the video would not convey our product in the best way possible, however, thanks to Manuel’s editing skills, we actually created a rather convincing video prototype. In conclusion, we actually didn’t spend too much time but definitely enough effort on this project- credit goes to the efficient team and the successful storyboarding which resulted in an productive filming process. To read more reflection on video prototyping in general as a prototyping method and a dissection of video prototypes, read here.

Photos

• 

• 

• 

• 

This is a quick and short exercise that underwent during the video-prototyping workshop. The brief is to explore free space gestures for controlling Netflix’s functions. We must capture hand and body movements in conjunction with Netflix’s functions in the video. These functions include playing/pausing, skipping an episode, increasing and decreasing volume, as well as muting the volume.

I collaborated on this project with fellow classmates Mounika Damera and Louis Than.

We were only given an hour to complete filming, editing, and exporting the video, so there wasn’t much time for planning and drawing a storyboard. We immediately got to work after forming the idea of including just a hand making hand-gestures and another person actually controlling the computer- a sneaky but handy technique of Wizard-of-Ozzing.

A smart method we did that prevented chaos and delay in the editing process was to delete footage that failed that we weren’t going to use in the actual video immediately after filming. This sped up our process significantly. After compiling all the footage, putting them in order, cropping out any sections from the footages that had accidental dialogue by the team members, and adding an introduction and ending image, voilà, our video was complete, watch it below.

This quick yet straight-foward exercise that quickly introduced us to the concept of lo-fi video prototyping. In addition to the laptop, all we used were hand gestures, and we were able to quickly convey the purpose of the video– free space Netflix using gestures. A more extensive video prototyping exercise will follow along.

A team is “a small group of people with complementary skills, committed to common performance goals, and mutually accountable” according to Johannes’ slide. A group of learners with a common assignment is NOT necessarily a team, it’s much more than that. This journal entry aims to explore the importance of team-building and why it is crucial during a design process or in ANY other context that involves teams.

There is generally a similar pattern when a team or group processes a task. They comes in three rings, one including the other. The inner circle would be task processes, then the transactional processes, then the outer-most ring would be the non goal-oriented social interactions. All of these build upon each other to build the team into reaching their goals. Forming groups, we had to discuss the relationship between the second and the third circle, and how these contribute to the efficiency of task processes.

We concluded that the task process are actions to reach the goal, transactional processes include every meeting, every e-mail, and every information share, and the non-goal-oriented interactions include everything else, such as socializing in a informal setting. These are all important group dynamics that build upon each other, if a team does not commit to non-goal-oriented interactions, the team might be stiffer with one another and the end-goal might be harder to reach. On the other hand, if a team pays too much attention on informal interactions, that wouldn’t be an efficient team either due to lack of focus towards the goal. There must be a balance within the three rings for a more successful outcome.

What are group dynamics? Group dynamics are unspoken communications in group discussions. They’re non-verbal, including expressions, movements, tone of voice, selection of words. Members are generally not aware of these communications and they’re usually more genuine than verbal communications. Group dynamics play a significant role within any organization, and the important thing to remember with these structures is that they’re made up of people with different ideas, motivations, background, and sometimes even different agendas. Important aspects of a group that works well together is how individuals interact with each other and how individuals react with the group. Positive relationships are important in a group, and understanding them is equally as important. In order to develop good group dynamics, we must first develop good relationships.

In any platform you can find about team building, you can generally find six important steps to building a successful team :

1. Focus on roles.
2. Value each role.
3. Communicate.
4. Set goals.
5. Celebrate successes and failures.
6. Know each other.

Many argue that communication is the most important aspect of successful team-building. Teams that communicate complete projects in a quicker and more efficient amount of time than others. They also are more accurate in their work than others. Effective communication also allows team members to understand their roles and the roles of everyone else on the team.

As a designer, learning the importance of developing good group dynamics is essential. A designer could work with a team of other designers with similar skills, but it’s also very likely that they would come across working with people who tend to work with other mediums and master in other skills. For example, designers work with programmers, back-end developers, engineers, and other roles quite often as an innovations team. So it’s important to pay attention to group dynamics when members have complementary skills.

An assignment given by Johannes was to create a group contract and establish ground group rules as an exercise. Here it goes below:

GROUP RULES

In collaboration with Nefeli Alousi, Therese Casio Persson, Monica Posmaesi, and Julija Rukanskaitė

I. Ground rules

1. Attendance

• How often we meet is dependant of the workload, however the minimum is once a week.
• We could meet one of the days when we don’t have any lectures or before/after a lecture.
• And the time we spend is between 30 min – 3 hours.
• Planning together and concluding after each meeting.
• If necessary, appoint a chairperson
• Everyone communicates about their upcoming absence or as soon as possible, using a group communication tool. The reasons for absence should be discussed. Absence is acceptable in regular meetings but not in oficial group presentations / examinations.

2. Tardiness

• We have a common goal to be on time. In this way we respect each other’s time.

3. Enforcement

• If anyone breaks the group contract, that person buys one round of (alcoholic) beverage. (haha)
• The person does a thorough explanation to why they have broken the group contract.
• He or she will be forgiven if they have brought something edible. (haha)

4. Information Management

• One person should be in charge of taking notes for every meeting and depending on the kind of information, either take photos and share with the group through drive or post the notes in a shared document.

5. Agenda Building and expectations

• To get everyone involved
• Equal work/involvement/contributions
• To pass the course
• That everyone can express their feelings thoughts
• That everyone feels good
• To have a common goal
• Divide the writing equally and do the presentations together
• Write together in google docs, preferably in the same room or through skype

6. Confidentiality

• As long as all group members have agreed in sharing information about our work, all actions shall remain between the members.

II. Developing a Productive Team

A healthy team is built on trust and respect of every team member.  Every team member should always be considerate of the different group members individual personality types and experiences of working in a group. The team should always strive towards optimizing the group work by being aware of the members strengths and weaknesses. The team should always have the projects best interests in mind and not let personal issues interfere. The team should also find a way of communicating which is comfortable for every member.   

III. Decision Making in Teams

Everyone should be informed and participate in decision making.

Types of decisions:

• Low involvement: could be made just by members that are present;
• Medium involvement: should be made by consulting every member;
• High involvement: should be made by reaching mutual consensus.

This is a follow-up of the Arduino-Processing timer project. To read more about the process leading up to this project, including the introduction of Processing and how Processing and Arduino communicate, read here.

The project took place during the latter part of class after the introduction to the communication between Arduino and the Processing software. The brief states to a game/any interactive artifact set in a specific context that utilizes some sort of a timer, the timer is a requirement and is to be created using Processing. We are to also combine all our knowledge learned from earlier today using the Arduino together with Processing to create something fun and interactive. We must form groups of 2-4 and the minimum requirement of each group is to have at least one student from the Product Design class (if this wasn’t stated before, year-two Product design students are also taking a similar course about interactivity hence why we do Arduino workshops together). The Product Design students each draw a context from a bunch of contexts David has written down, and Interaction Design students are to form groups with those, therefore, one group will have one context to work with and so on. I collaborated with Max from Product Design, and Viktor and Josefine from IDK18. The context we were to work with was… the library.

Our group ran into troubles early in the process, struggling to brainstorm and settle on an idea on how to make use of the context to create an interactive artifact. After closer attention and some sketch-prototyping, we settled on a bookcase idea. The bookcase would make use of a servo from the Arduino starter-kit. We plan to make a physical bookcase, create some books that go on it, and also create a system so that when the books are placed in its designated order, you’ve beat the game, if you don’t and the given runs out, the servo is triggered and the book case tilts, causing the books to fall down.

We ran through several challenges along the way, most of it being inefficient time-management and being overly ambitious to begin with. I will address these issues as we go on.

We made use of the laser-cutter in the workshop, and with Max’s extensive knowledge with product design, we put him in charge of the construction of the bookcase structure. He creates parts using Illustrator and cuts them out using laser-cutter. We also used the laser-cutter to cut-out the books, to hopefully speed up the process and shape the books uniformly, the laser printer was acting up a little in the beginning as it didn’t read the Illustrator file-format we provided so that delayed our process a little. Josefine printed out some old vintage book covers, so after we glued the books into the right shape, we pasted the covers and they looked very convincing!

• 

• 

• 

How are we going to make it so that the books only allow one specific order to be the correct one? Our plan is to attach copper tape in specific patterns on the individual books so that the tape would only make contact with the adjacent books. If you don’t place the right book the connection would break and the timer would continue counting down. As you can see, these books to the right would not be in the right order because the tapes are not coming in contact with one another.

Now these are all ideas we wish to execute but was it successful? Unfortunately, it wasn’t. After creating the timer on processing and writing code on the Arduino editor, it was time to see if all 16 of the books, when placed in the correct order (alphabetical order by author’s last name), would establish a connection. We tested this by checking with LED Blink on Arduino. Sadly, it only worked with one or two books, sometimes three, but never more than that. The wires/Arduino (we don’t know which one was the issue) also tend to stop working after a while, forcing us to re-upload the program every other minute. Max was able to built the bookshelf beautifully, but the books just would not work at all, we believe the issue may be that that the books are not placed tightly enough so some of the tapes do not touch, but even when we tried to tighten it, it still didn’t work. Maybe the thinner copper tapes are not as conductive on cardboard, but that’s also not completely certain. All in all, we were not able to conduct our game and our interactive artifact, but at least the execution and the visual appeal was successful.

• 

• 

A Reflection

Why weren’t we able to finish the exercise and present a working artifact? In addition to the technical malfunctions, perhaps we were overly ambitious to start with. We paid a huge amount of attention to the visual appeal of our bookcase but didn’t necessarily brainstorm and test its functionality early enough. We should have keep in mind that it was simply a prototyping project, and in no shape or form needed to be perfect. Don’t get me wrong, the end product was extremely rewarding, but it was a shame that the core functionality of the bookcase was not able to be executed. If we had discovered the issues with the copper tape and Arduino earlier, perhaps we could have taken a step back to work towards something else, however, by the time we finished taping the tapes, the time for us to work with the project was almost up. If we hadn’t paid too much attention to the visuals at all- such as the unnecessary pasting of the covers- and started with the program earlier on, we might have been able to present a functioning bookcase.

This was yet another exercise for cardboard prototyping. Cardboard prototyping, as I’ve mentioned in the QWOP entry, is essential because it’s a common lo-fi method to prototype and test physical objects and environments. It’s cheap and easy and often created to be thrown away. This makes it easier for those who created the prototype to let go, reflect, and embrace the necessary changes. It was nice to explore with this medium again, this time incorporating both Processing and Arduino into the project. What happened to the timer by the way? It worked fine, it’s on Viktor’s laptop so I cannot display it here, but we couldn’t incorporate it at all after the failure of the copper taped books. The bookcase is stored in the workshop so maybe one day we could pick up the project again and make it work.

Some photos↓

• 

• 

• 

•