Project Part 3 (Conceptual and Physical Design)
STORYBOARD
User Task 1 - Booking Appointment
User Task 2 - Paying Bills
User Task 3 - View Medical Records
View Medical Record Storyboard
ALTERNATIVE DESIGN
Danish’s Design
Pravein’s Design
Sarah’s Design
Huda’s Design
WIREFRAME DESIGN
Login and Main Page
The wireframe for the login page was created specifically for a simple and efficient entry into the application. Necessary functionality, such as entry for email, password entry, and logging in, is grouped closely together, utilizing the Gestalt principle of proximity to signify that this functionality is related to logging in. Similarity is also utilized by treating input fields and buttons similarly, making it easier for a user to identify interactive areas on a page. The login form is placed on a white card on a dark background, utilizing the figure/ground technique to ensure that this form is recognized as the main icon on a page entering this application. This page utilizes Shneiderman’s “Golden Rule” for consistency by treating this login page as a standard and preventing any errors through proper label placement and a directed method for logging in.
The sign-up page wireframe design incorporates the login design and follows consistency throughout the design. The input fields for personal details like full name, email, date of birth, phone number, and password are placed in a vertical arrangement, thus promoting continuity by providing a smooth flow of registration to users according to the Gestalt principle of continuity. The principle of proximity is applied by placing input fields of similar categories closer, thus helping users differentiate between organized input fields and helping them understand how the input fields are organized. The current page follows Shneiderman’s Golden Rule of minimizing short-term memory by guiding users through each step of registration without requiring anything from previous pages. The current design follows figure-ground by creating a card layout that keeps the registration form in the foreground.
User Task 1 - Booking Appointment
This page is designed to help users quickly identify and choose the type of medical service they need. The service options are presented as large, clearly labeled buttons that share the same color, shape, and size, applying the Gestalt principle of similarity. This visual consistency allows users to immediately understand that each option performs the same type of action. The buttons are grouped together vertically with sufficient spacing, following the principle of proximity, which helps users perceive them as a single functional group. The simple layout reduces cognitive load by limiting the number of choices on the screen, making it easier for users who may be feeling unwell or tired to make a decision. The strong contrast between the service buttons and the background improves visibility and ensures that the primary action stands out clearly. Overall, this page supports ease of learning and quick decision-making while maintaining a clean and uncluttered interface.
This page focuses on enabling users to select an appointment date and time accurately and efficiently. The calendar and time selection components are placed close to each other to maintain visual continuity and reduce the effort required to scan the screen. The use of a familiar calendar layout improves learnability, as users can rely on prior experience rather than learning a new interaction pattern. Available dates are visually distinguished from unavailable ones, helping prevent selection errors. The time picker provides structured input, reducing the likelihood of incorrect entries and supporting Shneiderman’s principle of error prevention. By guiding users through a clear and predictable flow, the design minimizes memory load and ensures that users remain focused on the current task without distraction.
This page is designed to provide clear closure and reassurance before the appointment is finalized. All relevant appointment details are displayed together in a single summary panel, applying the Gestalt principle of proximity to reinforce that the information belongs together. The summary panel is visually separated from the background using contrast and spacing, following the figure–ground principle to draw attention to critical information. The presence of “Edit” and “Confirm” buttons supports user control by allowing changes before submission, aligning with Shneiderman’s rule of supporting internal locus of control. Reminder options are included to help users manage future actions and reduce the risk of forgetting the appointment. The clear layout and final confirmation step provide informative feedback and help users feel confident that their task has been completed correctly.
User Task 2 - Paying Bills
This page displays a list of all previous and pending payments made by the user. Each bill entry is presented in a structured card format showing essential details such as the billing date, service type, amount, and payment status. The use of consistent card design applies the Gestalt principle of similarity, allowing users to quickly recognize each item as part of their billing records. Related information within each bill card is placed close together, following the principle of proximity, which improves readability and helps users easily distinguish between different transactions. This page supports transparency and system feedback by allowing users to review their financial history at any time, aligning with Shneiderman’s rule of visibility of system status.
This page provides a detailed breakdown of a selected bill, including consultation charges, medication costs, and the total amount payable. Information is organized into clearly separated sections, applying the Gestalt principle of grouping to show which items belong together. Important details such as the total amount are visually emphasized to draw immediate attention, reducing the need for excessive scanning. The structured layout minimizes cognitive load and ensures users can clearly understand what they are being charged for, which supports accuracy and user trust. This design also follows error prevention principles by allowing users to review all charges before proceeding with payment.
This page allows users to choose their preferred payment method, such as online banking, e-wallets, or card payment. Payment options are displayed using uniform icons and buttons, applying the Gestalt principle of similarity to indicate that all options perform the same function. The options are arranged with sufficient spacing, using proximity to help users easily compare and select a method. The simple and uncluttered layout reduces decision fatigue and supports fast task completion. By offering familiar payment methods, the design improves learnability and aligns with users’ existing mental models of digital payments.
After a successful payment, this page provides confirmation feedback to the user and updates the payment status accordingly. A clear confirmation message reassures users that the transaction has been completed successfully, supporting informative feedback as outlined in Shneiderman’s Golden Rules. The updated bill status helps users immediately verify the result of their action, reducing uncertainty. The continuity between this page and the payment history reinforces consistency across the system and ensures users feel confident that their task has been completed correctly.
User Task 3 - View Medical Report
This page represents the Medical Record page, which stores and displays patients’ medical records. It allows authorized users to access essential patient information, including personal details, medical history, diagnoses, treatments, and previous consultation records. The page is designed to support efficient access, accuracy, and continuity of patient care through a structured and intuitive layout
Based on issues identified in our previous project, a search bar was incorporated to allow users to quickly locate both older and recent medical records, improving efficiency and reducing time spent navigating the system. Each medical record includes a brief summary displayed on the main Medical Record page, enabling users to easily scan and distinguish between different records.
The design applies Gestalt principles to enhance usability. Firstly, Proximity is used by placing related information, such as record name and date, close together to indicate their relationship. Moreover, Similarity is achieved through consistent formatting, colors, and typography across all medical record entries, helping users quickly recognize records as belonging to the same category. Additionally, Grouping is implemented by organizing records into clearly defined sections allowing users to differentiate between individual records while maintaining a coherent and organized overall layout.
After a user selects a medical record, they are directed to this page, which presents a detailed summary of the consultation created by the doctor. This includes the doctor’s notes, prescribed medications, dosage information, and the associated pricing. Additionally, a print button is provided, allowing users to generate a physical copy of the record for documentation or reference purposes.
Based on issues identified in the previous project, the design prioritizes displaying key information upfront. Important details such as diagnosis summaries, medication lists, and total cost are immediately visible, reducing the need for excessive scrolling and enabling users to quickly locate the information they require. This approach improves efficiency and minimizes cognitive load, particularly for users accessing records under time constraints.
The layout applies Gestalt principles to enhance usability and comprehension. Grouping is used to cluster related information such as medical notes, medication details, and pricing into clearly defined sections, helping users understand which information belongs together. Continuation is implemented through a logical top-to-bottom flow and consistent visual alignment, guiding users naturally from the summary section to medication details and finally to pricing and actions. This ensures users can easily follow the structure of the page and clearly identify where each section begins and ends.
INTERACTION METAPHOR
1) File Folder
The Medical Record interface adopts a file folder metaphor, similar to traditional paper-based medical records used in clinics. Each patient record is represented as a structured card or folder containing summaries such as date, diagnosis, and doctor’s summary. Selecting a record mimics opening a physical patient chart, revealing detailed consultation notes, medication information, and pricing. This metaphor is suitable because it aligns with users’ real-world experiences in healthcare environments, reducing the learning curve and improving intuitiveness. Users can easily understand how to locate, open, and review records without additional instructions, supporting usability and efficiency.
2) File Viewer
The detailed medical record page follows a filet viewer metaphor, where the information is presented in a clear, readable format similar to a medical report or invoice. Sections are laid out in a top-to-bottom flow, with headings, tables, and summaries resembling a printed medical document. The inclusion of a print button further reinforces this metaphor, allowing users to treat the record as an official document that can be reviewed or printed for reference. This metaphor supports clarity, trust, and accuracy by presenting medical information in a familiar and professional format, making it easier for users to review key details such as diagnoses, medications, and costs.
3) Tab / Navigation Bar
The bottom navigation bar uses a tab/folder-based navigation metaphor that serves as a means to switch between sections in an actual physical file organizer. Every icon on the bottom navigation bar represents a unique functional part of the application, such as Home, Bookings, and Profile, which helps users easily transition between sections. In this application, this kind of navigation works well as it embodies a standard mobile navigation design that enables users to be aware of their location in a given system at all times.
4) Bookmark/Favourite
The heart symbol utilized in the doctors listing part of the application is for the favorite or bookmark metaphor, where one can save their favorite doctors for later reference or selection. This interaction mirrors bookmarking pages or marking important items in the real world. The metaphor is widely recognised, hence no explanations are required for the user to understand, and it’s very efficient for improving the functionality of the application.
5) Clinic reception / Appointment counter
The booking appointment interface adopts a clinic reception metaphor, similar to the process of scheduling an appointment at a physical healthcare counter. Users begin by selecting the type of service they require, which mirrors the initial question asked by a receptionist. The step-by-step flow of choosing a service, selecting a date and time, and confirming appointment details reflects the real-world appointment booking sequence in clinics. This metaphor is suitable because it aligns with users’ existing mental models of healthcare interactions, reducing the learning curve and improving intuitiveness. Users can navigate the booking process confidently without additional instructions, supporting usability, clarity, and efficiency.
6) Invoice / Receipt
The paying bills interface adopts an invoice or receipt metaphor, similar to the billing statements patients receive at clinic counters or hospitals. Each bill is presented as a structured record containing details such as service charges, medication costs, total amount, and payment status. This metaphor allows users to interpret the digital billing information in a familiar format, reducing the learning curve and improving comprehension. By mirroring real-world invoices, users can easily review, verify, and understand their medical expenses before making a payment.
7) Digital Wallet / Payment Gateway
The payment method selection page uses a digital wallet or payment gateway metaphor, commonly seen in modern e-commerce and mobile banking applications. Payment options such as online banking or e-wallets are displayed as selectable cards or buttons, representing different “wallets” from which users can pay. This widely recognized metaphor enhances learnability and efficiency, as users are already familiar with similar interfaces in other applications, allowing them to complete payments quickly with minimal cognitive effort.
REFERENCES
Topic 3a Understanding and Conceptualizing Interaction (Teaching Slides)
Topic 7a Prototyping & Construction (Teaching Slides)
Topic 7c – Gestalt Principles (Teaching Slides)
ID book Chapter 11.3 – Conceptual Design: moving from requirements to first design
Comments
Post a Comment