Project #3 - Conceptual & Physical Design

Conceptual & Physical Design

Introduction

In this phase 3, we are moving to create the conceptual and physical design of our proposed product. As a team, we have conducted a few activities such as Crazy 8 minutes, as well as discussion to create the product design that will satisfy our targeted user. We have done a Storyboard for each of the task that we proposed which is easy to comprehend. Then, the Wireframes or prototype of the product application , as well as an interaction metaphor that is easy to understand by almost everyone which will make the application easy and engaging to use.

Storyboards

For each of your THREE (3) user tasks/functions, demonstrate how your proposed solution would be used by your persona within the scenario that you described in Project #2. Hand-sketching is preferred. This means you will have to scan/take a picture of the storyboard and upload.

• Task 1 : automatic rubbish sorter
• Task 2 : notification alert of space in the trash can
• Task 3 : application that can locate and know the condition of trash can

Task 1

1. A group of friends are enjoying their drinks.
2. Then, their drinks are finished.
3. They noticed there was a “Thrasher” smart dustbin.
4. Just a click from their phone, they can throw their rubbish and at the same time recycle it.
5. After a click, the dustbin will automatically open the lid to the right section
6. It also can accept aluminum.
7. And paper too.

Task 2

1. A housewife is loading the dustbin until it is full.
2. There is no room anymore in the dustbin.
3. Her son is watching television in their living room, and suddenly his phone rings.
4. It appears that a notification from the smart dustbin application informs him that the space in the dustbin is full.
5. Her son must take it out to empty the dustbin and ease the waste manager to collect.

Task 3

1. A man is strolling at the mall while drinking a bottle of water. Then he wanted to throw away the bottle but did not know the location of the nearby dustbin.
2. He quickly checks the application to locate the nearby dustbin and it will give the direction.
3. He just needs to follow the direction given.
4. After finding it he can throw away the bottle happily.

Alternative Designs

Each group member should produce sketches of their ideas for interface design through the Crazy 8 exercise. Post each members’ Crazy 8 sketches.

Design #1 - Nabil

Design #2 - Afiq

Design #3 - Alif

Design #4 - Haziq

Design #5 - Nasrul

Voted design elements/layouts

{insert gambar semula}

Wireframes

Task 1: Automatic rubbish sorter

1) This is the login page.

Where users must login to use this app. If, the user doesn't have an account it will direct to sign up page and then re-login to the app.

Figure 1

2) This is the home page.

There are 5 icons that will direct you to a specific page. From the left, the trash icon is to show and check the level indicator of the trash bin. Next, pinpoint icon which is to locate the nearest location of recircle trash bin. Third is the home page icon which will bring to this home page (Figure 2). Next is the recycle icon which will bring you to the next page (Figure 3). Lastly, the right one is the setting icon to manage the setting of this app such as edit the user profile information.

Figure 2

3) 

When you click on the recycle icon it brings to this page where on the bottom site of the page you can see four different buttons, icons and colors. Those represent each type of waste that can be recycled and it auto sorts the waste when the button is pressed. For example, the blue button is for paper waste which when the button is pressed the compartment for the paper trash bin will be opened. Also, the little red icon on the top right page is the notification alert icon

Figure 3

4) 

Figure 4 shows the paper waste icon being pressed and the lid is colored blue indicating that the paper waste compartment is being opened. Users can throw freely into the trash bin and will sort from other waste.

Figure 4

Task 2: Notification alert of space in the trash can

1) 

This is the home page. By clicking the trash bin icon, it will direct to the next page (Figure 6).

Figure 5

2) 

Figure 6 shows a level indicator for the storage of the trash bin. The trash bin is the trash bin that you connected with before. To do it, simply by doing task 1 it will automatically sync through the app and it will also notify you when it is full.

Figure 6

3) 

The figure shows that when we turn on the slider. It will alert you with a notification when the trash bin is full. As long as you have connected to the trash bin, you can get notified by it.

Figure 7

4) 

This is the setting page. Users can change their profile information such as change the username, password and also their profile picture. Also, there are selection of settings to change for example turn on notification, turn on the sound notification. Before turning on the slider on Figure 7 the users must turn on the notification on the setting page.

Figure 8

Task 3: Locate the nearest trash can location and check the condition of the trash can

1) 

This is the location page where the location of the trash bin around you can be tracked. In this Figure 9, there was a search bar to type in your location and some black pinpoint showing where you are based on the search bar.

Figure 9

2) 

Next, after you type in your location on the search bar for example: UTM, it will show you a selection of trash bins nearby. It also shows you the distance, the storage of the trash bin and the rating for the condition of the trash bin.

Figure 10

3) Next, after you choose a trash bin from the selection on Figure 10,

It will direct you to the trash bin page where there is also a progress bar showing the storage of the trash bin. Users can also choose some other options such as navigate, set as favorite and also you can give a rating.

Figure 11

4) 

This Figure 12 shows the information of the trash bin after you click the option navigate in Figure 11. It shows you the location of the trash bin on the map and its distance. Also, some information provided such as phone number, website, address, rating and also the storage level of the trash bin.

Figure 12

Justification of the design

Similarity (Gestalt Principle)

It is used to group some icons for example in Figure 2 which is the home page, on the bottom page is a group of icons with similar designs. Those icons were on boxes and the size is the same. This is to represent the selection of functions to choose on. It is important to make the user feel easy to choose the icons and it is not separated as it will complicate the actions of the user.

Proximity (Gestalt Principle)

Proximity first principles is to impact perception.Things that are closed together are perceived as related more than that are far apart. So that, for example in Figure 3 where the type of waste is put close together but it still can differentiate between the different types of waste for the user to choose. This is because we used different colour to differentiate it.

Consistency (Shneiderman’s Eight Golden Rules)

Everytime a user clicks on the icon, a black bar ring will appear on the icon. This will show the difference to those icons whether it was clicked or not. This design is applied to all icons.

Experience (Gestalt Principle)

Those familiar icons are used to ease the user to choose the correct icon. For example, the magnifying glass icon on the location page in Figure 9 is symbolized as a searching tool so it is used to give familiarity to the user.

Simple Error Handling (Shneiderman's Eight Golden Rules)

On each task, there is a left arrow icon on the top left of the page that functions as a back to the previous page. This simple error handling page is useful for the user to change a bit of detail from the previous page or to make a new action depending on the user's insights. It just a simple back function for the user to use it.

Interaction Metaphors

Describe and justify the metaphors that your group deemed to be the most suitable interaction metaphors for your interface. Come up with 5 or more type of metaphor

1

Man picture metaphor for profile - for users to edit their personal information

2

Gear metaphor for Settings - Users can change the applications setting that suite their taste.

3

Pin-point metaphor for Location/ live tracking - For users to track the truck that is going to pick-up the trash .

4

Home icon metaphor for home page - User can directly go to home page by clicking the icon.

5

Back icon metaphor for going back - For user to go back to the previous page

6

Trash bin icon metaphor for physical trash bin - For user to dump trash in the trash bin according to its type

7

Magnifying glass metaphor for searching - user can search for the nearest trash bin in the area.