Phase 4 - Usability Testing & Prototype Refinement for UUM Barbershop

 

INTRODUCTION

The final phase of our project involves conducting a Usability Test on the UUM Barbershop interactive prototype. The primary rationale for this testing is to evaluate the interface's effectiveness, efficiency, and user satisfaction when utilized by our target demographic. Usability testing in this context refers to observing real users as they attempt to complete core tasks within the app, allowing us to identify navigation bottlenecks and design flaws. By doing so, we ensure that our proposed solutions such as real-time availability tracking and seamless booking are genuinely intuitive and user-friendly before any actual development begins.

METHODS & PROCEDURES

To ensure unbiased and authentic feedback, we conducted the usability test following a structured procedure:

  • Participants' Demographics: We recruited three (5) users from different project groups. The participants are undergraduate students aged between 20 to 23 years old, representing the typical campus community who would frequent the UUM Barbershop.

  • Tools and Equipment Used:

    • Figma (to run the medium-fidelity clickable prototype).

    • A laptop/smartphone for the users to interact with the interface.

    • A secondary smartphone to record the users' interactions (screen and hand gestures) for observational evidence.

  • The Tasks and Scenarios: We provided a brief "Task Sheet" without giving them a manual. Users were asked to complete three main scenarios naturally:

    1. Basic Booking: Log in, find an 'Available' barber, select the 'Haircut' service, and book a 12:00 P.M. slot.

    2. Setting a Reminder: Find the feature to set a 15-minute push notification reminder for the confirmed slot.

    3. Owner Daily Sales Report: Navigate to the Owner Dashboard to view the "Total Sales Today" and identify the top-performing barber.

    4. Service & Price Verification: Select multiple services (Haircut, Wash, and Beard) and verify that the system automatically updates the total price.

    5. Password Recovery: Initiate the password recovery process using the phone OTP method, including an attempt to enter an incorrect phone number to test error handling.

  • Testing Metrics: We measured two main metrics:

    • Task Success: Whether the user completed the scenario without requiring assistance.

    • Time on Task: How long it took to complete each scenario.

  • Overall Procedure: Users were briefed on the application's purpose. They were then given the scenarios one by one. During the test, the team observed silently and recorded the sessions. A short post-test interview was conducted to gather qualitative feedback.


RESULTS & ANALYSIS

Based on the data collected from the three participants, the prototype performed well in terms of visual appeal, but we discovered a few functional friction points.

Task 1: Basic Booking (High Success Rate) 

All five users successfully logged in using their matric number and navigated the booking flow. The real-time green ("Available") and red ("Occupied") indicators were highly intuitive. Average Time on Task was under 45 seconds. 

Evidence: 




Task 2: Setting a Reminder (Moderate Success Rate) 

Two users successfully found the reminder button on the 'Booking Confirmed' page, but one user completely missed it and clicked the 'Home' button instead. Analysis indicates that the yellow 'Reminder' button was placed too far down the screen and lacked visual urgency. 

Evidence:




Task 3: Owner Daily Sales Report (Operational Analysis) 

While the Owner Dashboard successfully displays key business metrics, testers (acting as owners) found the navigation to the "Statistic" tab slightly hidden. They initially tried to look for sales data under the "Settings" menu instead of the dedicated "Statistic" icon at the bottom of the screen. 

Evidence:






Task 4:  Barber Service/Price Selection (Efficiency Analysis) 

While the service selection process was intuitive, users were briefly confused as to whether the "Total Price" updated automatically or required an manual calculation trigger, as they spent extra seconds searching for a "calculate" button that does not exist. 

Evidence:





Task 5: Authentication & Error Recovery (OTP Flow) 

Although users appreciated the simplicity of the phone-based OTP recovery, the process lacked sufficient error handling. When users entered an incorrect phone number, they felt stuck because the interface did not immediately provide a clear path to go back or an option to resend the verification code. 

Evidence: 






IMPROVEMENTS / ACTIONS TAKEN

Based on the usability test findings, we prioritized the most urgent changes and updated our Figma prototype to enhance the user experience.

Improvement 1: Streamlining the "Repeat Booking" Flow

  • Analysis: The "Completed" tab was easily overlooked, making the "Repeat Booking" feature hard to find.

  • Action Taken: We redesigned the "My Bookings" interface. We replaced the subtle text tabs with highly visible, pill-shaped toggle buttons (Upcoming | Completed | Canceled). We also changed the "Repeat Booking" button to a more vibrant yellow to establish a stronger visual hierarchy.

Comparison:

  • BEFORE:


  • AFTER: 



Improvement 2: Optimizing Owner Dashboard Navigation

  • Analysis: Testers acting as owners found the "Statistic" tab slightly hidden, as they initially looked for sales data under the "Settings" menu instead of the dedicated navigation icon. 
  • Action Taken: We increased the visual prominence of the "Statistic" icon by adding a distinct highlight color. We also added a quick-link card directly on the main Owner Home screen labeled "View Today's Performance" to ensure key metrics are accessible at a glance. 
Comparison:

  • BEFORE:


  • AFTER:




Improvement 3: Enhancing Feedback on Price Selection

  • Analysis: Users were uncertain if the total price was updating dynamically as they selected different services, leading them to search for a calculation button that did not exist. 
  • Action Taken: We implemented a subtle "pulse" animation on the "Total Price" text box whenever a service checkbox is toggled. This provides immediate visual confirmation that the system is reactive, removing the need for an explicit calculation trigger. 

Comparison:

  • BEFORE:


  • AFTER: 




Improvement 4: Optimizing Error Recovery in OTP Flow

  • Analysis: Users felt stuck when an error occurred in the phone number entry.

  • Action Taken: We added a "Wrong number?" link directly below the OTP input field, which allows the user to immediately revert to the previous screen. We also included a "Resend OTP" timer that activates after 30 seconds to guide the user if the initial SMS is delayed.

  • Comparison:

    • BEFORE: 


    • AFTER:



CONCLUSION

The usability testing phase was highly beneficial in bridging the gap between our initial design assumptions and actual user behavior. While our Lego Serious Play ideation and initial Figma prototype successfully solved the core issues of waiting times and availability transparency, the testing revealed minor navigational flaws. By analyzing user interactions and implementing targeted improvements specifically enhancing button visibility and tab navigation which we have significantly refined the UUM Barbershop application. The final clickable prototype now offers a truly seamless, efficient, and user-centric experience for the campus community.








Comments

Post a Comment

Popular posts from this blog

Concept Note

Image
 Introduction In today’s digital era, technology plays an important role in simplifying daily activities and improving the efficiency of various services. Online reservation systems have become increasingly popular because they provide users with a more convenient, organized, and time-saving experience. As technology continues to develop rapidly, service-based businesses such as barbershops are also beginning to adopt digital solutions to enhance customer satisfaction and improve service management. UUM Barbershop is a mobile reservation application developed specifically for university students, staff members of Universiti Utara Malaysia (UUM), and residents living around the Sintok area. The application allows users to book haircut appointments online without having to spend long hours waiting at the barbershop. Through this system, customers can choose available time slots according to their personal schedule in a more efficient and systematic manner. The development of the UUM ...
Read more

Task 2

Image
1. Ideation Process (Lego Serious Play) To conceptualize the core functionality and user experience of the UUM Barbershop Application , our team conducted an Ideation Process using the Lego Serious Play (LSP) method . Instead of diving directly into digital interface wireframing, we utilized physical and digital Lego components to model abstract customer frustrations, operational bottlenecks, and feature solutions into a clear 3D architectural journey. This hands-on prototyping session allowed all four remote group members to align our user research data that gathered from our 54 campus respondents which a tangible ecosystem map, ensuring every digital element we design directly addresses a real-world campus pain point .   Notes: This lego model is created using website called mecabricks.com 2. Ideation/Conceptualisation Outcomes The finalized Lego model serves as a direct, structural metaphor linking verified the u ser needs to the a pplication features and functions of the ...
Read more

Task3

Image
 Introduction Following the ideation phase and Lego Serious Play (LSP) modeling in Task 2, our team has successfully translated our conceptual designs into a fully interactive Clickable Prototype using Figma. This prototype was developed to directly address the primary pain points identified in our field study which are long waiting times, lack of availability transparency, and the need for a seamless booking experience for the UUM campus community. Prototype Fidelity Overview   To ensure an effective usability testing phase, our prototype was built adhering to the required fidelity standards: High Fidelity in LOOK: The user interface (UI) features a polished, modern aesthetic tailored to a barbershop environment. We utilized a consistent dark-mode color palette (black, gold, and white), readable typography, and intuitive iconography to simulate the final product's exact visual appearance. Medium Fidelity in FEEL: The prototype is fully optimized to run on a desktop computer...
Read more