Web Application Prototype (High-fidelity)

Interaction design and prototyping journal part 2

This journal serves as a documentation of our thinking processes and learning throughout the high-fidelity portion of our IDP course.(Applications used: Figma, Loop11,iMovie)

Appreciation

Let me first start the journal by thanking my instructors at SMU for helping my team to look at things from a different perspective. I would also like to extend my gratitude to my teammates who were relentless in their pursuit of perfection throughout the overnight project sessions.

Introduction

In this journal entry, I will be including the rationale and step-by-step processes my team took during our high-fidelity prototype journey. These are the steps taken to achieve our high-fidelity prototype:

1. Heuristics Evaluation of the low-fidelity prototype
2. Prototyping Considerations (prototyping tool, prototyping design)
3. Actual prototyping using Figma
4. Evaluation (Lab study and web experiment)

Heuristic Evaluation of the low-fidelity prototype

Using Nielson’s 10 Heuristics evaluation, our evaluators were able to spot mistakes and categorized them into the following categories: Usability catastrophe, Major Usability problems, minor usability problems, and cosmetic problems. These categories are created as it helps us to distinguish the most pertinent problems from the trivial issues, allowing us to save time and target usability issues.

Prototyping Considerations

1. Prototyping tool
   There were many prototyping tools at our disposal. Eventually, my team went ahead with Figma as it was able to provide real-time movements by each of our members, and Figma was fairly easy to use with many Youtube tutorials.
2. Prototyping Design
   Despite being a prototype, every aspect of our web application prototype was scrutinized. From the color of the buttons to the amount of spacing between each box, we all had special considerations for them. These considerations are:

Actual prototyping using Figma (low-fidelity prototype → high-fidelity prototype)

Evaluation (Lab study and web experiment)

1. Lab study
   Method
   As part of the planning for our lab study, we would first determine the goals that we want to achieve — perform functional testing on our prototype and evaluate through verification and validation. Following that, we would then determine the user-profiles and the number of users that we want to recruit for the study. Users recruited for the study would then be given a form to ensure informed consent before performing the pre-test questionnaire. They would then complete the tasks given to them and end off with a post-test questionnaire.
   Number of participants
   We recruited 4 participants initially to conduct our laboratory study. However, after consultation with our instructors, we realized that the tasks in our lab studies were too specific. As such, we looked back at our task, and heeding our instructors’ advice, drafted out a set of more generalised tasks. We then sourced another 4 participants to do our lab study. Therefore, we had 8 participants in total. This caused us a lot of time but it was fortunate that we were able to spot that mistake on time and gained a more fair evaluation of our web application.
   Ethical considerations
   We ensured that our participants won’t be coerced into doing our lab study and ensured their anonymity.
   Environment
   We conducted the lab study at places like SMU’s group study room and participants’ houses. This is because our persona is an SMU student and there may be a chance he will schedule tuition slots while he is studying. Other than that, he will probably be scheduling tuition slots during his free time at home.
   Thinking aloud method
   Our participants were encouraged to speak up and walk us through his thinking and decisions. This was especially helpful for us as we would know which part of the application is unclear or whenever there is a dilemma faced. Despite the long time taken for this method to work, we went ahead with it as the decision process helped us pinpoint unclear segments of our web application.
   Transcription
   To better understand our participants and ensure that we do not miss out on any crucial information, we recorded our participants while we conducted the laboratory study. After the lab study, we referred to the videos repetitively to capture any hidden message or any change in the facial expressions of our participants. This proved to be very beneficial as we were able to zoom in on the problem our participants faced and find solutions to remedy them.
2. Web Experiment (B/C testing)

We performed our web experiment using a between-subject design as it was important for us to compare the differences in time completion and the number of clicks taken. For a web experiment with a within-subjects design, the results would be unreliable due to ordering effects as the participants would have learned where the ‘edit’ button would be located and its function to confirm our hypothesis, we conducted a pilot experiment with two participants using the ‘within-subjects design’. The total time is taken and the number of clicks has significantly decreased for Treatment C design compared to Treatment B. We realised that the results would be unreliable if we adopt the within-subject design. Therefore, the between-subject design has been chosen for our web experiment. By allowing half of the participants to use one system and the other half to use another system, there were no ordering effects due to the learning effect and fatigue. Even though we need more participants, we believe that we should still conduct the study with 30 participants per group, as it would give us an approximately normally distributed mean and enough data to be able to generate insightful analysis.

Variables
Independent variable(treatments):
By implementing an ‘edit’ button in the tuition session, it will be obvious that the updated prototype (Treatment B) is better than our lab study prototype (Control).

Therefore, our team decided to compare using two versions of the updated prototypes (which is shown below.) The main objective of our web experiment is to test the total time taken for the user to reschedule a tuition session.

Within the homepage, the buttons will be changed in the different treatments to test the number of time users take to understand.

• Treatment B will display a lexicon ‘Edit Button’ beside the cross button.
• Treatment C will display a metaphor

Dependent variable:
For the dependent variables, we have chosen the total time taken for the user to reschedule a lesson.

Insights from web experiment

• Task completion time
• Accuracy
• Recall
• Emotional Response