Assignment #4 – Human-Computer Interaction I

[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.

(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.

Seiten: 12

[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, P8] Ideation and Storyboard

Problem and hypothesis statement

PROBLEM STATEMENT

Max needs a way to easily choose board games online with his friends because they changed their board game nights to remote board game nights because of the pandemic and are not very accustomed to the online board games. We will know this to be true when we see: The group can choose a board game according to their interests in a short amount of time.

HYPOTHESIS STATEMENT

We believe that by creating a web application that includes a filter and recommendation system for online board games for Max, we will achieve that Max and his friends will have less stress and frustration during their remote board game nights.

2. Task flow with BPMN

Our task flow with BPMN starting from when user has logged in until he/she logs out.
The task flow was created with BPMN.io

Why did we decide to do a task flow with BPMN?

We chose BPMN because the task flow gives us a good overview over the activity order of a user in our web application. Moreover, we chose BPMN because we find it very clear and easy to understand without any unnecessary details. It therefore helps us to focus on the essential aspects of our idea for further steps in our project.

3. Moodboard

Our moodboard. We worked a lot with pictures that we think create certain atmospheres that we also want to have for our application later.
We created the moodboard with jamboard.google.com.

4.-5. Sketches

An individual sketch of how the filter system for the board games might look like.

*Another individual sketch of how the filter system might look like.*

We decided to keep the sidebar with the video chat from the first sketch and the prediction of how closely the shown game matches the filters from the second sketch.

A sketch of how an embedded board game might look like.

*Another sketch of how an embedded board game might look like.*

*And another sketch of how an embedded board game might look like.*

We decided to keep the sidebar with the video chat from the second sketch for the embedded board games as it seemed to us the most useful for different types of games.

6. Storyboard

Reflexion

Wer hat welchen Beitrag geleistet?

Wir haben in Gruppenarbeit die Aufgaben bearbeitet, also haben wir alle zusammen bearbeitet. Da wir für alles shared documents verwendet haben, konnten wir so gut gemeinsam Texte schreiben und das Moodboard, den Task flow erstellen. So haben wir sichergestellt, dass wirklich immer alle ihre Ideen mit einfließen lassen konnten. Für die individuellen Aufgaben haben wir uns jeweils einen Tag Zeit gelassen und uns dann erneut getroffen, um die Ergebnisse zu besprechen. Wir hatten uns entschlossen, dass Ina das Storyboard zeichnet, da wir das Layout am vielsagensten fanden. Wir haben davor besprochen, wie das Storyboard aussehen soll und sie hat nach der Fertigstellung es nochmal mit uns besprochen, sodass wir noch kleinere Änderungen zusammen umsetzen konnten.

Was habt ihr gelernt?

Wir haben unser Wissen über die Darstellung von Task Flows mit BPMN vertieft. Außerdem haben wir gelernt, unsere Idee auf die wesentlichen Aspekte runterzubrechen, damit sowohl der Task Flow als auch das Storyboard auf eine klare (und im Fall des Storyboards sehr bildliche) Weise die Funktionen unseres Projekts darstellt.

Was lief gut?

Da wird diesmal erst individuelle Ansätze erarbeiten mussten für das Moodboard und die Sketches, mussten wir diese schließlich auch gegenseitig beurteilen um auf gemeinsame Nenner zu kommen. Das lief sehr gut, da wir alle sehr konstruktive Kritik gegeben haben, die unsere Idee weitergebracht hat.

Was möchtet ihr verbessern?

Wir haben erst bei dem gemeinsamen Treffen uns die Aufgaben durchgelesen und gesehen, dass individuelle Arbeit nötig ist. Deshalb fänden wir es hilfreich, wenn wir die Aufgabe schon vorher durchlesen würden in Zukunft, um mögliche individuelle Arbeit schon vorher zu erledigen und sie so direkt besprechen zu können.

[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.

Moodboard

Seiten: 123

[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

Leroy beginnt seine Essensplanung und öffnet dafür die App. Ihm Werden die aktuellen auf ihn Zugeschnittenen Tagesrezepte vorgestellt.

Seiten: 12

Assignment #4: Ideation and Storyboard

? Deadline: Monday, 17th May 12 PM (noon)
? Goals: Defining a conceptual model for a specific task and create a storyboard.

This assignment gives you the chance to deepen your knowledge in conceptual model building focusing on tasks. Furthermore, you will create a prototype in the form of a storyboard.

(1) Formulate a problem and hypothesis statement and document it.

Please use the template (page 11+12) introduced in the lab session:

Problem Statement

[The name of your PRIMARY persona] needs a way to [user’s need] because [insight]. We will know this to be true when we see: [this quantitative/qualitative measure].

Hypothesis Statement

We believe that by [doing this / building this feature / creating this experience] for [the name of your primary persona], we will achieve [this quantitative / qualitative outcome].

(2) Conceptual models for task analysis

Choose to create one of the following:
- (a) task analysis with HTA
- (b) task flow with BPMN
- (c) sequence model,
- (d) artifact model, or
- (e) physical model
- Choose according to your project and time constraints.
- You can also choose to do more than one, depending on your project.
- Please justify your choice.

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

A moodboard is a great way to arrange a collection of ideas, screenshots, and inspirations.
Step 1: Each team member is doing individual research for transferable ideas and features.
Step 2: Share your ideas within your team and create one single moodboard.

(4) Create individual sketches.

Now it is time for solutions and first drawings!
Step 1: Look at your moodboards, your persona, your problem/hypothesis statement, and focus!
Step 2: Each person in the team is drawing on paper (drawing on a tablet is also okay!) a solution he/she thinks would solve your problem.

(5) Share your sketches with your team.

Each person should present his/her first drawing to the other team members.
Select features and ideas you think should be part of your prototype.
You can use the dot-voting method again to make faster decisions.

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

Examples and hints on storyboards: 04-2 HCI Iterative Design and Prototyping (page 8)
You should not spend too much time with it, and your solution does not need to be perfect. We will continue working on that!
This step aims to explain your idea/solution using the storyboard to your fellow students.

What tools to use for a moodboard?

Why should we work with pen&paper?

If you choose to do a digital solution, then the chance you will stick to your digital solution, and you will not throw it away or fundamentally change it, is very high. Because you put much effort and time into it, it will be hard to throw it away and start over again. „Fail early and often“ – and that just easier with paper. Please be aware: you are creating this software not for yourself but for future users. The goal is, therefore, to meet the users‘ needs and solving his/her problem.

Moodboard Examples

Moodboards created in Summer Term 2020: