Marie Frogner @marieinteractiondesign-blog - Tumblr Blog

Here is my final work. The idea is to courage users to recycle by making the appearance interesting and innovative.

As everything came together, I had to figure out what input to use. My first idea was to use a distance sensor, so that the movement would occur when passing by. It took time to figure out the code, but after a while it worked like I wanted it to.

Sadly, when I tested it out to rotate the moving parts, the distance sensor became too sensitive for the material, as the reaction of the distance sensor was less controllable. I also forgot to change the degrees from 180 to 90. The material therefore got a minor damage when I tested it out. I figured I needed to work with another input that I could control manually, to prevent damage of the material. This was a bummer, since I spent a lot of time with the distance sensor and figuring out the right code. But I learned a lot.

Working with other inputs, I ended up using buttons. One for opening and one for closing. I had been working with this before, so it didn’t require a lot of time.

What to work with: Where the product belong What input to use

The hardest decision to this point, was what the product was for. Now that I had a new idea that I was much more enthusiastic to work with, I had to figure out what the product was for. I worked with ideas connected to different inputs. I thought of a window dimmer with a photoresistor as input to indicate light and darkness. I also thought of a lamp dimmer, with a potentiometer as input.

After working with a lot of ideas and talking to other class members, I figured all of my ideas were practical, but not really exiting. It didn’t trigger any action between user and product. I started to write down everything that popped into my head. This took me some time. After a while, I wanted the interaction to be an opening that would lead to a good deed. I found it hard to narrow it down to a specific idea, but decided to be impulsive and run with something unexpected.

What I had at this point was a movement that demanded attention. I thought this attention could be used to something meaningful. I started to think about meaningful things that didn’t get much notice. I then came up with recycling bins. I thought it would be daring to make something noticeable that would seek the attention to something unnoticeable, yet important. The noticeable part here would be the movement, and the unnoticeable part would be the recycling bin. I knew this was a risk to take, but I decided to go for it. I rarely go out of my comfort zone, so I figured this would be a learning curve for me.

After figuring this out, everything came together. Here is the working process in pictures.

Now that I knew parts of the aesthetics, I wanted to take it a step further. I therefore started to work with shape and tried to figure out the right design made possible with the electronics inside. I wanted to see what opportunities I had aesthetically without it having any influence on the movement. As long as the diagonal was the same in both of the pieces, the shape could be variable. I didn’t want to go too far away from the original form, but to make a few changes to see the product from different perspectives.

The point of the shape is for the user to interact with. I wanted to see how different forms affected me and others when seeing soft gentle curves rather than seeing sharp edges. Since lines have meanings in the visual grammar, I figured it would influence the aesthetic feel.

Here are some of the sizes:

Here are some of the shapes:

They have all variety of characteristics. After testing and compressing, I thought a different shape would effect the open/close principle. A new shape might affect the existing functionality in an undesired way. I figured it would be best to keep it rectangular, so the function of movement would work the way i wanted it to. Also, after trying both geometric and organic forms, I found it more interesting to choose a geometric form. To me, sharp edges represent stableness. I therefore thought the user would be more surprised by the movement because you would expect the geometric form to be static.

The meaning of this was to get a visual building block, so I could move on to the technical.

New idea development

I was quite confused at midweek of week two and started to look back at my woking process to get inspired. Earlier this year I looked on paper folding ideas to make interesting solutions. I ended up with this opening and closing mechanism and figured it could be used in many different situations with a servo motor as output. With time, I found it easier and more exiting to work with this concept rather than my first. I could still proceed my original thoughts with movement as output, but i also needed to consider some changes, both with surroundings and input.

Here is a mock-up of my second idea. Im still using servo motor as output for movement of the opening and closing mechanism.

At this point, I am certain about the movement and aesthetic aspect. What I need to reconsider is what the input is going to be and a new setting. I figured that the design of my mockup wouldn’t fit to the surroundings of children. I therefore need to figure out where the product belongs and the input I want to use.

After drawing and creating new ideas, I decided to focus on one idea with sound as input and movement as output. I started processing the thought of a designed object that would indicate the level of noise in it’s surroundings. The movement was intended to affect the actions of the user.

With sound and movement I decided to focus on places with loud surroundings. Earlier this year i read that children's hearing were impaired by loud volume taking place in kindergartens. I figured it would be a good starting point to create a communicating product that would get the children to be quiet when the noise level was too loud.

My challenge at this point was to figure out the aesthetics to succeed on making the children quiet, rather than challenging them to increase the volume. I've experienced products like these before and often they work against its purpose. I found this hard to work with, but I talked to Einar and started to write and sketch down some ideas.

I then narrowed it down to the idea of a product children would feel sorry for when the noise level was too loud and that the sympathy for the product would make them quiet. At this point, I started to draw out aesthetic characters of a product that would connect with children.

To get a visual understanding, I made a mock-up of a toy with a face that was happy and sad according to the sound level. I still wondered if this would be enough to make the children lower their voice. I tried to work both abstract and concrete. it ended up being way more difficult than i first realized.

Inventing interactive products: Starting process

In our finishing brief of this semester, we will connect every aspect of what we have been taught to this point. This will help us in our process to invent our final interactive product.

Brief demands: The product has to have one input and one output. The product has to belong in a context. The must design a product that relates to environments and human activity. The product has to communicate with the user. The product has to be experienced

I found it challenging to start with this brief, because it is aesthetically open, but still limited with the technical part in consideration. The first thing I did was to get knowledge about every part in the Arduino set for understanding and inspiration. Next, i started writing down possible outputs and inputs. I further connected the outputs/inputs to environment and activities. I found the servo motor as an interesting output, and decided to focus on possible inputs that could be used with movement as output.

Later, i started to sketch freely to get motivated. I figured this would lead to new ideas as i moved along.

Brief 13: Inventing interactive products

New technologies, or new combinations of technologies, offer new possibilities for interaction design. This brief is to re-imagine these technological possibilities and invent new interactive products.

For your final brief this year is to invent an interactive product using the skills and methods you have acquired this semester - create methods, prototyping techniques, code, sketching behaviour over time, communication, electronics etc. The focus is on interactive products that can only exist in the intersection of between the physical and the digital. You will be using electronics and code alongside physical form and materials to design interesting interactions. You can make any kind of product. Your products doesn’t have to be useful or spectacular, but could also be about refining delightful or beautiful interactions. Work across aesthetics, functionality, expression and communication.

On of the major challenges with this brief is that it is very open. This means that you have to find ways of being structured in your creative process. I will be helping you with this through tutorials and mentoring about process and methods. It is very important that you are present in the studio to benefit from the teaching and from observing each other’s progress.

Constraints

This brief is thematically very open, but you will be working within the following constraints:

The product has to belong in a context. You have to make a product that somehow relates to human activities and environments.

Your starting-point is to use one kind of input and one kind of output. By limiting your idea process to only one sensor and one actuator, you limit the scope of your product. You might also find that this sharpens your concepts. Your product has to be communicated. Your product has to be experienced.

You develop your product iteratively through prototyping the experience of interacting with it. The product doesn’t have to work technically all the way back, but it has to make sense as an interaction.

Remember what we have discussed about the relationships between interaction, activities and experience. Interaction design happens in contexts as a part of, or alongside our activities and experiences.

Deliverables

This is an individual task and these are the deliverables:

An experience prototype. A demo and presentation. An exhibition. An online presentation of the product that communicates your project in detail towards a broad online audience.

Arduino

To introduce us to brief 10, we had to learn about Arduino Starter Kit. In this week, we learned about electronics and code, leading us to build an understanding of the opportunities and constraints of our technical materials. This is necessary for us to make a final delivery of brief 10.

Material Exploration

This brief is about looking at technologies as materials for interaction design. Interaction design is not about applying high-technology solutions to simple issues, we don’t need to sense everything to make interaction happen. It is often about small interventions using simple technology in appropriate ways. In order to do interaction design we must build an understanding of the opportunities and constraints of our technical materials, much like product designers have an understanding of wood, metal and plastics.

The things below have been chosen as examples of relatively simple and common technologies used to build interfaces. Your task is to present, in 10 minutes, two things:

How does it work? What kind of interaction does it allow for? For example, if I asked you how a computer mouse worked, you would come back and talk about optical sensing of movement, how that optical sensor actually works, and about how it produces data about movement in two dimensions, and two different states of buttons.

Research methods

In this research, Google is your best friend! Search, explore, refine, search is a routine you’ll need to do to find these things out. You should be able to find an engineer, designer or hacker who has explored and documented these things.

You may find information on howstuffworks.com, ifixit.com, adafruit.com and sparkfun.com. Also try searching on ebay.com and alibaba.com. Look for and present images, descriptions, diagrams and movies. Don’t just read Wikipedia aloud, we can all find that information for ourselves, look at least one level deeper.

Deliverables:

Your deliverables for this brief is:

An A1 poster that shows us how the technology your given works. Should focus on creating diagrams, drawings and visual explanations. A detailed website-post that documents your explorations.

SPEAKER ELEMENT:

In this brief, each student got a technology element for interaction to explain further. I got to explain the speaker element. Speaker elements is commonly used. It is a device that converts electrical current into audible sound waves. Speaker element is used in radio, telephone, TV, music equipments etc.

How speakers work: All speakers have a membrane that moves back and forth in rhythm with the AC signal that we send into them. In other words, it is the membrane that push and pull, and variations of pressure occur in the air. These vibrations is what the ear can perceive.

This is achieved when the speaker cone is connected to a coil that is fasten inside the magnetic field. The incoming AC signal further goes into the coil. The varying current will then make a electromagnetic field with a varying direction around the coil, making the coil and membran move together with the magnetic field changes.

Speakers with larger diameter, created longer waves and is therefore easier for the ear to perceive. Long waves have low frequency, and the ear perceive this as dark, deep tones. The opposite happens with speakers with smaller diameter.

Brief 9 - Urban Delighters

Final result:

Video of the user experience of the app in proto.io

Video of the app edited in After Effects:

Video of the website:

Brief 9 - Urban Delighters

Task

Over the last weeks we have introduced you to the basic tools for designing with screens and the web. Over the next weeks you will be working on a creative task where you are going to apply these tools to design and communicate a single-purpose application for mobile phones. The theme for the application is the city of Oslo, meaning it’s functionality, content and context of use is related to Oslo and it’s inhabitants or visitors. The application should have just one core function, and it should do that one thing really well. Your task is to create an application that is delightful, that can punctuate the urban experience with joy (playful, useful, clever, interesting), intended to make you smile or think, make you experience or see your environment in a new way.

Deliverables

There are three deliverables for this brief:

An experience prototype of an app. This means that you have to design interactions that can be experienced. You do not have to make a functional app or make a technically sophisticated prototype, most importantly it must clearly and convincingly convey how it may be used and experienced. There are several prototyping tools available for this.

One or more short films that presents the app’s functionality and use. Think about what you learnt from the filmmaking brief and apply this to the app. The video(s) should both present and explain the core functionality of the application in an engaging and delightful way. You should also keep the video in mind when you design and prototype the app itself. What are the interactions that you want to show in the video, and how do you communicate these well? Please: no intricate stories or acting and no music (use contextual sound). Focus on communicating what the application does and why that’s interesting / useful / fun.

Make a functional single page website that presents the app and service. This should be focused around the video(s).

In this brief we worked in a group of four. I worked with Julie, Andrea and Raoul. First, we started off with research and investigating ideas. We worked with ideas both together and individually, where we observed people and situations in Oslo. Over time we came up with many concepts. Eventually we decided on a concept we thought would be relevant for the environment of Oslo and still delightful. We decided to work with sound and the oppurtumity to discover Oslo through sound sightseeing. To evolve with this concept we needed to start thinking about the user, the user situations and also the urban life of Oslo.

First we started working with a the concept of just sounds. Then we added map instructions that could lead us to the sound target.

When we had our first work in progress presentation, we got a few comments from the class. They thought the concept of the app was a lot more complicated than it needed to be and that it would be too much content for the user to manage.

Here is an insight of our concept development at that point. The map guidance is a central feature here, with sound as an added side effect for the sightseeing target.

After talking to Jørn, we realized that we had moved further away from our original concept, where sound was the main feature. Our concept had at this point become more of a route guidance rather than a sound explorer. It had therefore become more informal, rather than delightful. We therefore decided to focus to our original idea and work with only sound.

Here are some interface outcastes from our working process.

Brief 8 - Sorting Vegetables

Here is the ink to our final result: http://nopgront.webflow.io

Step 1:

Step 2:

Step 4: Digital mockups

Based on our paper sketches, we started to mock up our UIs digitally. We could use our software of choice Sketch, Illustrator or Photoshop. We decided to use Sketch. This program was new to us, but it was rather easy to work with. We tried to use exiting frameworks and used a grid system to get more accuracy. We also discussed along the way with people outside our group and got a lot of inputs that we could work further with. After comparing our ideas, we agreed on a final mock up. This is the result, step by step.

Our website will serve as an informative platform for users in need of a richer understanding of nutritional content, recipes and prices of vegetables in the surrounding area. Everything in one place. We have chosen twelve different vegetables we consider popular in Norwegian homes. Our goal is to help our users to eat more vegetables. We offer healthy and rapid recipes, provide an overview of the nutritional value, as well as a feature that displays prices and economic benefits. This information is sorted in three functions that work together, with the goal that our user can orient themselves effectively on the webpage.

Step 3: Information architecture

There are several relevant methods for driving a process further. During the brief presentation we got introduced to drawing diagrams and hierarchies, card sorting, flowcharts, paper prototypes, UI sketches and wire framing. We needed to pick the methods that where most pertinent and relevant for our product and process. We had to be creative about our use of methods and work on the method to drive our process forward.

How is the information presented back to the user? How do we navigate the information? What are the actions that the users should be able to perform in order to reach their goals? Think about grouping, labelling, visual hierarchies, navigation, symbols, imagery and how all of this is presented in the browser.

Step 2: Research and users

When we had decided on the product/service, the next step was to start thinking about our users. Who are the primary users of our product? Why do they use it and in what kind of context? Having this in mind, we were set to develop 2-3 key personas for our product. Who are they? What goals and needs do they have? When, why, where and how do they use our product? By doing this, we got more oriented on what we had to work with and the things we had to do differently. This step helped us think about the importance of user experience. The changes we made were based on the emotions and attitudes when using our product/service.

These personas will further guide how we structure and present the content in our product.

Step 1: Material exploration and concept development

After the introduction and the brief presentation, we got together in larger groups to start with a material exploration workshop. During this time we got to categorize and list properties that fruit and vegetables can have and also think about relevant rational information. Rakel and I got together with Thea and Theodor. During this step we got inspired to create new and better ideas. We started sorting, grouping and labeling the attributes that we came up with. Based on this, we were set to brainstorm ideas for products based in this material.

At the end of the day Rakel and I had decided the product to work with. We want to create a website that offers information about the value of nutrition in different vegetables. The website also offers recepies with use of vegetables and price value.

Trending Blogs

Recently Viewed Blogs

Marie Frogner