Section 2B

2B Interface

  1. Design Brief

Design requirements 

MiBoard is an interactive pinboard that will make it easier to store documents and creates a well-arranged place with all of the users most important information. To make the MiBoard we need a Raspberry Pi ZERO, Raspberry PI USB, a capacitive Touchscreen, a small HD camera and frames, 32 inch screen.

Input: MiBoard will have a touchscreen so the input will be supported by touching the screen with your vinger.

Output: The materials above will be used for the MiBoard. It will also have audio for opening programs or notifications. The screen will be 32 inch and you can hang the MiBoard on the wall.

Delivery requirements 

The MiBoard is 32 inch and need to have 9 functions: a calendar, to do list, time and date, camera/scanner, documents, tools (drawing, writing, erasing), different lay-outs, creating folders and deleting documents.

  1. Background research
    User Experience

    If you look at the other websites, there are using all the same type of user interface. They have only a menu bar where you can add new posts and paste a sticky note on your page. If you are done you can scrap it but if deleted you can’t find it back anywhere. It is not touchable, only by using a mouse. You need to loschermafdruk-2016-11-01-16-27-39gin to the program every time you want to use it and you don’t have any other options to add time, documents etc. only 1 website offers a video option where you can place movies.

    Visuals

    For the visuals I looked at different websites that offer the same methods as a pinboard. When looking at it you can see that they all have an easy design so people can use it and it’s accessible for lots of different people. There are only website available and no touchable features like we want to do with MiBoard. The visuals are all inspired to be like a pinboard and are not visually attractive or modern. Most of these sites are only for business related things and not introduced to the house holding, this doesn’t exist at the moment.

 

  1. Design prototypes

For the first prototypes I sketched about 60 drawings to figure out what I want, because it needs to be simple to use but not boring to see (picture 1). After the presentation we’ve got the feedback that the icons and board were to basic and needed to experiment more with the design and be more creative.

                                  picture 1

I took the feedback and start drawing again, made new sketches and tested it. Most of the sketches got feedback about their creative look and that it not works for business people because it has to be easy to use (picture 2).

By listening to my testing audience I created the final prototype which had simple icons for the important/everyday widgets like: To Do list, Scan, Documents, Writings tools. The menu, time, filing and calendar have a more playful design.

                                  Picture 2

 

 

 

  1. Design Solution

everything

kleurenpallette

  1. Usability issues

After a lot of testing and re-sketching, the icons are designed to be simple and playful. For the next time I would hire someone that have knowledge of 3D design to give the icons more depth. I tried to put it in, but it is not as successful as I hoped. The outcome of the testing results really helped me to design the end piece, I knew already that something was missing but I could not see what it was. When a few people said that they needed the important icons and widgets to be easy to manage and calming, I knew how to play with it and got more in my comfort zone.

 

Testing

Prototype Testing

I made 5 prototypes in ProtoIO to show to people who would use the MiBoard. During the sketching of new prototypes after the feedback of Phil I decided to show 2 old versions to test and 3 new ones.

I asked people that I know in Ireland and a friend who own a bar in the Netherlands.

Questions:

Where do you click for the menu?

1: 7 out of 9 persons know how to open menu
2: 6 out of 9 clicks on menu in stead of dragging
3: 9 out of 9 start tapping on the screen
4: 3 out of 9 only knew how to open it
5: 7 out of 9 thought that this was something where you can download things

How do you get the icon towards the screen? 

1: 9 out of 9 did the right thing
2: 6 out of 9 click on menu in stead of dragging
3: 7 out of 9 did the right thing
4: 4 out of 9 knew what to do with the icons
5: 8 out of 9 did the right thing

Open a document, how does this work? 

1: did it already for them
2: 8 out of 9 did it correct
3: did it already for them
4: 3 out of 9 didn’t know how to do it
5: 7 out of 9 didn’t know how to do it

What do you think of the icon design?

1: clear but a bit boring, for the documents its nice to see familiar icons but the time can be different also the to do list.
2: sticky notes do not look like it is used for something professional
3: the menu is smart and unique, maybe change the calendar is something smaller
4: the menu is unclear and not the background is too busy
5:The menu looks like a place where you can download apps

Which prototype do you prefer?

1: |||
2:|
3:|||||
4:
5:

20161123_124835 20161123_124856
20161123_12490120161123_125002

20161123_125102

 

Icon testing 

This slideshow requires JavaScript.

Time

1: ||||
2:
3:
4:|
5:|
6:|

To Do

1:
2:
3:
4:|
5:||
6: |||||

Calendar

1: |
2:
3:||||||
4:|
5:
6: |

Documents

1:
2:
3:
4:|
5:||
6:|
7:|||
8:|
9:
10:
11: |
12:

Folder

1: ||
2:
3:
4:|
5:
6:
7:
8: |||||
9:

Menu

1:||
2:
3:|
4:|
5:
6: |||||