- Notes taken during class

High fidelity and low fidelity prototypes
From this project we aspect you to not create something that is as finished as possible just go through the process a couple of times (at least two). Clients in general will often insist on staying in the concepting stage long and waiting for the last moment to go into the prototype and testing phase. This is why designing through making a topic that we find hot within the academy while in practice its hard to kind of give it a place.

Concierge testing - low fidelity
It's a way of testing where you don't really develop anything yet but you just bounce your id of your users. What does my target audience think of this. Can give a lot of insights like ow people don't actually need this. This is one of the first steps that can actually help you, like talking to the
audience and asking question like that they need in a design.

Wizard of Oz testing - low fidelity
Where Oz testing is a way of testing where you don't have the tech finished yet but you pretend that you have. Instead of like building a whole program, you can preform in manually. What is the littlest thing you can do to make it seem like you have a fully fledged prototype of your product to your consumer.

Paper prototype - low fidelity
Much more common in UX design is the paper prototype. What you do instead of going all the way into detail of designing a full interface you make a sketch with buttons and interaction that you've planned and test its functionality it's a way of testing your idea very precisely and see where you missed an opportunity of functionality this can create a conversation with much more detail about what the thoughts are and what is missing can lead to very specific details for your project.

First class with Arjen

During the first clas with Arjen we got a intro to UX design
- Notes during class:
UX = User Experience, It's used both during non-linear and interactive design, and is applicable to any communicative design.

We where showed a parking garage, with lights that turned red when a car was parked, so you could see from afar that you shouldn't drive there because there's no spot left. Arjen then explained how this in a way is the buildings UX design.

UX design is made for interacting with the public.

Then was explained that it's hard to design something for everyone. Many things have to be taken into account and therefore many things are added. Therefore it mostly doesn’t make the usability easier.

Assignment during class: Create a flow chart for your interface with your usergroup in mind. Since at the time i had no interface yet i was allowed to make a flowchart for a different app and i choose duo lingo.

We had workshops at school surrounding a adafruit arduino circuit. For this workshop we had two classes, the first class was more of an installment + introduction class where we got to know the circuit and do some basic coding with it and the second class was more indept whit it's uses and intentions.

During the first class we recieved a adafruit arduino circuit, and some arduino software so we could start working with it. The adafruit circuit has many different sensors build into it, it can detect light, motion, temperature, but it can also produce sound and has many different led indicators on it. The first class started of with the coding of these led's by trying to get them to turn on in the arduino coding program. After we were succesfull in our coding we where asked to try out some different sensors on the circuit, the one that was pitched was sound. I think this was a mistake as for the rest of the workshop one could hear screaming adafruit circuits through the classroom.

During our second class we got more indept with what the posibilitys of the circuit truly where. We expirimentented with its directional sensors and using them to draw on a canvas. After we were giving all the imput to have a complete gif. We where then tasked to make the gif move based on sensory imput like light or movement.

The complete workshop was very interesting to me and i found it fun to expiriment with coding and the adafruit circuit. This workshop gave me some inspiration for my own project, and i think i want to include a physical aspect to although im not sure yet about what that could be.

I don't want to use the time excuse but im going to, i think its on a to short notice for me to learn Java or Phyton script to be able to create something with it that would be satisfactory to my concept in mind. So im not going to use it this time.

When thinking of a concept to create with what i've learned during the workshops i came up with a sort of route tracker/checkpoint collector. My collection is from staats bos beheer, and it has a focus on nature routes for expats. To make these routes more fun to walk, why not make them interactive?

The basic concept.
First one would choose a road they would like to explore, next the navigational data of this road is uploaded to the ada circuit, next to this is that along side this route there are some sights to been seen and some open art installation to be found. When getting close/in distance with these ''check points'' you circuit will make a little hum that gets louders the closer you get to the installation or sight. When beign within a certain distance of this ''checkpoint'' the circuit would play a little ''victory tune'' and you would have achieved one of your objectives. It would like something like this:















So in practice of this concept there would have to be a place to pick up the circuit, then walk the route, hand back in the circuit + get possible reward for completetion and then you would be finished.


Another concept i thought of was to create an sort of art installation, that would be in constant battle with itself. I would have to rig lots more led's to the circuit but thought it would be funny, and perhaps interesting to create an artwork that would function on the light detecable sensors from the circuit.
Both art works would sensor light, When one would detect a light source it would light up itself, but upon detecting light it would shut it's lights of. This creating some sort of undening blinkin effect that would continue untill someone where to power it down or the sensors would stop funtioning. It would look something like this:

Classes and workshops

Workshop with Nan

Deliverable/concept for the interaction station.

Second class with Arjen

Testing the prototype

Adobe XD - Low fidelity
adobe XD is at the moment the most convenient to create a prototype that has a higher fidelitywell in no way exportable to a real app it makes you feel like it does exist and it gives the ability to test it more wide spread as you can send people the prototype over the internet and aren't limited to the paper prototype. You can do things in much more detail than in a paper prototype. This is specifically for digital media whereas in a paper prototype can serve more than that.

Hotglue - high fidelity
Common use for creating a high fidelity website prototype. Its much easier to export a hotglue website to an actual website compared to adobe XD.

Wix, Cargo, Squarespace - high fidelity
You are limited to a template to is dangerous to use. You don't have full creative control. But they can be used to create professional websites

HTML & CSS - high fidelity
before you start with this you might want to go though different prototypes since coding takes a lot of time. So it lessens the time you have to experiment with that. As a proof of concept very good, but not necessarily recommended

Insta, Snap, Tik, You,Twitter high fidelity
if you use an existing platform it doesn't need much time to actually execute it but it allows you to test out your concept on you audience straight away. When you just want to contact your audience this can be very handy and straight forward way of communication with your audience.

In the end you need valuable feedback from the prototype to be able to reassure you can actually make the prototype to convince the teachers that you can make it and it would work in the reality. You need to prove that it works for your users and its possible to
create technically

Testing of screen with Cindy

I'm lucky to share my house with an graphic designer, and i found it fitting to get my first test out of the way with my girlfriend. She's in contrairy to random people not afraid to give me hard critism if something is wrong, not working or missing. Because i feel this is most usefull in the developmental stages of my prototype im doing a UI/UX test with her.

Adobe XD has an online forum where they give tips on the best way to UI/UX test so i took some pages from their book. They gave the advice to have a task list for participants to complete so i created one:

Task list
- Find how to plan a route in the app
- Find the chat function of the app
- Find where to rent a piller of creation

For the screens that i've had made so far these task seemed like a do-able thing to ask for. Second tip from Adobe was to make a list of questions to ask before, during and post the test.
In this case it wasn't nessesary to create a post questionaire, because i know everything about the person im testing already, but in future testing this will be usefull. The questionaire i created is as follows:

Questions to ask during the test,
- So far, what features do you find most valuable and why?
- What do you think about this design?

Questions to ask post the test,
- How difficult are these test assignments? (scale 1-5)
- Was the interface easy to navigate? (scale 1-5)
- Would you be interested in this service
- What do you expect to see from the product in the future

Then for questions to ask after the test, i would have a general intervieuw adressing questions once more trying to get more clarity out of earlyer given ansers. This is also the time where i would ask for aditional feedback from the person i was testing. I documented this in a indesign file during testing and you can find the results to the right.

A very simel conclusion i could draw was that its hard to test a prototype that isn't fully developed. What was usefull about it, is that i got to hear what the app was missing rather than what was wrong directly, so i could compare what was missing to what i had already planned to make.

I did gain some insights about my existing ui, one insight i gather was that a menu bar that doesn't go away during navigation is a easy way for people to navigate when they think they went the wrong way.

Very usefull information that i could gather that i hadn't planned prior to do is to create tutorial screens that would explain the application for the users. It's kind of a big thing to just ask people to understand what it was about.

Conclusions

Testing the prototype V2

Testing of AdobeXD application with Ieva, Efki, Kamile

For the testing of my AdobeXD prototype i got to test people who where actual expats. I would have liked to interview only people from school but in the later weeks people where very busy with their own projects so i had luck that i had the change to be able to test 1 person from my actual user group, a student from another school who's also an expat and just a working expat.

Because i now had an actual working application, it proved way easier to test. In contrairy to my prior testy i wanted to gather some additional information from my users. For this i created additional questions for prior to the test, during and post mortem.

During this testing fase i would also not like to say anything during testing and let the app speak for itself. Then when questions apear i can anser them or find out what i still have to change.

The results of the test can be found on the right

Im very pleased with the results i've recieved from testing. Other than some harsh critism on colours by Efki my app seemed to work in order and the ui was understandable enough so that 3 people 2 of them with no design background could understand it.

There were some interesting points of feedback made though, Efki for instance adressed that some buttons where to small for his liking and i have to agree with him so thats something i need to work on.

A second point of feedback was regarding the tutorial also made by Efki, he made a comment that the europian power socket is not international so no everyone is going to understand that icon in particulair.

When look at the way the testers navigated the application i could see them making use of the menu bar quite often, so i think its position and legitability is good for now. Another notable thing to say about that is that even though i implemented an go-back arrow option they rather used to main menu to return to a prior screen.

All in all theres some valuable points made that i need to adapt.