Category Archives: Interaction Design Methods

A project that applies the learning from a subject I am studying called Interaction Design Methods

User Stories and Testing Tasks – Interaction Design Methods

Task 1 – Uploading a Product

Step_NumberStep_DetailActionPossible Actions
1User Opens AppFront screen is loadedUser can either choose to Search a product or Upload a product
2User Clicks on Upload ProductUpload page is loadedUser can now enter details of products like image, name, tags, etc.
3User Clicks on Add ImageUser takes a picture from CameraUser can select image from Gallery or take a picture from the Camera
4.1User Fills Upload FormOn Scroll Down: Product InfoUser needs to input the following Fields: Name, Description, Category, Tag.
4.2User Fills Upload FormOn Scroll Down: Pick Up InfoUser needs to add Pick Up Time, Date and Additional details.
5User submits productSuccess page is loadedUser can connect with other users around the product who may be interested in the product uploaded.

Task 2 & 3: Searching and booking a product

Step_NumberStep_DetailActionPossible Actions
1User Opens AppFront screen is loadedUser can either choose to Search a product or Upload a product
2User clicks on Search buttonText input box with keypad is loaded.User can type and enter search term
3User enters search termSearch results are loadedUser can sort these results by category or location
4User chooses productProduct page is loadedUser can view product images, description, pick up information, Giver’s ratings and booking button
5User books productConfirmation message and check box is loadedUser needs to accept website terms and conditions to book profuct.

User Interface – Interaction Design Methods

Interface Design Logic

Based on the feedback we received from the interviews we conducted from various stakeholders of the project there have been 3 main ideas that have governed the interface design logic. The layout, colours and typography are representatives of the following core ideas:

  • 1. Interface Efficiency – One of the premier reason’s our competitors haven’t succeed with an idea similar to this is because their interface lacked efficiency. Far too many clicks and round about navigation is required to achieve simple tasks. While designing this interface we have adopted a goal, not task, oriented approach. People want it done with few clicks, and fast.
  • 2. Inclusive Design – With a growing number of people of old age and with visual disabilities it was crucial to create an interface that would allow ease of access to as many as possible. Clear navigation, heavy contrast, large fonts and clarity are all elements of the interface design logic we adopted.
  • 3. Ubiquitous Design – This service will be accessed not just from desktops. This service will be accessed from laptops, desktops, ipads, iphones, android phones and tablets. Estonia is a country that is showing early signs of an age of Ubiquitous Computing and we wanted to create a user interface with this future proof design thinking.

Desktop Website Homepage – User Interface Prototype

This is the desktop version of the website homepage will we quick and easy to load. The

User Interface Prototype
Clean design with beautiful large fonts that are meant for easy viewing. A home page without banners, unnecessary scripts or heavy image use makes the website quick to load.

App Landing Page / Mobile Website – User Interface Prototype

user interface prototype
Landing page / App home screen with a direct call to action search bar and an intuitive scroll down indication.

On Scroll Down

User interface prototype
Quick access to adding a product. Large button/icon indicators with a heavy contrast that reduce cognitive efforts thereby making the process of uploading faster.

Forms – User Interface Prototype

A clean and simple form design.

Large form with clear and readable fonts that make it intuitive for the user.
Large form with clear and readable fonts that make it intuitive for the user.

Upload Page – User Interface Prototype

This is mobile version of the product upload page.

user interface prototype
A two scroll product upload page with a clean form that makes it quick and easy for users to upload products.

Login / Register Page

This is the login/signup form.

user interface prototpe
A easy approach to registrations helping us prevent site drop outs.

The sign in / register form can be accessed from any part of the website/app.

User Interface Prototype
A smart approach to creating an site wide omnipresent sign in / up pop-up, instead of a time consuming extra dedicated page.

Product Page – Use Interface Prototype

This is the iPad landscape view.

User Interface Prototype
A nice flat design that does not tax the user’s eyes or crave for his attention. Interface Design with a focus on content beautification.

Product Listing / Search Result Page – User Interface Prototype

User Interface Prototype
Easy filter that make the users life simple. Quick information dissemination through nicely arranged boxes of content.

Thank You / Aitäh!


Testing Tasks, User Stories and Paper Prototype

At the moment, we are trying to focus on the three of the most important tasks for this project.

Task 1: Uploading a Product

In this task, the user (‘giver’) is trying to list his product and connect with a potential ‘takers’ of the product. This is done by ‘uploading a product’.

Testing Tasks, User Stories and Paper Prototype

Step 1: The user clicks on the “upload product” button on the app or the website.

2.1 Product Screen with Add Image

Step 2: The user add images through gallery or camera.

Testing Tasks, User Stories and Paper Prototype

Step 3: The user then adds product information: Item Name, Description, Category and Tags (optional). The user then adds Pick Up Information: Date (from picker) (to picker), Time (from picker) to picker), City and Additional Information (optional).

Testing Tasks, User Stories and Paper Prototype
Testing Tasks, User Stories and Paper Prototype

Step 4: The user then sees the success page. He can then add more products, search for products to take and look for people who to connect with who wish the product he just uploaded

Task 2 and 3: Searching for a Product and Booking it

In this task the user first searches for a product he/she needs. After browsing and filtering through products the user needs to submit a request to book product.

Testing Tasks, User Stories and Paper Prototype
Step 1: The user clicks on the “Search” button/bar.

Testing Tasks, User Stories and Paper Prototype

Step 2: The user enters his query, hits enter and waits for results.

Testing Tasks, User Stories and Paper Prototype

Step 3: The results appear below. They can filtered by location and Category

Testing Tasks, User Stories and Paper Prototype

Step 4: The user then clicks on a product and sees further details.

Testing Tasks, User Stories and Paper Prototype

Step 5: He then clicks on the Submit button to request the product. The user then sees a message asking for confirmation if the user agrees to give his contact information to the giver of the product.

Assignment 3.3 – Concept Map

Click on the image to view it in full size
Click on the image to view it in full size
Group Notes:
Some of the advantages of using Concept Maps:
  • Very simple to understand. Even for non-technical people.
  • Presents information in a way that encourages ‘out-of-the-box’ and creative thinking.
  • Helps enhance and structure ideas into paper before execution. A ‘must’ for every designer and developer while scoping the project and prior to commencement of the project work.
Some of the drawbacks of using Concept Maps:
  • The human mind doesn’t exactly work in 2 dimensional maps. We have our own system of understanding and information processing. Although this map encourages creative thinking – it could also limit the free flow of ideas.
  • At the moment CMAPTools is one of the best software to create Concept Maps. However, the software could be made much simpler and easier to use.

Update: Here is an additional Cmap. This is going to help us chalk out the paper prototype.

Click to view in full size
Click to view in full size

Need Help! Understanding Scenarios to improve Waste Management

About the survey

By answering this 5 minute survey you will enable us to create sound technological solutions that can improve waste management and reduce consumption in Estonia (and around the world).

We are students of Interaction Design Methods at Tallinn University trying to understand how users think. We have an idea on how to reduce global waste and we starting with Estonia.

Even if you aren’t from this country, your suggestions and feedback will enable us to understand what users want and create better tools to improve waste management and reduce consumption.


How to fill this survey?
  • STEP 1 – READ ANY ONE OF THE THREE FOLLOWING SCENARIOS
  • STEP 2 – PROVIDE FEEDBACK

Scenarios

Scenario 1: Actor – Triin
Triin, a busy mother of two, and her husband have decided to clean up the garage during the weekend to make room for their children’s bicycles. At the moment, the garage is occupied with many baby products like cradles, cribs that were bought not so long ago and are in perfect working condition. At first it was decided to discard these products by selling some and recycling the rest. However, Triin had a change of heart and now wants to give these products to expecting mothers in her city who cannot afford such products.

Triin and her husband start making calls to people from their work and social circles asking them if they know of an expecting mother who would need products like these. Later, they start taking pictures of the products and upload on their facebook profile. They wait for many weeks but received no call back. Triin looks for NGOs that would be interested in such products but there is nothing close by. They are in the neighboring cities.

She looks for websites to give away these products for free. She finds a website called osta.ee which allows people to auction their products but it works on the principle of “highest bidder wins”. After much difficulty to use, she finally manages to lists her auction price at 1euro per product listing. Unfortunately, this model still doesn’t align with Triin’s ideology of helping those mothers who are suffering through real financial difficulties.

SCENARIO 2: Actor – Martin
Martin, a college student, recently broke up with his girlfriend and his friends have come to see him at his dormitory to cheer him up. One of them suggests him to learn playing a guitar – that will keep his mind off things and cultivate a new hobby. His friend further mentions that there are some great softwares online to learn playing this instrument.

Convinced by this idea, Martin and his friends start looking for cheap guitars online. He is on a very tight budget every month and barely manages his living expenses through government grants and scholarships. He doesn’t need the guitar to be of the best possible quality – just something usable.

His friends start looking online at various websites that sell second hand products and advertorial websites like craigslist for used products. After much difficulty they do find a couple of people interested in selling their guitar and the cheapest one is for 100 euros. Martin still cannot afford this kind of additional money. He speaks to his college’s music institute but they do not loan instruments to students.

After looking everywhere Martin discovers a site where by he can create a wishlist of the
items he wants. He is still disappointed – only if there was a way he could use a guitar for a couple of months without having to pay much!

SCENARIO 3: Actor – Eero
Forty-two year old Eero and his wife start fighting. She further taunts him for being lazy and avoiding responsibilities. Its been over 6 months since she asked him to get rid of the unwanted chairs. Eero needs to drive down to the recycling facility which could easily take about 1-2 hours of his time back and forth. Eero works at the bank throughout the week. Towards the end of the week, on the weekend, Eero is too lazy to get out of his couch.

Eero wants his wife to stop nagging him. He calls a few friends asking them if they want some used chairs. Nobody responds. He decides to throw away the chairs by keeping them near the trash can but nobody collects it the next day. It’s not the company’s responsibility – this kind of trash needs to be taken to recycling facilities.

Eero looks for websites where he could connect with someone who would be interested in these chairs. He wishes there was some way – someone could pick this stuff up – he doesn’t even mind paying them a few euros to save him for the extra effort! He finds a few websites whereby he could list his product for sale but finds it way too complicated to create a product and upload a product. Eero is bad with computers – he barely understands his smart phone. He needs a simple and usable way to connect with someone who would be interested in these chairs.


You personal data will be kept confidential and will only be shared with the members from Tallinn University actively involved in this project.

Reuse before Recycle: Think before you throw

Assignment 1 – Reuse before Recycle: Think before you throw Interaction Design Methods
Reuse before Recycle
Reuse before Recycle. Image Source: http://www.disk-demolition.co.uk/

As European society has grown wealthier it has created more and more rubbish. Each year in the European Union alone about 3 billion tonnes of waste is thrown away – some 90 million tonnes of it hazardous. This amounts to about 6 tonnes of solid waste for every person!(1) Per capita waste generation in OECD countries has increased by 14% since 1990, and 35% since 1980. As trends show we are doubling our waste almost every couple of decades. It’s utopia to think that this lifestyle of “Use and Throw” will be sustainable for the planet. We simply don’t have the resources.

We often buy stuff that we don’t need or only need once and then throw it away. It’s absurd when we throw away perfectly functional thrown away for reasons like ‘changing apartments’ or ‘lack of space’ or ‘Out of style”. It’s evident that we live in a consumerist society. But what happens to these products after they have been bought? What happens to them after they are done with? The life cycle of a product isn’t just from manufacturing to supermarkets and then to home. Almost all products end up in landfill somewhere where the product spends far more time in comparison to other phases of the product life cycle.

Reuse before Recycle
Waste Management Pyramid. Image Source: Wikipedia

Of course a lot of products are recycled but it’s not easy to recycle products. It costs a lot of resources like transport fuel, water, energy to bring a product from it’s disposing facility to the recycling plant. There is not pride in recycling. Recycling is a result of bad design. Before we recycle, we must learn to reuse. Unfortunately, there is NO money in reusing. There is just no profit in it. Have you ever seen a billboard or a watched a TV ad or seen a handout that encouraged you to reuse something instead of buying it? Our media shapes the culture of a our society. Almost all media products are backed/sponsored by corporations that want you to consume something. It makes perfect business sense for almost all manufacturing companies to encourage users to recycle but not reuse. Reusing something drops sales! So how do we promote people to reuse items instead of throwing them away?

So, here’s where the idea comes in.

BeforeIThrowItAway.com

How does it work?

  1. Download the BITIA application for your smart phone. Enter in your personal details like name and address.
  2. Every time you spot an unwanted item in your house that is in working condition and you want to throw away, just open the app and click a picture of that product.
  3. Enter the available pick up time. E.g. This product can be picked up from: ADDRESS between DESIRED TIME SLOT.
  4. Enter deadline. This is the amount of time you are willing to wait before you throw it away.

So what’s the incentive for the user to just give away a product rather than throwing it away? Well, there are a few.

  • Often, disposing items like furniture or home and kitchen requirements cannot be easily disposed. Many local municipal bodies do not allow certain items to be thrown in the trash. There are special facilities where the user must go to dispose these products. Having someone, who is interested in using the product, to pick up the product from the users doorstep would be more convenient and time saving!
  • There is always joy in giving. In recent psychology studies, it was found that humans actually feel happier when they give.

the part of the brain that was active when a person donated happened to be the brain’s reward centre—the mesolimbic pathway, to give it its proper name—responsible for doling out the dopamine-mediated euphoria associated with sex, money, food and drugs. Thus the warm glow that accompanies charitable giving has a physiological basis.(2)

Conceptually, it has a very simple flow. However, the technologies that will power this need to be a bit more complex. Every product that is uploaded via a smartphone should be available on the web on BeforeIThrowItAway.com where the listings will be available as any modern ecommerce site. The site needs to further show results as per area and proximity of the user who in interested it picking up the product.

A lot more needs to be analysed and studied in the course of development of this idea.
As human beings, we will always have unlimited wants and to fulfill these wants we keep purchasing different products. There is a dire need for us to alter the way we spend.

Sources:
(1) http://ec.europa.eu/environment/waste/
(2) http://www.economist.com/node/8023307