Task3
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 browser or mobile simulator, allowing testers to navigate using a mouse and keyboard with smooth transitions.
Medium Fidelity in DEPTH: We have mapped out the complete vertical interaction flow for all main tasks and sub-tasks. While not every single background function is coded, the primary user journey from logging in to confirming a haircut is fully clickable and interactive.
Main Tasks and Interaction Flow
Our interactive prototype guides users through the following core tasks and sub-tasks:
1. Onboarding & Authentication
Users are greeted with a visually engaging splash screen and can log in using their UUM Matric Number.
Sub-task (Error Recovery): We implemented a "Forgot Password" flow utilizing a phone number OTP (One-Time Password) verification. This provides a faster, more accessible recovery method for busy university students compared to traditional email links.
2. Core Task: The Booking Flow
Real-Time Barber Availability: On the Home screen, users can instantly view barber status via color-coded indicators (Green for "Available," Red for "Occupied"), directly solving the issue of availability uncertainty.
Service Selection: Users select their desired services (Haircut, Wash, Beard) with full price transparency. A dynamic "Total Price" updates automatically.
Time Slot Selection: To manage shop capacity and prevent overcrowding, users select from a timeline of slots. Unavailable slots are clearly marked as "(FULL)".
3. Booking Management & Reminders (Sub-Task)
Upon confirming a time slot, users are directed to the "Booking Confirmed" screen summarizing the barber, date, time, and price.
Innovative Sub-Task: Users can click the "Reminder" button to set an automatic push notification 15 minutes before their turn. This ensures students do not miss their slots while managing tight class schedules.
4. Efficiency Accelerator: Repeat Booking
Addressing the 54 survey respondents' desire for a "Quick Book" feature, we included a "My Bookings" tab. Under the "Completed" section, users can simply click a yellow "REPEAT BOOKING" button to instantly rebook their favorite barber and service combination with just one tap.
5. Barbershop Owner Dashboard
To streamline business operations, we designed a dedicated owner interface. Owners can track "Total Sales Today," "Total Customers," identify their "Top Barber," and view a weekly sales bar chart to make informed operational decisions.
Adoption of HCI Design Rules (Nielsen’s Heuristics)
Throughout the prototyping phase, we heavily integrated Nielsen’s 10 Usability Heuristics to ensure a seamless User Experience (UX):
Visibility of System Status: The real-time green/red availability dots and the "(FULL)" vs "(AVAILABLE)" labels keep the user constantly informed about the barbershop's current capacity.
Match Between System and the Real World: We utilized familiar, real-world concepts such as standard currency formats (RM) and universally recognized icons (scissors for haircuts, facial profiles for beard trimming).
User Control and Freedom: A prominent yellow "Back Arrow" is placed at the top-left of every screen, acting as an emergency exit for users who click the wrong service or wish to change their barber.
Error Prevention: Time slots that are already booked are grayed out and rendered unclickable, preventing users from accidentally double-booking or causing schedule overlaps.
Flexibility and Efficiency of Use: The inclusion of the "Repeat Booking" button acts as an accelerator for expert (returning) users, allowing them to bypass the standard multi-step booking process entirely.
Comments
Post a Comment