Health Ease

mHealth for staff & patients to book, manage appointments & purchase medical supplies. Created for my final year project at University

Duration: 12 weeks

Role: UX/UI Designer, React Native Developer

Tools: Miro, Figma, Visual Studio Code, React Native, Expo, Firebase, Firestore

Project Overview

In my final project at university, I embarked on the journey of creating a mobile application, driven by my aspirations to become a proficient cross-platform developer upon graduation. The choice to delve into the realms of mHealth and e-commerce was something that I had decided to do due to my personal experience as an NHS patient. As someone intimately acquainted with the challenges within the healthcare system, I recognised a significant gap that could be addressed through innovative mobile solutions.

This mHealth application, Health Ease is a user-centric mobile application designed with Figma and React Native to address prevalent healthcare challenges faced by both patients and healthcare staff within the NHS framework. Health Ease places a strong emphasis on accessibility, ensuring that users of diverse backgrounds and abilities can navigate and utilise its features effectively. The primary goal of the application aims to bridge the gap between current healthcare practices and digital technology enhancing the overall efficiency of appointment and prescription management for users.

I will show the process of creating the Health Ease mHealth app, encompassing various stages such as user research, evaluations, design, and prototyping. The journey reflects my commitment and determination to addressing real-world challenges in healthcare while also advancing my proficiency as a developer.

In undertaking this project, it's important to note that the project brief for my final year project explicitly outlined that while not every screen needed to be completed, each screen should be fully functional. The case study features all screens designed and the prototype features the essential screens.

Problem Statement

Despite the increasing prominence of mHealth applications, challenges persist in their seamless integration into healthcare practices within the NHS. Usability issues, such as complex user interfaces, limited accessibility, and concerns regarding data security, hinder the widespread adoption of these applications. Additionally, insufficient training and resistance amongst healthcare professionals further hinder the effective utilisation of mHealth solutions.

Problem Solution

Health Ease emphasises a user-centric design and adherence to usability standards. The design process encompasses activities such as empathetic user research, competitor analysis, information architecture, user flow, wireframing, and final design. The evaluation will utilise the Standard Usability Scale (SUS) and an expert evaluation based off the Heuristics Evaluation  to assess the effectiveness, satisfaction, and usability of the designed protoype mHealth application. The Health-ITUES is also used as a final evaluation. Through this approach, the project aims to contribute insights and solutions that foster the successful integration and utilisation of mHealth applications in NHS healthcare practices. Health Ease seeks to tackle these challenges to optimise the usability and integration of mHealth applications, ultimately improving healthcare dynamics and patient care.

Pain Points

With the aim of developing a meaningful mHealth application, it became imperative to identify and address the existing pain points within the healthcare landscape. These pain points serve as critical touchpoints, revealing areas of inefficiency, dissatisfaction, and unmet needs in the current healthcare system. To ensure a comprehensive understanding, a pivotal component of this investigation involved a firsthand interview with a healthcare professional, complemented by thorough research on academic papers. This collaborative insight not only shed light on the challenges faced by healthcare practitioners but also guided the development of a solution that aims to alleviate these pain points, derived from both personal experiences as a patient within the NHS, academic literature, and valuable input from a healthcare professional.
Insights from Healthcare Professionals & Academic Perspectives

Key Features

Patient Side
Staff Side

Design Process

The project embraced the design thinking approach to understand user needs and devise solutions while creating the Health Ease mobile app.
This systematic design approach ensured a comprehensive understanding of user requirements and facilitated the creation of an effective and user-centric Health Ease mobile app.

Project Timeline

User Research - Qualitative and Quantitative

Demographic information provides a crucial lens for gaining valuable insights into user perspectives. By analysing participant variations, we can uncover aspects of the system that may pose specific challenges for certain users to identify potential areas for improvement or customisation to meet diverse user needs. A deeper exploration of potential reasons behind the results highlights the necessity for specific features within Health Ease. Each participant variety and levels of experience with healthcare apps and different frequencies of application usage, reflecting a broad spectrum of user characteristics and preferences.

Moreover, the exploration extends beyond demographics to include insights gathered from an illuminating interview with a healthcare professional. This interview offers a comprehensive understanding of industry challenges, user expectations, and recommendations for optimising Health Ease. Together, these demographic and interview-based insights lay the groundwork for the exploration of how Health Ease can effectively cater to a broad spectrum of user characteristics and preferences.

Empathy Map

A fundamental cornerstone in the design process of Health Ease involved a comprehensive exploration of user perspectives. To achieve this, an empathy map was employed, enabling the identification of user desires, requirements, and pain points. This method facilitated the creation of an experience tailored to evoke feelings of satisfaction and enthusiasm among users, ensuring that Health Ease becomes a source of joy and excitement for both patients and healthcare staff.
Patient
Staff

Competitor Analysis

This section delves into a comprehensive competitor analysis aimed at understanding the landscape in which Health Ease would operate in. By exploring potential competitors and conducting an in-depth analysis, the study identifies the strengths, weaknesses, opportunities, and threats (SWOT) inherent in the competitive field. Additionally, an understanding of the macro-environmental influences shaping the market industry is attained through a comprehensive PESTLE analysis and a detailed feature comparison.
SWOT Analysis
This SWOT analysis analyses the internal and external factors affecting Health Ease and identifies its strengths, such as comprehensive functionality and user-centric design, while also acknowledging weaknesses, such as initial user training requirements. Opportunities, like promoting digital literacy, and threats, including data security concerns, are assessed to formulate strategies for sustained success.
PESTEL Analysis
Understanding the macro-environmental influences is crucial. The PESTLE analysis examines political, economic, social, technological, legal, and environmental factors shaping the mHealth industry. This broader perspective aids in anticipating industry trends and challenges that may impact Health Ease's positioning.
Feature Comparison
To be able to gain an understanding of the mHealth competitors, a feature comparison was created. This analysis allows a better understanding to be able to evaluate how Health Ease compares to existing mHealth apps within the NHS or partnerships in terms of key features, usability, and value proposition when compared to these industry competitors. By conducting this feature comparison, further insight into Health Ease’s strengths and areas for potential improvement in the dynamic landscape of healthcare for patients and healthcare professionals were gained.

Target Audience

In crafting the UX/UI design case study, understanding the distinct needs and preferences of the target audience is paramount. This section illuminates the journey of designing an intuitive and user-centric mobile health (mHealth) application, tailored to meet the diverse requirements of healthcare professionals and patients within the NHS framework.

User Stories

The primary goal is to create a user-centric application, serving as dynamic embodiments of the varied needs, preferences, and challenges faced by healthcare professionals and patients interacting with the envisioned Health Ease application. By crafting these personas, the study aims to cultivate a deep understanding of user demographics, behaviours, and expectations, laying a solid foundation for designing a tailored and user-centric mHealth experience.

User Persona

Through carefully crafted user stories, the app is designed to address the unique needs of individuals, demonstrating its potential to create meaningful experiences and improve the overall well-being of users within the UK. These user stories encapsulate a range of perspectives, reflecting the varied requirements and characteristics of the users who will benefit from the Health Ease app. By understanding and accommodating the distinct needs of each user persona, the app strives to enhance healthcare accessibility and foster positive social impacts for individuals across different demographics and health conditions.

Mood Board

Creating a mood board that represents experiences and emotions was essential to the design of the application. One of the most important aspects were to show an array of images and colours which includes healthcare imagery and accessible icons to portray the apps themes of a safe and trusting environment.

Design System

The design system for the Health Ease app is carefully thought through to ensure a seamless and accessible user experience. This includes colours, typography, buttons, icons, input fields and states, grid layout and settings for the design process. Adhering to Web Content Accessibility Guidelines (WCAG), the design system focuses on meeting the standards for AA and AAA levels of accessibility. Special attention is given to graphical objects and user interface components to guarantee clarity and ease of navigation for all users. To maintain a visually appealing yet inclusive design, colour combinations chosen are thoroughly checked against various backgrounds, ensuring legibility for text of different sizes.

User Flow

The user flow and information architecture of the Health Ease app is strategically designed to provide an efficient navigation experience for all users, establishing a clear and organised framework for the users navigation through the Health Ease app.

Information Architecture

This information architecture shows the framework of the app, structuring the content within a user-friendly manner as well as offering a structured and engaging way for users to manage and take control of their health.

Wireframes

The wireframes serve as the skeletal structure for Health Ease, outlining the fundamental layout, hierarchy, and functionality of the app. These wireframes aim to represent simplicity, functionality, and user-centricity, helping to guide the future design decisions to ensure a seamless and intuitive user experience.
Patient Screens
Staff Screens

Designs

Patient Screens
This section consists of a transition from the wireframes to functional designs, introducing the patient and staff interface designs, providing a glimpse into the visual aesthetics and strategic placement of elements. A more comprehensive discussion of the design choices, user interactions, and the iterative design process will be undertaken in the findings section.
Staff Screens

Technical Implementation - React Native Prototype

Health Ease was crafted to be a user-friendly and accessible application, catering to both healthcare professionals and patients. The prototype design and functionality decisions were initially influenced by the final designs in the UX/UI Design case study.

These designs were then improved upon the feedback from an expert evaluation. While not all initially envisioned screens were implemented, the development prioritised core features, ensuring a robust foundation aligned with project objectives. This approach emphasises functionality, allowing Health Ease to effectively fulfill its primary purpose, with room for future enhancements based on user feedback and evolving needs.

Numerous third-party libraries, also known as dependencies, were installed prior to designing the mobile application which allows additional functionality. Firebase and Firestore was also used extensively throughout this mHealth application.
Evaluations
System Usability Scale (SUS)
The SUS evaluation, based off the Likert scale offered valuable insights into the participants perceptions of the mHealth application's usability. 

The SUS scores were calculated and normalised based on each participants responses to 10 standardised SUS questions, allowing a comparative evaluation and revealing differences within each participant’s experience. Below is an interpretation of the SUS scale.

Expert Evaluation
SUS scores were calculated using a systematic approach, treating odd and even-numbered questions separately. For odd items, 5 was subtracted from the responses, and for even items, responses were subtracted from 25. These adjusted scores were combined, multiplied by 2.5, and averaged to obtain the SUS score.

The calculated scores for participants 001 to 006 range from 17.5 to 92.5, resulting in an average SUS score of 57.08. While falling into the "Moderate" category, the diverse scores offer insights into varying levels of satisfaction among participants, suggesting potential areas for improvement.
Expert Evaluation
This evaluation of the Health Ease mHealth prototype focuses on identifying opportunities for improvement and innovation in design, ensuring seamless integration with healthcare professionals workflows and meeting diverse patient needs. Led by an expert Technical Implementation Lead within a hospital, the assessment follows Jakob Nielsen's usability principles and utilises a severity scale to categorise identified usability issues, helping to prioritise addressing issues based on their impact to be able to refine the application effectively.
Patient & Staff Screens User Actions
Patient & Staff Screens Feedback

Final Prototype

Following the System Usability Scale (SUS) and expert evaluations, the feedback gathered informed iterative improvements, leading to a refined version of the prototype. Subsequently, a final evaluation of the Health-ITUES evaluation was conducted to gauge the application's effectiveness in addressing key dimensions of health information technology usability. This journey from initial design to refined prototype underscores the iterative nature of development, driven by user-centric feedback and a commitment to enhancing user experience within healthcare settings.
Patient Side
The onboarding screens have been developed to accommodate both patient and staff users effectively. The login screen is dedicated to individuals who have successfully undergone the initial sign-up procedure. Both patient users and staff members, whose login details are securely stored in Firebase, utilise this screen for authentication to then navigate to the home screen.

Notably, all staff members are given login details created via Firebase, eliminating the necessity for them to undergo the sign-up procedure. Depending on the user’s email address input, they will be directed either to the Patient Home Screen or the Staff Home Screen.

The start up screen offers users the choice between logging in or initiating the sign-up process. For patients opting to sign up, a set of user information such as first and last names, email, and password, is required. This input is facilitated through a secure entry feature to ensure the confidentiality and security of the chosen password. Users can navigate back to the previous screen either through the back button icon or the provided text prompt, "Already have an account?"
Alert boxes play a pivotal role in guiding users seamlessly through the onboarding journey. Alerts was imported from the React Native library, ensuring users remain well-informed at every step. The imports from Firebase allows new users to signup and the alerts identifies and communicates to the user if their login or signup credentials are incorrect or incomplete, providing real-time feedback.

Opting for a password under 7 characters prompts a notification about the necessity for a more secure password, courtesy of the Firebase Auth library. Beyond error prompts, the alert messages also pops up upon successful login or signup, expressing the accomplishment of these actions.

To enhance user experience further, an activity indicator is integrated into various screens, keeping users informed with the action and allowing a sense of transparency and engagement throughout their interaction with the application.
Users can access the Forgotten Password screen from the login screen, enabling them to input their email address and press the “Send Password Reset” button, automatically redirecting them back to the login screen with an alert box displaying the message “Success, password reset email sent successfully. Please check your email”. Subsequently, they receive an email containing a link which facilitates the process of setting a new password. After successfully changing the password, users can return to the Health Ease login screen, where they can log in using their updated email and password credentials.
When a logged-in patient navigates through the app, they can seamlessly explore various categories by simply tapping on the "See All" option. This directs them to a list of categories. Alternatively, users have the flexibility to select a category, instantly taking them to a dedicated screen showcasing a list of doctors for that specific category. From here, they can check individual doctor profiles or initiate the appointment booking process.

The applications home screen includes informative banners, highlighting the diverse functionalities of the app and providing users with an intuitive and engaging experience. A particularly user-friendly feature is the "Upcoming Appointments" section, strategically designed to streamline the booking process. Users can seamlessly book appointments through the "Book Now" button, ensuring a clear and straightforward process towards scheduling their appointments.
Upon selecting a doctor's profile, users access comprehensive information retrieved from the Firestore Database, including the doctor's name, experience, specialties, and bio. The "Book Now" button, strategically placed across screens, facilitates seamless appointment scheduling. Once this has been pressed, users are directed to the booking screen, featuring enhanced clarity and precision compared to the previously outlined design. Here, users can choose from available time slots, select a date, and add any necessary notes for the doctor.

Once a date and time has been confirmed, a reassuring alert confirms the booking "Appointment Booked, your appointment has been booked successfully." This appointment is then displayed on the Patient Home Screen's "Upcoming Appointments" section, providing users with a convenient overview of their current and upcoming healthcare engagements.
Staff Side
As previously mentioned, depending on the user will determine which screens they will see and have access to. All staff are given an email and password to log into so there is no need for them to sign up so if they do try or anyone else does, they will not be able to gain access, giving the alert message “Sign up with @healthease.net is not allowed”. The if else statement includes “@healthease.net”, once they enter their details, they’re taken straight to the Staff Home screen with an alert “Login successful” to show the staff that they have logged in successfully.
The Staff Home Screen is meticulously designed, presenting essential features such as a notification bell, cart, and a dynamically updated list of appointments booked by patients through their chosen doctor's profile. In instances where a doctor has no appointments scheduled, a thoughtful display ensures clarity, stating "No upcoming appointments".

As patients book appointments, the Your Appointments section dynamically populates with applicable details for the staff who is signed in, including date, time, and patient names. Additionally, a list of available products is integrated, facilitating seamless navigation to the Products screen. The application fetches appointment and product information from the Firestore database, enhancing the overall user experience.
To enhance the user experience further, a streamlined checkout process is implemented. Users can easily add products to their cart, modify quantities, and even remove items, all facilitated through the implementation of createContext, useContext, useReducer, and useEffect from the React library and a switch statement.

Upon clicking the checkout button, a prompt appears, confirming the order's success with the message, "Order Successful. Thank you for your order! Please check your email for confirmation." This responsive feedback assures staff of the completion of their order, creating a seamless transition back to the home screen with an emptied cart.
The Notifications Screen, accessible through the bell icon on the home screen, provides a centralised view of all booked appointments and tasks. Ensuring a smooth transition between screens, an activity loader keeps staff informed during these interactions. For staff with no appointments or tasks, clear and concise text notifies them of the absence of notifications or tasks, contributing to a user-friendly experience.
Health Information Technology Usability Evaluation Scale (Health-ITUES)
The Health-ITUES evaluation results highlight positive user experiences with the Health Ease mHealth application, assessed through mean and standard deviation calculations. Mean scores, ranging from 4.48 to 4.76, indicate high user satisfaction across dimensions such as ease of learning, task efficiency, and memorability. Participants also praised the visual design and functional integration of the system.

While overall satisfaction was strong, slight variations in responses for dimensions like Enjoyability and Satisfaction suggest areas for further exploration and refinement. These insights guide ongoing improvements to ensure Health Ease meets diverse user needs and preferences effectively.
The Health-ITUES evaluation examines 10 dimensions with 20 questions, using the Likert scale to assess various aspects of the HIT system, including ease of learning, efficiency, memorability, error prevention, and subjective satisfaction. These responses stem from participants from the SUS evaluation who had previously engaged with the initial prototype. Additionally, individual participant responses and their impact on the overall evaluation will be considered, contributing to a well-rounded perspective on the usability of the HIT system.

Reflection

Reflecting on this project, several key limitations and areas for improvement have emerged. The foremost constraint lies in the relatively low number of participants in the usability evaluations, partly due to the timing of the study coinciding with the Christmas holiday season. This limitation may affect the generalisability of findings and the robustness of statistical analyses, highlighting the need for a larger and more diverse participant pool.

The small participant pool also limits the generalisability of findings to diverse healthcare settings, while the single evaluator in the expert evaluation may have restricted the thoroughness of identifying usability issues.Additionally, the study relied on self-reported data, introducing the potential for response bias and uncertainty regarding the accuracy of participant perceptions.  Furthermore, my limited expertise in React Native development posed challenges in fully implementing design ideas and features, potentially influencing participant perceptions.

Moving forward, future works should focus on enhanced user training and onboarding, usability testing, diversified expert evaluation panels, incorporation of advanced features, implementation of a user feedback mechanism, integration of accessibility features, and exploration of user preferences to refine the Health Ease mHealth application and drive it towards greater usability, efficiency, and user satisfaction in diverse healthcare settings.