• What framework or tools are you going to use? Why?

We used Figma to prepare our Hi-Fi prototype. It is a framework that we were familiar with from our paper prototype and there was no issues with working with use of it before.  Figma allowed us to use components based on styled guidelines compatible with official specs.

List your functional and non-functional requirements (features) you are planning to include in your High-Fidelity Prototype.

Non-functional requirements:

• Simple to use (mobile + busy environments)
• Explain the political compass

Functional Requirements:

• Search articles via an URL
• Search articles via topic search
• List view of articles
• View for a single article
• View for the Topic(s)
• View of the political compass
• Statistics view for a topic
• Allow feedback for article placement (article is not e.g. “left-authoritarian”)
• Allow feedback for topic clusters (articles aren’t about same topic)

• Gantt chart

• Start building your prototype

https://www.figma.com/proto/xqMeWV6kxUEShVbQSxePjD/THE-INVINCIBLE?node-id=16%3A14&scaling=scale-down&page-id=0%3A1

Please answer the following question: How did you handle the topics: menu, UI consoles, and Design patterns?

• What menu type did you choose and why?

We decided on slide menu which is inline with material design. As our user group is going to use mainly the platform on their phones, this type of menu will fit the best to scroll through the list of trending topics and article list.

We applied also top navigation for possibility to go to different options after searching an article by URL. Instead of putting everything on one screen, the user can choose what steps to take next.

• Which UI controls are appropriate for your application and why?

As for UI controls we used buttons so the user can explore our platform easily and navigate through it. An example would be search button, which then opens text input field. This is another control in our prototype. Another example of a button is menu button that navigates to submenu.

By using top navigation we implemented tabs for features choose. Links allow user to go to chosen article and read it either on our platform or go specific website.

Radio buttons were used for feedback option to rate the articles placement.

• Which design patterns are suitable for your application and which ones have you implemented or used? Why?

While designing the prototype we were basing mainly on the guideline that we accessed from Figma. These are icons used for the buttons and general layouts. Political compass and all the diagrams were designed by ourselves.

Reflexion

Who made what contribution?

We worked together on the HiFi prototype. Firstly we planned what components needs to be designed and applied. Then we assigned the tasks, so parts of our prototype, and combined them again together. While everyone contributed to the prototype, Daniel and Arne focused more on working with Figma, Clemens did a Gantt chart and Mateusz summed up our work in the blog post.

What did you learn?

We definitely improved our skills in Figma and be able to use more advanced tools included there. There was more components that we need than we expected, but this allowed us to go into detail with our work.

What went well?

Communication with the team went well. We are happy with the direction that we are going to with the prototype. There is of course still field for improvements, but our target should and will be achieved.

What would you like to improve?

After two weeks’ time our prototype could be looking better so we could be further with the advancement of the prototype. It still looks quite basic, but as mentioned before, this will be improved.

(1) Continue to develop (or start a new) paper prototype based on new insights or feedback from your peers.

As there was no testing during last tutorial, we couldn’t gather any feedback to develop our paper prototype.  However, we implemented a few changes compare to last week.

This means couple of more slides on our paper prototype, so the idea and process of working with the political compass by the users is more clear.

https://www.figma.com/proto/AylGS7g48gD2JSY9URiizG/Veritas?node-id=7%3A10&scaling=scale-down&page-id=0%3A1

(2) Conduct (at least) 3 formative usability tests.

SCRIPT:

(1) Hinweise für den User

Small-talk

Disclaimer: “Wir testen die App, nicht dich! Fragen bitte gerne stellen, ich kann aber nicht versprechen, alle Fragen direkt zu beantworten! Bitte laut denken (Think aloud).”

(2) Kontext der Anwendung

Veritas ist eine App, die für alle gesellschaftspolitisch interessierten Menschen entwickelt wurde. Veritas bietet Usern die Möglichkeit, URLs oder Themen einzugeben. Den Usern wird dann ein umfangreicher Überblick über das Thema gezeigt.

(3) evtl. kurzer Fragebogen (Fragen zur Person)

Wie alt bist du?

Was studierst du?

(4) Szenario(s) und 

Du bist auf der Website der NYTimes. Du liest einen spannenden Kommentar zu einem Thema, das dich interessiert. Du findest den Artikel nicht sehr ausgewogen und würdest gerne andere Perspektiven auf dieses Thema einholen.

Benutze die veritas-App, um ähnliche Artikel zu finden. 

(5) Aufgaben

1. Suchen mittels der Artikel URL aus dem Zwischenspeicher weitere Artikel
2. Beschaffe dir eine Übersicht zu einem Thema
   1. Sortiere die Artikel nach “Opposite first”
   2. Schaue dir die Statistik zu diesem Thema an
   3. Finde andere Artikel indem du den politischen Kompass verwendest
   4. Kehre zur Startseite zurück
3. Entdecke weitere Themen

(6) Abschließende Fragen

Hast du noch irgendwelche Fragen oder Anregungen?

(7) Abschluss

Danke für deine Zeit

ROLES

In terms of roles of moderator and observer during the tests we were changing positions each test. The tests were conducted in single sessions, so there was no confusion about that for our participants. We decided that Daniel, Arne and Clemens will be moderators for each test, as they are German speakers. This way the participants would feel more comfortable as they were German speakers and there would be less problems with understanding.

RECORDING

As our prototype is in digital form, all three tests took place online, through Discord platform, where our participants could easily share their screen with the prototype that was provided to them through link during the session. All of us could see how they go through our prototype, while thinking aloud, so there was no issue with taking notes during the test.

WHO AND HOW LONG?

(3) Document and evaluate the results of your testing.

What method did you use to evaluate the results of your usability tests? How did you evaluate the results?

After conducting the usability tests we met for analyse of the results. We went through the notes together and thoroughly talked about them. There were also comments from our side, what we saw during the tests and how do we feel about usage of our prototype. From all these data we gathered, we extracted the takeaways.

What did you learn from the testing? What are your main takeaways?

It occurred that there were some issues with understanding the context of political compass and political spectrum. Some users might be not familiar with those terms and their functionality. As this appears to be a problem, political compass should be designed in the clearest possible way, so there would be no misunderstanding  or confusion for the users. Providing this tool is crucial for functionality of the platform, in order for users to extract the most during building their unbiased view on the topic.

One of the good ideas from our participants was to gather feedback from the users on the articles. Users could rate the positioning and effectiveness of political spectrum. This would help us in developing the platform.

Another problem appeared with the home screen of the platform. Our participants stated that without context it is hard to determine what is it about. This should be improved, however we believe that our users now beforehand what this platform is about and they go for our tool with an idea what do they want to achieve. Our “paper” prototype might have not been clear enough due to our manual skills with creating it.

In our paper prototype we focused mainly on the use case, when the user searches an article by an URL to explore particular topic. Our participants of the usability test pointed that the list of topics to explore should be developed in the prototype. This showed us that users would be interested also in this use case and it is worth to focus on that.

Other takeaways that were discovered from the usability test:

– On what basis is the topic shown on the explore view?

– Clicking on the small political compass on articles should be maybe also implemented in the political compass view

– Articles in Article list take too much space if there were too many articles

– Political spectrum in articles overview seen as key differentiator

Reflexion

Who made what contribution?

The script was prepared during last tutorial and we improved it afterwards before conducting usability tests. On our weekly meeting after tutorial we discussed the prototype again and Daniel made necessary changes. We conducted usability tests in separate sessions, the roles were pointed before in the blog post. We discussed and summarized the data from the tests together and Mateusz wrote the blog post.

What did you learn?

The usability test gave us different perspective on our prototype. For us, everything was clear and understandable as it is our idea and we are working on it for quite some time. As for the person that have first contact with this topic it appeared that some aspects are not that obvious. It gave us a lesson that we need to focus more on presentation of our idea. We do not want the future users to be discouraged by first interaction with our platform.

What went well?

This week there were no delays and lack of communication, so we are definitely happy about that. We improved ourselves on this aspect.

What would you like to improve?

The results from usability tests showed us what we need to work on. As mentioned above, users need to get better idea of the context of the platform.

1. Summarize the feedback you received regarding your storyboard

From the feedback, that we received from our peers, we gathered some clues that we did not think about before.

• The political compass should be explained. The users may not know what political compass actually is and as they are introduced with this idea on our app, they should be informer or guided through it so they can get the most of the experience.

• In our storyboard we showed many features of our app and what user can do but we did not specify what is the landing page when the app is opened. As from this point the whole interaction with our app starts, we should emphasize it more in our prototype.

• The distribution of article count  should be two dimensional. On our storyboard we showed general count of how many articles refers to the topic, but it would be more useful to visualize, i.e. which side of the political compass has more articles . We could use a heatmap for this. It gives overall view which side talks more about particular topic.

2. Develop an interactive paper prototype

https://www.figma.com/proto/AylGS7g48gD2JSY9URiizG/Veritas?node-id=7%3A0&scaling=scale-down&page-id=0%3A1

• your prototyping process.

In our prototyping process we had a look on the feedback we received from our peers. We decided that we will base on what we did in the storyboard. With this as the fundamental part we could include clues from feedback and create a prototype basing on the use case from previous assignment. Instead of many features shown individually on the storyboard we condensed it to simple prototype with Figma web application.

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

In terms of use case we do not lead users what to do, but rather give them options to move around our platform. We do not want to make them read particular articular. After entering their article they get an overview of political compass through tab “Stats”. From there they can choose if they want to read an article and which.

• how the storyboard is reflected in your prototype.

While storyboard showed overall of our apps features, in prototype we condensed it to the case when the user wants to use the app by typing in the article URL and what can happen after that. The protype is strongly based on the storyboard and contains features implemented there.

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

We believe that the idea of our app is quite straight-forward: user types in an article, get an overview of the situation on political compass and reads other articles. As our goal is to achieve unbiased opinion by the user, the app can not be biased in any way to influence the user. With the prototype that we created so far, we are meeting this requirement.

On the other hand it is hard to determine how accurate political compass positioning can be. The question is how to evaluate articles truly unbiased. Also our drawing skills may not be perfect ones, so it is hard to express our idea fully in this type of prototype.

3. Design rationales

To design our rationales for our questions we used structure-oriented technique, QOS.

Reflexion

Who made what contribution?

We met on our weekly meeting straight after the tutorial on Tuesday. We went through assignments together and discussed about the tasks. We gathered all the ideas and prepared draft of  the prototype and design rationales.  As only Clemens attended the tutorial, he was responsible for gathering the feedback from other students. Daniel prepared the design of prototype, Clemens and Arne prepared visualization for design rationales and  Mateusz gathered all together and prepared the blog post.

What did you learn?

Sometimes we have the feeling that we could already go to the next steps and some of the tasks are repetitive. However, we are learning how to be patient and we see advantages of low-fidelity prototyping. We could focus in trivial aspects of our domain and thanks to feedback from other students make changes to our project that did not required stepping back in the design process. At this level we can still form our design and it does not cost us in terms of time and effort already taken in the project.

What went well?

We are happy with how our idea is developing and our understanding of it through different assignments. Apps that are linked in the assignments are helpful and it is easier to visualize what we have in minds.

What would you like to improve?

There was a serious lack of communication last Tuesday and in result only Clemens was present on the tutorial. This definitely can not happen again. Through different aspects we divided our work not evenly on last two assignments and we did not have problem with at a time. However, for our own best and learning the skills from assignments, we need to distribute work better and every week each of us needs to have the same involvement in the project.