[A#6, P5] First interactive low-fidelity prototype

(1) Summarize the feedback you received regarding your storyboard.

Bei den Feedbacks war es besonders hilfreich, von den Kommilitonen mitgeteilt zu bekommen, dass im Storyboard die Filterfunktion fehlte. Diese müsste noch nachträglich eingebaut werden. Denn – hier bezogen auf das Problem Statement und das Ziel der Persona – geht es ja um das Finden einer Route, die 30 Minuten dauert. Die Filterfunktion haben wir in den Klickdummy nicht mit umgesetzt, nur die Schaltfläche hinzugefügt.

Wir haben außerdem Feedback zu unserem Problem Statement bekommen, was uns nützliche Tipps zur weiteren Nutzung am Problem Statement gibt.

Weiterhin haben wir den Tipp bekommen, dass man möglicherweise noch die Möglichkeit haben sollte sich die Route per Fax zuschicken zu lassen.

(2) Develop an interactive paper prototype.

Wir haben uns entschieden, uns stark an unserem Storyboard zu orientieren und alle Funktionen in den Papieprototyp einzubinden, die dort gezeigt und benötigt werden. Das bedeutet, dass man die im Storyboard dargestellten Funktionalitäten auch im Klickdummy ausprobieren kann. Wir haben die Anmelde-Funktion gewählt und den Schnellplaner, mit dem man eine Route planen kann.

Wir haben für die Umsetzung des Klickdummies das Programm Marvel benutzt, nachdem wir zuvor Adobe XD angeschaut haben und dabei keine Möglichkeit gefunden, den fertigen Prototypen später teilen zu können (ohne bezahlen zu müssen). Figma hat uns von den ganzen Funktionalitäten her etwas erschlagen, während Marvel uns einfacher, aber funktional passender erschien.

Die Screens und Module für unseren Prototypen (Klickdummy) haben wir mit PowerPoint oder direkt mit Marvel erstellt. Einige Modulteile, wie Scrollbalken haben wir per Google Search und Screenshots hinzugefügt. Aufgefallen ist uns, dass Marvel die Bilder stets leicht verwaschen darstellt im Bearbeitenmodus; beim Abspielen des Prototypen sind die Bilder schärfer.

Die Verlinkungen der einzelnen Seiten war mit Marvel einfach und ziemlich intuitv. Allerdings fehlt uns das Feature, eine Seite auch auf sich selber verlinken zu können, was aber nicht allzu wichtig ist.

Unser Klickdummy bildet nur den Use Case ab, angemeldet eine Route auszusuchen. Das entspricht unserem Problem Statement von letzter Woche, dem im Storyboard abgebildetem Szenario und teilweise unserem BPMN-Modell. Das BPMN-Modell wird nur teilweise von vom Klickdummy umgesetzt, da es dort möglich ist, auch unangemeldet eine Route auszuwählen – was im Klickdummy nicht möglich ist.

Unser aktuelles Design hat schon mehr Buttons als im Prototypen klickbar sind. Da der Prototyp die Aufgabe der schnellen Routenplanung (Problem Statement) lösen und zeigen soll, ist das im Moment ausreichend. Allerdings könnten die nicht klickbaren Buttons für einen möglichen Tester bzw. eine mögliche Testerin verwirrend sein. Marvel hilft hier bereits, indem mögliche Verlinkungen bei einem Klick ins „Nichts“ gehighlighted werden.

Es fehlt immer noch ein einheitliches Farbschema; wir haben aber Annäherungen zur Primärfarbe, die wir dann auch versucht haben, möglichst für die Primärfunktionen (Routen Planer) zu nutzen – soweit es Marvel zuließ.

Weiterhin werden noch nicht verschiedene Endgeräte und deren Designs berücksichtigt. Der Prototyp bildet nur den Desktop/Laptop ab und keine Smartphones. Außerdem erkennt man noch nicht die Designsprache sowie die Einschränkungen durch die Nutzung von möglichen Frameworks (GUI).

Link zum Prototypen: https://marvelapp.com/prototype/5ah69h7

[A#3, P5] First interactive low-fidelity prototype

(1) Summarize the feedback you received regarding your storyboard.

  • Nur auf Großstädte konzentrieren (vielleicht sogar nur Berlin), weil auf dem Land kennen die meisten Menschen ihre Umgebung schon.
  • Dadurch vielleicht die Schwierigkeitsstufen weglassen und eher die Auswahlmöglichkeit bzgl. schöner Landschaft oder einer kulturellen Tour  anbieten.
  • Angabemöglichkeit einbauen, ob der Nutzer gerne an einem Café, Dönerladen, Denkmal, etc. vorbeikommen möchte.
  • Recherchieren, wo man solche Routen herbekommen könnte. Ggf. Openstreetmap und die Points of Interest in Kategorien unterteilen (kulturell, landschaftlich, etc.)

(2) Develop an interactive paper prototype.

Open link to prototype: https://marvelapp.com/prototype/29hgf98g

Please briefly describe:

  • your prototyping process.

We sat together (online :)) and went through the results of our previous Assignments. We discussed what should be included in this first prototype, how we could implement the above mentioned feedback, and which functionalities should the screen states provide to a user. Then we discussed screen by screen what should be included based on the Storyboard and feedback, and took pen and paper and drew those states. Then we uploaded the screen photos in Marvel App and “programmed” them. 

  • the use case and/or model (task analysis from last assignment) this prototype relates to.

Our Use case describes a user registering an account and logging in to an app, choosing a route, and starting the walk. We have included some changes based on the feedback we have received. 

  • how the storyboard is reflected in your prototype.

The storyboard is heavily reflected in our low-fidelity prototype, in such a way that the prototype itself is based on the storyboard. We have, naturally, expended it and focused a bit more on tiny pieces of each screen state. 

  • self-assessment of potential strengths and weaknesses of this first step into your design space.

In our opinion, our drawing skills are the biggest downside of this whole process. We think we will find it easier and much more motivating to work with online designing tools. However, we realize the importance of walking through the process step by step and making smaller increments with each improvement.

(3) Design rationales

We chose QOS:

REFLEXION

WHO MADE WHAT CONTRIBUTION?

We did everything together in a meeting, we discussed each step in detail while one of us shared the screen and used online collaboration tools. Specifically, when talking about the prototype itself, Marc  and Sebastian took care of pen and paper drawings and Milos was putting them together interactively into the Marvel App.

WHAT DID YOU LEARN?

We have learnt the purpose of low-fidelity prototyping in the designing process. We now understand the need for actually working with pen and paper and not diving directly into the pro designing, because it gives us possibilities to reflect and change things on the go.

WHAT WENT WELL?

General team atmosphere and team work is what we find quite well. We are satisfied with how we do the task division – mostly we do it together. Also working with the Marvel App went cool, really nice and simple tool for such prototyping, even though we would probably switch to Figma in the next phases for more complex prototypes. 

WHAT WOULD YOU LIKE TO IMPROVE?

We would definitely like to move onto next steps, where we don’t have to use pen and paper actually. Even though we find it useful, it is sometimes hard to collaboratively work on such designs without actually being in the same room. 

[A#4, P7] Veritas – Ideation and Storyboard

Formulate a problem and hypothesis statement and document it.

Problem Statement

Mark needs a way to get a balanced overview on a specific topic because he would like to form an unbiased opinion. 

We will know this to be true when we see: can explore different sources for his opinion forming.

Hypothesis Statement

We believe that by building an intuitive overview site showing a range of news articles for Mark, we will double the diverse sources that Mark is using.

Conceptual models for task analysis

To create a conceptual model for the task analysis we opted for Hierarchical Task Analysis (HTA) because the tasks the user has to fulfill fit well into this format and we were already accustomed to this method.

https://cdn.discordapp.com/attachments/834058821948276749/842007298012741632/Sitemap_-_Frame_1.jpg

Find inspirations, analogies, and create a moodboard.

Next, we each worked 30 mins individually to find inspirations and envision what theme our application is supposed to have. Additionally, we look at other solutions out there and thought about how we can differentiate us from existing projects. We opted for simplicity and usability as main focus since this is what is lacking most on similar websites.

https://cdn.discordapp.com/attachments/834058821948276749/842019005766434856/dubidu_-_Frame_1.jpg

Create individual sketches.

After discussing our individual moonboards we again split up and tried to think of how the application should look like.

https://cdn.discordapp.com/attachments/834058821948276749/842658660673257472/2021-05-14-Note-09-03.png
https://cdn.discordapp.com/attachments/834058821948276749/842666485988982805/IMG_20210513_225335.jpg
https://cdn.discordapp.com/attachments/834058821948276749/842666488016011305/20210514_093424.jpg

Condense your results from the previous step into a storyboard.

After presenting the design to each other we decided to integrate the best of everything into our solution. The descriptions below the individual pictures describe the idea in detail.

https://cdn.discordapp.com/attachments/834058821948276749/843476600602361866/20210516_151319.jpg

Reflection

Who did what?

We did task 1 and 2 together as a group. We split and did task three individually and then discussed our individual results again as a group. Next, we split up again to do the individual sketches and later decided as a group how we want out application to look like. Arne then merged our ideas and what we discussed into one big, nice sketch. Clemens wrote the blog post.

What did we learn?

We learned how one can merge the vision of multiple people into one core idea and how we can create one UI where the ideas of everyone are somehow represented.

What went well?

The discussion as a group usually works very well. Everyone gets to share their opinion and we are usually all happy with the result. Also, everyone does their work on-time and with good enough quality such that we can focus on further steps when we meet again.

Where is room to improve?

We are sometimes not a punctual to our meetings as we could be.

[A#6, P4] Ideation and Storyboard

(1) Finish your hypothesis statement and document it.

Problem Statement

Harry Hausen (Bürokaufmann)

braucht eine Möglichkeit eine 30-min lange Gassiroute mit seinem 2-jährigen Schäferhund – innerhalb von 15 min – zu planen,

weil er zeitnah nach der Arbeit direkt los gehen will und vorher keine Zeit hatte, die Route zu planen.

Wir wissen, dass es erfüllt sein wird, wenn wir beobachten können, dass Harry nach dem Öffnen der App in spätestens 15 min mit seinem Hund Gassi geht und nach 30min frühestens zurückkommt.

Hypothesis

Wir glauben, dass wir durch die Vorschau von möglichen Routen mit sehenswerten Orten

für Harry 

erreichen werden, dass Harry und sein Hund eine schöne und zeitlich passende Route gelaufen sind.

(2) Conceptual models for task analysis

Wir haben uns für das BPMN entschieden, da wir uns alle noch nicht damit auskennen und die Chance nutzen wollen, was Neues zu lernen! Und wir finden, dass BPMN für uns den Ablauf mit den verschiedenen Verzweigungen besser darstellen kann. Die Erstellung des BPMN Diagramms war allerdings etwas aufwändiger, da wir dabei auch die Abfolge der Aktionen diskutieren konnten. Zu Beginn hatten wir sehr verschiedene Vorstellungen, wie der Nutzer beim Erstellen der Gassiroute durch unsere Anwendung geführt wird. Zum Ende hin sind unsere Vorstellungen enger aneinander gerückt und wir haben viele Kompromisse gefunden.

BPMN der Aktion: Gassi planen

(3) Find inspirations, analogies, and create a moodboard.

Es folgt ein Screenshot unseres Moodboards. Unsere Ideen/Inspirationen sind hier bunt gemischt. (http://www.gomoodboard.com/boards/4B52wcAW/share)

(4) Create individual sketches.

https://jamboard.google.com/d/1Jj_kHjAtj057SGX4zGAhn4eq3Gfq77QaXvoxhlQfgEM/edit?usp=sharing
Unsere Sketches haben wir, nachdem alle ihre erstellt haben, in einem google jamboard zusammengetragen und dort auch mit der dot-voting Methode abgestimmt (nächster Punkt).

kleiner Ausschnitt der Übersicht der Seiten im jamboard (sind nicht alle gleichzeitig sichtbar)

(5) Share your sketches with your team.

(http://www.gomoodboard.com/boards/qQSqy_P0/share) Hier ist schon eine Zusammenfassung der Sketches, die am meisten Punkte bekommen haben.

derselbe Ausschnitt, nur sieht man hier Klebezettel mit den wichtigsten Punkten (Voting)
Hier sind alle Sketches die wir mit aufnehmen wollen in den Prototypen auf einer Seite gesammelt.

Wir haben uns auf eine Startpage/Landingpage geeinigt, bei der man angemeldet ist und auch auf eine Menüleiste, die, egal wo man ist, immer zu sehen ist. Außerdem haben wir uns zwei Routenansichten ausgewählt: eine für eigene Routen und eine für die Schnellauswahl & das Planen von Routen. Jede dieser Liste an Routen soll man filtern können, wofür wir auch entsprechende Sketches ausgewählt haben. Wir haben außerdem bereits Iconentwürfe und eine mögliche Anmeldemaske. Lediglich das Farbschema haben wir in keinem der Sketches als gut genug befunden und haben uns noch für keines entschieden, aber beschlossen, dass wir die Webseite nach den Features colorcoden wollen.

(6) Condense your results from the previous step into a storyboard.

[A#4, P1] Ideation and Storyboard

Formulate a problem and hypothesis statement and document it.

Jorg needs a way to easily generate recipes from a set of ingredients because he always has leftovers.

We will know this to be true when we see: that Jorg always get a list of recipe suggestions from his ingredients selection.

We believe that by creating a user friendly interface for ingredients selection and clear visualization of the resulting recipe list for Jorg, we will achieve having less leftovers and ordering 50% less food.

Conceptual models for task analysis

We hesitated between BPMN and HTA, but we decided to go for the task flow with BPNM because we estimate that this choice will help us the most analysing our user`s tasks. Even if HTA provides a better understanding which subtask are included, in our current project state we mostly need a better overall understanding of the system. From the choices given BPMN is the best to achieve this because it delivers a clear visualization of the whole lifecycle.

Find inspirations, analogies, and create a moodboard.

Picture sources from left to right: 3 screenshots, pot, fridgepix, no-fast-food sign, tender, supercook.com

Create individual sketches and share your sketches with your team.

With the made BPNM and the moodboard we are able to get a better insight for the processes. Following this insights we created sketches how our app will look like.

Condense your results from the previous step into a storyboard.

Who did what?

We decided this week that the assignments need a very strong interaction, discussion and collaboration. Therefore, we have not spent time on separation and had a long teamworktime. We are happy afterwards that we did it this way.

What did we learn?

All the methods used besides BPNM are new for us. This means we had a lot of hands-on training this time. We have also discovered that the old tool like Miro can be used in a new way and have functionalities previously unknown for us.

What went well?

The teamwork was taff but we think that our time was really productive and efficient: We have a good communication basis and we have a strong common vocabulary in the domain. It was also easy to establish the meeting appointment.

What do we want to improve?

It is very difficult to have a routine during weeks where you are in distance learning because you need to schedule learn time and additional even plan time. We discovered this habit in this week because we still have no fixed day and that´s not the best but still okay.

[A#4, P4] Ideation and Storyboard

Hypothesis and problem statement

Jura Yun needs a way to dynamically arrange examination schemes for legal issues because handling many different schemes quickly leads to confusion. We will know this to be true when we see that organizing and structuring schemes is no longer time consuming.

We believe that by building an app to easily structure and merge these schemes for Jura Yun, we will archieve to lower the effort necessary to handle the examination of legal issues.

Moodboard and sketches

We included our sketches into our moodboard.

Moodboard: http://www.gomoodboard.com/boards/ESd8FPrO/share

Conceptual model for task analysis

We choose a task flow model with BPMN since we are still not sure how we can accomplish the solution for Jura Yun. So, the task flow chart helped us to figure out what design could help Jura Yun in the future. We also talked about features we want to have in our application and which we could think about later.

Storyboard

Reflexion

Who made what contribution?

We met and made the task flow model and the moodboard together with the sketches we prepared before. The storyboard was made by Tobias and I made the blog post.

What did you learn?

We learned, that some conceptual models fit better for specific projects than other. Drawing can help to bring thinks in your mind quite fast on paper.

What went well?

In the meetings we worked together very well. We talked about the new learning unit and its content. We could easily find a date for the meetings.

What would you like to improve?

There is nothing we could improve specifically. We hope we will work together as good as we currently do.

[A#3, P4] Ideation and Storyboard

Hypothesis and problem statement

Melanie needs a way to easily find proposals of nice routes when she wants to go for a walk because she wants to stay health and in the same time she wants to know more about cultural and natural monuments in the city she lives in. We will know this to be true when we see that she successfully takes different routes and meets new parts of her city.

We believe that by building the application for personalized walking routes,
for Melanie, we will achieve improvement of Melanie’s walking habits by making her walks more independent and giving her an easy opportunity to explore the city where she lives in her free time.

Moodboard

Conceptual models for task analysis

We chose Business Process Modeling Notation (BPMN) as a way to graphically represent our task flow. In our opinion it gives us certain advantages over other techniques such as diagrammatical Hierarchical task analysis and other models in contextual design, since BPMN is the most thorough and takes in consideration the underlying technologies we are using (App) in the most detailed way. It helps us determine cycles in our concept and what steps a user might go through using our app.

  

Sketches

Storyboard

Melanie gets a notification reminding her to go for a walk. She clicks it and the App is opened.
Melanie gets asked about her preferences for the walk she is about to take.
The App gives some proposals, Melanie swipes, and chooses the route she wants to take.
The route is ready and she can see herself moving on a map. At the same time,
in the top corner of the screen, App informs Melanie about interesting sightseeing monuments.
When Melanie arrives at her destination (usually back home), she gets asked to rate the route and give feedback.
When she clicks on the statistics, she can now see some basic information about her route: distance, height difference, time span and the number of cultural monuments (buildings etc) she has seen on the way.

Reflexion

WHO MADE WHAT CONTRIBUTION?
We were working simultaneously on this assignment but decided to separate our paths from Task 3 to be able to do the tasks individually. Afterwards we combined our ideas and voted for the most important ones
.

WHAT DID YOU LEARN?
These methods are a good way to start a project, because you get fast results, that will help develop your project in the long run.
Especially the task flow with BPMN is a good way to understand better, what needs to be included and might be important to contemplate. 

WHAT WENT WELL?
Everybody had a lot of ideas and the atmosphere was relaxed, so nobody had to worry about an idea maybe being not that good. We were surprised about how many ideas we came up with because we were really into developing our own ideas at first. Later on, after combining the ideas, we found similarities and felt like seeing the ideas and sketches of the other Team Members has been very inspirational for us.

WHAT WOULD YOU LIKE TO IMPROVE?
Sebastian would like to improve his drawing skills, because he isn´t even able to draw something even remotely close to an hand. We are thinking of opening a GoFundMe page for some drawing classes.
Also, the next time we wouldn’t want to spend so much time on finding the right drawing tool for the second Task (diagrams in general).

[A#4, P5] Sleepy Heads – Ideation & Storyboard

Problem Statement

Andy (salesperson)

needs a way to document, track and improve his sleep

because his sleep quality is really low and he wants to change that.

We will know this to be true when we see that Andy can improve his sleeping quality with the help of various tips and an evaluation of his sleep.

Hypothesis Statement

We believe that by creating an interactive mobile application that can track and evaluate sleep as well as offer various relaxation methods

for Andy,

we will archive that Andy will get an insight in his sleeping behaviour and improve his sleep quality.


Conceptual model for task analysis

We chose the BPMN model to visualize the task flow of our mobile application to get a better understanding how the user would navigate through our app.

BPMN

Moodboard

Individual Research – Angelika
Individual Research – Tanita

Individual Research – Yasemin
Final Moodboard

[A#4, P2 Ideation and Storyboard]

1. Hypothesis Statement and Problem Statement

Hypothesis Satement

We believe that by implementing an ingredient filter and the possibility to memerize the unused ingredient for Leroy we will achieve more satisfaction in the recipe suggestions, more time savings, and less stress while searching for recipes.

Problem Statement

Leroy needs a way to filter his recipes for ingredients because he suffers from a serious lactose intollerance and an apple allergie and is too busy to spend much time in research for suitable recipes. We will know this to be true when we see him being more motivated to try out new recipes because its easy for him to find them.

2. Conceptual Models for task analysis

We decided to use  Business Process Modeling Notation (BPMN) as the way to illustrate our taskflow. The main reason was, that we need to display many decisions the user has to make to get to the wanted result. BPMN seemed to be a good and simple solution for that and also manages to show it in a more clean manner than other diagram types.

Moodboard

Sketches

Probleme: Viele Sachen werden weggeschmissen, viel Zeit geht für Rezeptsuche drauf,
Lösung: App lässt einen Rezepte individuell filtern und erleichtert so die Rezeptsuche.

Storyboard

[A#3, P1] Requirements

Analyze your (qualitative) data using affinity diagramming

We did the analysis firstly with the interview… (in Miro)
and afterwards added some insights from the application.

Derive a primary persona from your data-gathering insights

The Photo is made with a GAN. The document is made in xtensio with their provided template.

Create scenarios

Scenario 1
Jorg does the groceries each Saturday after he finishes doing the chores. Jorg is used to coming back home from work exhausted and not in the mood to cook especially that he used most of the ingredients he has bought last Saturday. For this exact reason, Jorg had the habit to eat outside or order food on Thursdays and Fridays.
After he installed HelloFridge, Jorg rushes to her kitchen every timeshe arrives home from work, opens his fridge and his kitchen closet, and starts creating an ingredients list in the HelloFridge application. After finalizing the list and clicking the confirmation button, Jorg will see a variety of recipe suggestions that he can choose from.
When
Jorg does the groceries each Saturday after he finishes doing the chores. Jorg is used to coming back home from work exhausted and not in the mood to cook especially that he used most of the ingredients he has bought last Saturday. For this exact reason, Jorg had the habit to eat outside or order food on Thursdays and Fridays.
After he installed HelloFridge, Jorg rushes to his kitchen every time he arrives home from work, opens his fridge and his kitchen closet, and starts creating an ingredients list in the HelloFridge application. After finalizing the list and clicking the confirmation button, Jorg should see a variety of recipe suggestions that he can choose from.
Where
Jorg does the groceries each Saturday after he finishes doing the chores. Jorg is used to coming back home from work exhausted and not in the mood to cook especially that he used most of the ingredients he has bought last Saturday. For this exact reason, Jorg had the habit to eat outside or order food on Thursdays and Fridays.
After he installed HelloFridge, Jorg rushes to her kitchen every time he arrives home from work, opens his fridge and his kitchen closet, and starts creating an ingredients list in the HelloFridge application. After finalizing the list and clicking the confirmation button, Jorg should see a variety of recipe suggestions that he can choose from.

Scenario 2
Jorg does his weekly groceries on Fridays on his way back from work. Directly after arriving, Jorg starts arranging the food products in the fridge and kitchen closet. During this process, Jorg opens HelloFridge to create an ingredient list. After finishing, he should get a list of possible recipes as result. By selecting a recipe, Jorg can add the recipe to favorites or plan it in the calendar.
Each time Jorg confirms a recipe to tell HelloFridge that he has cooked it, the ingredients can be subtracted from the current ingredients list and new suggestions should get generated from the updated ingredients list.
When
Jorg does his weekly groceries on Fridays on his way back from work. Directly after arriving, Jorg starts arranging the food products in the fridge and kitchen closet. During this process, Jorg opens HelloFridge to create an ingredient list. After finishing, he should get a list of possible recipes as result. By selecting a recipe, Jorg can add the recipe to favorites or plan it in the calendar.
Each time Jorg confirms a recipe to tell HelloFridge that he has cooked it, the ingredients can be subtracted from the current ingredients list and new suggestions should get generated from the updated ingredients list.
Where
Jorg does his weekly groceries on Fridays on his way back from work. Directly after arriving, Jorg starts arranging the food products in the fridge and kitchen closet. During this process, Jorg opens HelloFridge to create an ingredient list. After finishing, he should get a list of possible recipes as result. By selecting a recipe, Jorg can add the recipe to favorites or plan it in the calendar.
Each time Jorg confirms a recipe to tell HelloFridge that he has cooked it, the ingredients can be subtracted from the current ingredients list and new suggestions should get generated from the updated ingredients list.

Model two Use Cases with UML

Simple Use-Case of using HelloFridge when having Leftovers
Using HelloFridge directly after buying food products

Who did what?

In this week we worked close together since the tasks required a lot of comunication and discussions. It’s difficult to identify the real difference.

What did we learn?

We discovered the new methods which we had first in the live session. We also practiced the skills which we got introduced during „Software Engineering“.

What went well?

Our communication is very good. We have a good common language regarding all our project tasks and it’s easy to share opinios, even during online learning.

What do we want to improve?

In the next week we will try to keep a better work book since our current Miro workbook is filled with the challenges from all the weeks before and that’s not clear anymore.