Task 2

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 user needs to the application features and functions of the proposed UUM Barbershop platform. The architectural layout is broken down into three core metaphorical phases:

A. The Chaotic Walk-In Queue (Red Bricks)

  • The Metaphor: A disorganized, scattered pile of red blocks on the left side of the model.

  • The User Connection: This represents the current conventional walk-in reality on campus. It visualizes the major frustrations highlighted in our field study, where 51.9% of users suffer from long waiting times and 59.3% experience anxiety due to unknown barber availability. The color red signifies user stress and time wasted under the traditional method.

B. The Mobile Booking App Solution (Green Bridge & Archway)

  • The Metaphor: A structured, smooth green bridge featuring a centralized archway gateway.

  • The User Connection: This represents the core UUM Barbershop Mobile Application acting as a digital gateway. The bridge symbolizes a seamless transition away from chaotic walk-ins into a highly organized, systematic flow. The streamlined path directly answers our How Might We statement direction to guarantee time certainty and schedule optimization for busy university students.

C. The Core Feature Pillars (Right Side Structure)

The green bridge successfully guides the user to three distinct, color-coded outcome pillars built on the stable white platform:

  • Blue Pillar (Barber Selection): Topped with an avatar icon, this represents the feature allowing users to filter, view, and select their preferred available stylists. This directly tackles the lack of real-time barber visibility reported by campus customers.

  • Yellow Pillar (Price Transparency): Marked with a financial symbol, this maps directly to the upfront digital pricing and service menu. It fulfills the user need for absolute transparency before committing to a session, addressing the 37% frustration rate regarding hidden costs.

  • Orange Pillar (Reminder System): Topped with a notification alert icon, this visualizes the automatic reminder feature. It provides real-time time certainty, ensuring forgetful or busy students receive immediate feedback prior to their secured slots.


3. Sketching Process using Crazy 8's Method

To transition our conceptual Lego metaphors into concrete user interfaces, our team conducted a Crazy 8's sketching session. Each team member took a sheet of paper, folded it into eight quadrants, and rapidly sketched 8 distinct user interface (UI) layouts.

This time-constrained multimedia design exercise forced us to push past basic assumptions and focus heavily on mapping the verified user needs from our 54 campus survey respondents directly into actionable screen layouts.

Notes: This Crazy 8's method  is drawn using pencil

Notes: This Crazy 8's method  is drawn using ipad

Reflection on User Needs vs. Interface Features (Multimedia Principles)

Every screen in this sketching process was deliberately designed using core Human-Computer Interaction (HCI) laws and Shneiderman’s Eight Golden Rules of Interface Design to ensure high usability for the UUM community:

  • Addressing the Need for Speed & Simplicity (Hick's Law):

    Our field study showed that 76% of students demand a highly simplified interface. To prevent cognitive overload, we applied Hick's Law by breaking the booking process into a clean, sequential 3-step flow across Frames 2, 3, and 4 (Select Barber → Select Slot → Select Service) rather than crowding all choices onto a single, complicated screen.

  • Ergonomic Accessibility (Fitts's Law):

    To accommodate busy students interacting with the app single-handedly while walking on campus, all primary call-to-action targets—such as the LOGIN button (Frame 1), BOOK NOW button (Frame 2), and CONFIRM SLOT button (Frame 3)—are designed as large, wide bottom-bar buttons. This satisfies Fitts's Law by placing interactive targets well within the natural reach of the user's thumb.

  • Error Prevention & Informative Feedback (Shneiderman’s Rule 3 & 5):

    Our survey indicated that 31.5% of students struggle with unpredictable waiting times. In Frame 3 (Select Slot), fully booked times are explicitly grayed-out and marked with a clear FULL label. This offers immediate informative feedback and prevents user errors (selecting an unavailable slot) before they can even occur.

  • Reducing Short-Term Memory Load (Shneiderman’s Rule 8):

    To keep the system minimalist and stress-free, Frame 4 (Select Service) automatically calculates the Total Price in real-time based on selected checkboxes. Furthermore, Frame 5 (Confirmation) re-displays all selected choices (Barber name, Date, Time, and Price) simultaneously so the user does not have to memorize information from previous screens.

4. Sketching Outcome (Voted Sketches)

After the rapid Crazy 8's sketching session, our team conducted a formal dot-voting evaluation to finalize the UI architecture for the UUM Barbershop Application. Each member evaluated the 8-screen layouts based on their alignment with our User Personas (The Student, The Barber, and The Owner) and their technical feasibility within a mobile environment.



Finalized Voted Sketches (The Core UI Layouts)

The sketches below received the majority of the team's votes and have been selected as the finalized structural blueprints for our application’s primary user flow:

  • The Primary Booking Flow (Voted Screens: 2, 3, & 4): These three screens were selected because they perfectly encapsulate the 3-Step Booking Journey. By focusing on these specific layouts, we ensure that students can navigate from "opening the app" to "securing a slot" in under 60 seconds. This directly resolves the waiting-time uncertainty identified in our field study.

  • The Notification Feature (Voted Screen: 6): This layout was chosen for its critical role in user control and freedom. By providing an automated 15-minute appointment reminder, we minimize the "no-show" rate for barbers and provide students with peace of mind during their busy academic schedules.

  • The Dual-Perspective Dashboard (Voted Screens: 7 & 8): We selected these layouts as they are essential for the "back-end" ecosystem. They ensure that our app is not just a customer tool, but a complete management system, we also providing Hazri (the barber) which also SOC UUM students that studying in Computer Science with a clear daily queue and with transparent, real-time business insights.

Connection between User Needs & Features

The voted sketches act as the final bridge between our identified campus requirements and the resulting digital features:



5. Wireframe Design (Figma)

To visualize the finalized concepts derived from our Crazy 8's sketching session, the team translated the voted sketches into low-fidelity digital wireframes using Figma. This phase focuses on structural layout, hierarchy of elements, and user interaction flow without the distraction of colors or high-resolution graphics.




Design Justification & Layout Structure:

The wireframes prioritize a minimalist interface, ensuring that the UUM Barbershop experience remains intuitive for university students. The structural layout includes:

  • The 3-Step Booking Flow (Top Row): We maintained a consistent header and clear call-to-action buttons to guide users from barber selection to booking confirmation in a seamless, linear flow, directly addressing our research finding that simplicity is the primary need of UUM students.

  • User-Centric Feedback (Bottom Row): The wireframe incorporates status tracking and confirmation pages, providing the informative feedback required to maintain user trust and transparency.

  • Dashboard Logic: The owner's view (bottom right) is structured to provide data-driven insights at a glance, allowing for efficient management of customer flow and barber performance.






Location: Kedah, Malaysia

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

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