Jayson Cheung

Knowledge Consultant |
UX Designer

Medical Appointment iOS Booking App

- UX Design -

School Group Project

Project Role

Low Fidelity Sketches - Sketcher (All)
Mid Fidelity Prototype - Designer (Mobile)
High Fidelity Prototype - Designer (Mobile)

Problem Description

Scheduling an appointment with a medical practitioner has traditionally been done through the telephone with a receptionist or medical assistant. We were tasked with creating a solution for iOS and watchOS that could help people schedule medical appointments. This solution should increase the amount of information available to both the patients and practitioners so that making and keeping appointments became less cognitively taxing. Our assignment requirements were:

  • Mobile
  • 1.) New Patient Registration
  • 2.) Appointment Booking
  • 3.) Appointment Management
  • 4.) Walk-In Clinic Information
  • 5.) Doctor's Information
  • 5.) Patient Account Settings

  • Watch
  • 1.) Notifications
  • 2.) Appointment Information
  • 3.) Walk-In Clinic Information

Low-Fidelity Sketches

We used a smartphone mockup to sketch out ideas for interactions that would meet all requirements of the project. As this project was designed for the iOS platform, we followed Apple's iOS Human Interface Guidelines when sketching our first prototype. On the mobile version, widgets we used included segmented controls, modal overlays, and tab bars. In the watch sketches, we accounted for the limited screen space and ensured that one idea was communicated per screen. We used the affordance of scrolling to allow juxtaposition of relevant information, such as viewing various appointments in overview.

Mid-Fidelity Prototype

User feedback on the low-fidelity prototype was centered around clarity of data input. Participants reported that the camera interaction was confusing, as there were two icons present in the same input field. As well, on the main screen, buttons above the tab bars caused confusion for users, who suggested to switch the location of the slider with the buttons. On the watch interface, users suggested to ensure that text had enough leading and kerning for readability on a wristwatch.
Our iteration for the mid-fidelity prototype was assembled on Balsamiq Mockups 3. The information density on the homepage is reduced, and only critical information is displayed to reduce cognitive burden. This homepage information is now also available to a user prior to logging in. As well, 'Doctor's Notes' transitioned into a dynamic section within an appointment card instead of existing as a tag. Lastly, we noticed that elements with rounded corners, including pill-shaped ellipses, are easily mistaken for buttons by user testers.

High Fidelity Prototype

We conducted user feedback again on the mid-fidelity prototype, and made additional improvements to the clarity of information input. In the patient registration module, we removed the asteriks as an indication of mandatory data fields, and replaced it with clear instructions instead. Information hierarchy was emphasized in our high fidelity prototype, with pertinent pieces of information placed closer to the top of each screen. A simple green colour theme was applied to provide a visual identity for the medicial appointment booking app.

Disclaimer: This project was developed for a class assignment in a group of three other students

- Project Date -
JAN - APR 2017

Back to Top