(1) Summarize the project goals, context, and stakeholders

Introduction:

The SmokeFree app was really complicated, and its features weren’t easy to understand right away. The lack of clear explanations during the onboarding process made it even more difficult for users to understand the functionalities. To address these issues and enhance user experience, our project focuses on creating a comprehensive tutorial that simplifies the onboarding process for users. With this tutorial, we want to make Smokefree Diga easier to use and help users understand how it works. We believe that a seamless and straightforward onboarding process is crucial in motivating users to engage with the app and stay committed to their journey towards a smoke-free life.

Our main stakeholders are current people who want to quit smoking. The redesigned onboarding process aims to motivate and support them in their journey towards a smoke-free life with the SmokeFree Diga app.

Activities:

In this project, our main goal was to improve the onboarding process of the SmokeFree Diga app. We started by researching and choosing the app because that had room for improvement. Then, we looked at the challenges and the different people who use the app (stakeholders) – current smokers and those trying to quit.

To understand the users better, we collected data about smoking behavior and interviewed three smokers to hear about their experiences and needs.

With this information, we created fictional characters (personas) to represent typical users. This helped us design with users in mind. In addition to creating personas, we also crafted a scenario for one of the personas to provide a realistic context for the user’s journey within the app. The scenario helped us visualize how the app would be used in a specific situation, making the design process more user-centered.

To focus our efforts, we wrote a clear problem statement about the issues users face during onboarding. Then, we made a hypothesis statement to propose solutions and how they could help users.

Problem statement (related to our persona Sabine):

Sabine needs a way to register easily in the app and to get a simple and understandable introduction because she decided to quit smoking, but due to her limited experience with smartphones, she could be overwhelmed by the many features of the app. We know that this is achieved when Sabine regularly uses the app and its functions.

Hypothesis statement (related to our persona Sabine):

We believe that by creating a good introduction for Sabine, we will achieve an easier onboarding for users so that more of them start using it regularly with understanding of basic app functionality.

Using sketches, we explored different ideas and got feedback. We also created a Low-Fidelity-Prototyp with Figma. This helped us refine our designs.

We made two main user journeys to show how users would go through the app’s key features. With that, we created a high-fidelity prototype that looked more like the final app.

To check the usability without user involvment, we used Nielsen’s usability heuristics to see if there were any problems with the design.

Finally, we tested the new onboarding process with five users in a usability test to see how they interacted with it and if it worked well for them. We used UEQ in its short version as the questionnaire. We also asked the testers to apply the think-aloud method during the usability tests.

(2) Summarize your test results.

• What method(s) did you use to evaluate the results of your usability tests?

We decided to use Thematic Analysis to evaluate the usability tests. This method is designed to handle large and unstructured amount of data. With this approach, we can efficiently organize and categorize the diverse feedback and observations gathered during the usability testing phase. By using Thematic Analysis, we aim to gain valuable insight into user experiences and identify current issues as well as opportunities for future improvement. In our case we grouped the feedback into the topics: problems with dashbord, separation of tutorial from the app, issues with original app design, and other comments.

• How did you evaluate the results?

By collaboratively analyzing the data with the project team, we identified recurring usability challenges, potential improvement opportunities, and key insights into users‘ experiences.

• What did you learn from the testing? What are your main takeaways? Please list these takeaways.

1. Usability test is not the best way to test for our problem
2. The consistancy of our prototype is not as good as we thought
3. Tutorial design is not as easy as we thought
4. Description texts need to be clearer and give more background information
5. Tutorial can be seen as a different mode of the app
6. A lot of usability tests back to back are exhausting
7. A lot of functionalty of the original app is confusing, but we didnt want to change because it was not a directly related to our prototype and goal of the whole project

Affinity diagram

(3) Compare your results with the defined problem (problem statement) you wanted to solve.

• To what extent have you been able to meet your goals? Discuss it.

We think that we were only able to partially meet our goal. The usability tests were not the best method to test the effectiveness of the tutorial. We did not test how much of the tutorial the users were able to understand and jow much they could recall. But we think we are at a good starting point to design a good tutorial. We also overerstimated the effort for the foundation of the design

• What would be your next steps? How would you proceed with this project?

If we would continue our project we would continue to improve our prototype. The usability tests helped to give us a new perspective on tutorials as a design option. Especially how and when the introductions to parts of the app will happen e.g. the tutorial is not one „block“ in the beginning but opens when you use a function for the first time. We would like to compare different kinds of tutorial and do more reasearch into tutorials. Furthermore we would like to do more tests concerning the quality of out tutorial.

High Fidelity-Prototyp: https://www.figma.com/proto/vKlEYIkcpOjpLLNpAIOY6F/HCI-first-prototype?type=design&node-id=1-3&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=1%3A3

Heuristic Evaluation Form: https://docs.google.com/forms/d/e/1FAIpQLSfYjptnWvuVZwWnj5XQnChkWsiv-P8ktnyN5SowfupHybUPiA/viewform

(1) Reflect on the results of the heuristic evaluation you conducted in class.

Bei der durchgeführten heuristischen Evaluation wurden verschiedene Bereiche identifiziert, in denen Verbesserungsbedarf besteht. Die Ergebnisse zeigen, dass das Design nicht auf allen Seiten konsistent ist. Das Design einiger Seiten weicht voneinander ab. Die Navigation auf der ersten Seite erfolgt durch Wischen anstelle von Klicken, was ebenfalls eine Inkonsistenz darstellt. In allen anderen Frames ist zum Navigieren bzw. Interagieren lediglich ein Klicken erforderlich. Die Kennzeichnung des der markierten Navigationselemente im Tutorial ist nicht auffällig genug und die Platzierung der Sprechblase des Roboters nicht auf allen Frames identisch. Die Position der „Weiter“-Buttons variiert auf den Sprechblasen der verschiedenen Screens und sollte einheitlicher gestaltet werden. Die „Weiter“-Buttons haben die gleiche Farbe wie andere Elemente, was ihre Sichtbarkeit verringert. Der „Zurück“-Button sollte eine relative Rücknavigation ermöglichen und nicht zu einem bestimmten Bildschirm führen. Des Weiteren wurden Kritikpunkte an der Gestaltung der Roboter-Grafik geäußert, da sie viel Platz auf dem Bildschirm einnimmt, jedoch keine zusätzlichen Informationen bietet. Bei Formularen ist der „Submit“-Button immer aktiv, obwohl keine Daten eingegeben wurden, was den Nutzer verwirren kann. Die Benutzerführung weist ebenfalls Schwächen auf. Bspw. wird der Nutzer beim Klicken auf „Skip Tutorial“ auf der ersten Seite nach keiner erneuten Bestätigung gefragt. Ebenfalls sollte eine Option zum Wiederholen des Tutorials vorhanden sein.

Zusammenfassend erfordern die Ergebnisse der heuristischen Evaluation Verbesserungen in verschiedenen Bereichen wie Designkonsistenz, Platzierung von UI-Elementen, Sichtbarkeit von Elementen und Benutzerführung. Diese Punkte sollten bei der weiteren Vorgehensweise berücksichtigt werden, um eine bessere Benutzererfahrung zu gewährleisten.

(2) Continue to improve your high-fidelity prototype.

Improvements / Areas we worked on:

https://www.figma.com/proto/vKlEYIkcpOjpLLNpAIOY6F/HCI-first-prototype?type=design&node-id=1-3&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=1%3A3

(3) Prepare another round of heuristic evaluation  (this time you test the interface of another group)

(4) Reflection

Wer hat welchen Beitrag geleistet?

Wir haben uns die einzelnen Punkte, die in unserem High-Fidelity-Prototyp verbessert werden müssen, untereinander aufgeteilt, sodass jeder ungefähr den gleichen Arbeitsaufwand hat.

Was habt ihr gelernt?

Wir haben gelernt was bei der Erstellung eines High-Fidelity-Prototyps wichtig ist und wie man ein Formular für eine Heuristische Evaluation entwirft.

Was lief gut?

Die Kommunikation im Team lief sehr gut. Wir haben und regelmäßig getroffen, um uns auszutauschen und an der Bearbeitung der Aufgaben weiterzuarbeiten.

Was möchtet ihr verbessern?

Wir möchten unser Zeitmanagement weiter verbessern, um zum einen die uns zur Verfügung stehende Zeit effizienter zu nutzen und zum anderen genügend Zeit für unerwartete Änderungen zu haben.