HealthHub

Major Research Project.


Introduction

For this project, the research question is ‘How Does the Design and Development of Mobile Apps and Mobile Features Have the Ability to Save a User’s Life’? The aim of this project is to shed light on how the design and development of mobile apps and features can save a user’s life. The objectives are to investigate the role of mobile applications in enhancing user safety and health outcomes, and to explore other life saving features within mobile devices to discover potential pitfalls of mobile health applications.

Regarding the research proposal from last semester, it unveiled a range of results showing that mHealth apps were able to improve the lives of those with diabetes as well as mental health issues, and were able to help reveal diagnoses with the use of heart rate monitoring applications. The proposal pointed out that alternative devices such as smartwatches also had life saving abilities, with the technology of crash and fall detection, and having the ability to measure heart rate and glucose levels. This research helped to shape the final project by highlighting the most used features within mobile health applications.

This semester takes this research forward to a practical outcome, starting with the design process of a mobile health application which will be able to link to smartwatches. The research proposal demonstrated that a large majority of users utilise smartwatches for health and fitness reasons, and therefore it was decided to also design smartwatch interfaces to illustrate the link between application and smartwatch. Within the interface design, a number of features will be included that were identified from the research proposal, along with making sure any researched pitfalls will not be included in the design. A few of these key features include mental health therapy because it was discovered by Lal and Adair (2014) that Mhealth applications will receive a better response than in-person therapy, allowing users who are uncomfortable with in-person treatment to receive treatment digitally. This illustrates that users may respond better with app-based therapy as they will be able to take part in treatment from their home. Other features will include heart rate monitoring because it can help users significantly with identifying problems. For instance, Whittaker (2016) stated that a heart rate monitor application led to a discovery of atrial fibrillation after discovering an abnormal heartbeat.



unshackled

Figure 1 - Mockup / Title of Image: Splash Screen / Source: [(Online) Imogen Buttimore, 2024]



Branding Research

Research was also completed regarding the aesthetics of the app design such as analysing layouts, fonts and colours. This was completed so that I had an established set of brand guidelines and aesthetics to work with. It was desired to have this health application highlighted by using colours that are not commonly used in health applications, but would still have positive connotations from users. For instance, Stripe (n.d.) states that purple is associated with royalty, and it could be used to provide reassurance to patients. It is also stated by Ng (2023) that blue is known to evoke feelings of trust and security, making it a popular colour for healthcare application designs. Green connotes nature, health and healing as green is the colour of plants and trees, white is associated with cleanliness and purity which is a common choice for healthcare branding as it creates a sense of cleanliness (Ng, 2023).

unshackled

Figure 2 - Colours / Title of Image: User Interface Colours / Source: [(Online) Ego-cms, 2021]

From these findings, I chose to use shades of purple for the interface because it is a calming and reassuring colour. I also wanted to steer away from stereotypical medical colours such as blue as this can have connotations of hospitals, appointments and doctors which is not what I want the users to focus on. Utilising the colour purple will help the users feel more relaxed and reassured when using the application.



I also chose to use a san serif font because this style is the easiest to read and offers high quality usability. As this is a health and medical application, user friendliness is important due to having users from all backgrounds utilising the app.


unshackled

Figure 3 - Fonts / Title of Image: Healthcare Typography / Source: [(Online) Ego-cms, 2021]



Design Journey

To begin the design journey I created a moodboard to gather inspiration and ideas for the app. I found logo ideas, typography choices, layout and colour options. This moodboard helped to finalise the branding and direction of design. I found the majority of this inspiration from Pinterest and Dribbble by searching for health application colours, fonts and layout designs.



unshackled

Figure 4 - Moodboard / Title of Image: Branding Moodboard / Source: [(Online) Imogen Buttimore, 2024]



Once I had gained inspiration, I needed a name for the application. Before the project, I already had a name idea that I had thought of when designing a previous medical application in the second year. When coming up with names for the second year project, I used ChatGPT to generate name options, but decided to use a different name. Therefore, I opted for a name that was generated then which was Health Hub. I thought this name fitted the application perfectly because the app will act as a ‘hub’ for users to monitor their mental and physical health needs all in one app.

Logo Design

Once a name had been finalised, the next step was to design a logo for the application. I started with some basic sketches to help visualise a logo and then designed a high fidelity logo in Adobe Illustrator.


unshackled

Figure 5 - Sketches / Title of Image: Logo Sketches / Source: [(Online) Imogen Buttimore, 2024]


As seen in my moodboard, several medical/health logos are very basic and minimal so I tried to follow these designs in my own logo. As a san serif font is the most user friendly option, I looked through a wide range of san serif fonts in order to find a typeface that I wanted to use. Out of the fonts I collected, I decided to choose ‘Comfortaa’ because it has a modern look with very round letter forms which gives it a soft and approachable tone. It was important to choose a logo typeface which will create a welcoming and approachable atmosphere as I wanted HealthHub to feel like a safe space for individuals, instead of an app that they would dread to use. If I did this logo design again, I would have also designed a sub logo which could be used throughout the application to represent the brand.


unshackled

Figure 6 - Fonts / Title of Image: Font Choices / Source: [(Online) Imogen Buttimore, 2024]

Final Logo Design

unshackled

Figure 7 - Logo / Title of Image: Final Logo / Source: [(Online) Imogen Buttimore, 2024]


From my initial branding research, I created a colour palette for HealthHub including two shades of purple, a light blue, and an off white/grey shade. The purple and blue will primarily act as the colours for call to action buttons as well as separating the app’s content. The off white will be the background colour for the interface because this will make the information easy to read on a plain and light background. For typography within the interface, I decided to use an alternative font from the logo typeface so that the logo can be differentiated from the interface font. ‘Quicksand’ was the chosen font for the interface because it has a modern look and is easy to read.

Final Branding

unshackled

Figure 8 - Branding / Title of Image: HealthHub Branding / Source: [(Online) Imogen Buttimore, 2024]



Interface Design

The interface process started with creating low-fidelity wireframes to gain an idea of what the layout could look like. I created these wireframes because they also allowed for quick ideation and exploring different design concepts. I made low fidelity wireframes of the top screens that were guaranteed to be designed as these were the most important, and I then followed the layout and design of these wireframes to the next screens that did not have a low-fidelity wireframe. Throughout the design process I stuck to the layout of my low-fidelity wireframes for the majority of the screens, however, one change I made was that I added an instruction and loading screen for the heart rate feature instead of implementing the phone camera. Making this change reflected an aspect of research I had found within my research proposal.


unshackled

Figure 9 - UX Design / Title of Image: Low-Fidelity Wireframes / Source: [(Online) Imogen Buttimore, 2024]




I also made a basic sitemap alongside my wireframes to identify any potential gaps and prioritise the essential screens.

unshackled

Figure 10 - Sitemap / Title of Image: HealthHub Site Map / Source: [(Online) Imogen Buttimore, 2024]



A small number of high fidelity wireframes were also created so that I could have a better visual of the components and usability of the designs. I also created these wireframes because they gave me a guide of how to progress onto the final screen designs. I opted for a simple layout to ensure that the users will have a smooth navigation and will not feel confused when using the app, because users should feel comfortable and safe when navigating through HealthHub.

unshackled

Figure 11 - Hi-Fi / Title of Image: High Fidelity Wireframes / Source: [(Online) Imogen Buttimore, 2024]

Final User Interface Design

unshackled

Figure 12 - Navbar / Title of Image: App Navbar Icons / Source: [(Online) Imogen Buttimore, 2024]

unshackled

Figure 13 - Interface Design 1 / Title of Image: App Screens 1 / Source: [(Online) Imogen Buttimore, 2024]

unshackled

Figure 14 - Interface Design 2 / Title of Image: App Screens 2 / Source: [(Online) Imogen Buttimore, 2024]

unshackled

Figure 15 - Interface Design 3 / Title of Image: App Screens 3 / Source: [(Online) Imogen Buttimore, 2024]

unshackled

Figure 16 - Interface Design 4 / Title of Image: App Screens 4 / Source: [(Online) Imogen Buttimore, 2024]

unshackled

Figure 17 - Interface Design 5 / Title of Image: App Screens 5 / Source: [(Online) Imogen Buttimore, 2024]

unshackled

Figure 18 - Interface Design 6 / Title of Image: App Screens 6 / Source: [(Online) Imogen Buttimore, 2024]

unshackled

Figure 19 - Interface Design 7 / Title of Image: App Screens 7 / Source: [(Online) Imogen Buttimore, 2024]

unshackled

Figure 20 - Interface Design 8 / Title of Image: App Screens 8 / Source: [(Online) Imogen Buttimore, 2024]

unshackled

Figure 21 - Interface Design 9 / Title of Image: App Screens 9 / Source: [(Online) Imogen Buttimore, 2024]

unshackled

Figure 22 - Interface Design 10 / Title of Image: App Screens 10 / Source: [(Online) Imogen Buttimore, 2024]

unshackled

Figure 23 - Interface Design 11 / Title of Image: App Screens 11 / Source: [(Online) Imogen Buttimore, 2024]

Smartwatch Interface

Once I had completed the app interface, I designed the smartwatch interface version for the heart rate monitor setting. As this was the extra part of the project, I did not spend as much time as I would have liked on this design. Therefore, I would have prototyped this interface as well as design further smartwatch screens if I did this project again.



unshackled

Figure 24 - Smartwatch Figma / Title of Image: Smartwatch Interface / Source: [(Online) Imogen Buttimore, 2024]




unshackled

Figure 25 - Smartwatch / Title of Image: Final Smartwatch Mockup / Source: [(Online) Imogen Buttimore, 2024]

Prototype

I then started to prototype the screens to show how it would be used if it was properly developed. This helped me to identify any issues or missing prototype interactions. Within this project, it allowed me to further improve my prototyping skills by animating loading bars and the symptom severity bars. However, I would have liked to prototype the app to completion so that I could illustrate my full potential of prototyping.

Figure 26 - Prototype / Title of Image: Final Prototype / Source: [(Online) Imogen Buttimore, 2024]



User Testing & Feedback

I received positive feedback from lecturers and peers regarding the interface designs I had finished, with compliments to the colours that I had chosen especially. Unfortunately, I was unable to complete some substantial user testing due to time limits. If I were to complete this project again, I would set aside a dedicated time to carry out user testing because it would give me a better understanding of the user’s journey, and if there were any issues with my prototype.


Time Management

To ensure that I stayed on track with completing the project on time, I created a Gantt chart with what I considered key goals to achieve and estimated time against each one. Each activity is represented by a bar and the position and length of the bar determines the start date, duration and end date (Duke, 2019).

The chart helped to remember how much time should be spent on each task and if a task took longer than expected, or if there were any setbacks a re-evaluation would be completed so that each task will still be completed on time. For example, the ethics forms needed for primary research took a significant time to get signed. In order for the survey to go ahead, a second email was sent to help speed up the research progress. This meant that the survey was sent out later than expected, but it was still able to receive over 60 responses. Alongside a Gantt chart, daily lists were made with a planner as this helped to prioritise the tasks in urgency order, leaving the least urgent till last, such as, finalising designs.



unshackled

Figure 27 - Gantt Chart / Title of Image: App Design Gantt Chart / Source: [(Online) Imogen Buttimore, 2024]



Sustainable Development Goals

Within this project, we had to try and implement sustainable development goal 4.

unshackled

Figure 28 - SDG Goals / Title of Image: Sustainable Development Goal 4 / Source: [(Online) Imogen Buttimore, 2024]


Conclusion

Overall, this was a successful project with the outcome of the design and prototype of an app along with a smartwatch version. The final design exceeded my expectations and reflected my initial visualisation of the app successfully. I was able to accomplish my highest level of prototyping I had done which gave me more confidence as a designer. My knowledge surrounding medical applications drastically improved due to my initial research and outcome, giving me a deeper interest into the world of mobile applications.

The design of HealthHub demonstrates the research undertaken within both parts of the project, including the most valuable features that can improve a user’s overall mental and physical health, as well as offering life saving features. My goals shown within the Gantt chart were completed to a high standard by following the time frame along with following the project's aims and objectives. However, I would have preferred to achieve a higher standard of app feedback as this would have helped me to polish the final outcome.

Thankfully, the design journey was smooth because I had finalised the desired brand guidelines and wireframes early on in the semester, giving me a decent amount of time to finish the final outcome. The only challenge that I had faced was the slight confusion on what I needed to write about after the final outcome was completed. This was cleared up by my lecturer who then gave me some practical feedback. This setback taught me to make sure that all uncertainties should be addressed at the start of the project to ensure that my submission was at a superb level.

I thoroughly enjoyed undertaking this final project because it gave me the opportunity to improve my design skills in multiple areas, and gave me the chance to tackle a project by myself, giving me more preparation for the world of industry. It further enhanced my interest and desire to work within mobile applications and gave me an outstanding project to reflect on my portfolio.


unshackled

Figure 29 - Mockup / Title of Image: App Mockup / Source: [(Online) Imogen Buttimore, 2024]




References / Bibliography / Appendices / Blog / Research Proposal / Live CV / Ethics Form 1 / Ethics Form 3 / Words: 2,148