Responsive design project

Project Brief 

A comprehensive responsive digital product experience that functions flawlessly across mobile, desktop, tablet, and wearable devices is what this project entails creating and prototyping. Like how they use apps like Spotify, Google Maps, or Canvas, users now anticipate seamless and consistent platform switching experiences. The objective is to develop a design that preserves recognizable patterns on all devices while also carefully adapting to each one’s particular environment and use. Separate prototypes that demonstrate how the design changes to fit various screen sizes and devices will be made using Figma. Without writing any code, the emphasis will be on making astute design decisions that guarantee consistency and usability.

Project Proposal

The Health Journey App is designed to help individuals who frequently visit healthcare facilities such as cancer patients, those undergoing regular infusions, or anyone managing health conditions to organize and track their health data into one convenient app as a personalized journal. The Health Journey app will not only provide vital health tracking features like blood pressure, weight, and symptoms, but it will also create a sense of community with collaborative elements for sharing experiences, tips, and advice. It is common for people dealing with health conditions to feel alone but with this app, users will be able to connect to individuals with similar situations. Privacy concerns for the app would be addressed with device passcodes, two factor authentication, and access limitations based on the userโ€™s privacy settings. With integrated tools for medication management, mood tracking, and personalized journaling, the Health Journey App helps users manage both physical and emotional aspects of ongoing health challenges. 

Why is it a problem worth solving?

Since people with chronic diseases frequently have physical, emotional, and logistical difficulties that can result in disorganization, loneliness, and neglected care responsibilities, this is a problem worth fixing. Patients’ ability to effectively manage their conditions in collaboration with healthcare practitioners is crucial for the successful control of chronic diseases, and mobile health technologies have become effective tools to help in this process.

The Work

For this project, I completed all of the work myself, drawing heavily from my personal experience as a long term patient who regularly receives infusions. I also conducted research on individuals living with chronic health conditions to better understand common needs and behaviors. I began by designing a logo from scratch, using Pinterest for inspiration and asking friends what visuals came to mind when they thought of hospitals. After exploring common color schemes in health apps, I selected a pink and orange ombre palette that complemented the logo and reflected warmth and care. I created digital rough sketches of my design ideas and documented the features I wanted the app to include. From there, I developed sketches for mobile, tablet, desktop, and watch versions. I used Figma to start prototyping the app, with most of my time focused on designing the main layout and user interface components like tabs and icons. This was the most difficult phase for me, as I often second guessed my decisions and revised my work repeatedly. I spent extra time on the home page since it is the first impression users will have of the app. For the remaining pages, I took a more intuitive approach, referencing other health app interfaces to ensure consistency with familiar design standards. Each phase took several hours over multiple days, with layout design and homepage development taking the longest due to the many revisions I made.

Design Strategy 

The Health Journal app was created with a strong focus on its intended users: individuals managing chronic health conditions or supporting loved ones who do. These users often range from ages 18 to 90, regularly forget important tasks, and use planners at least a few times a week. Many of them also track health-related goals like exercise, diet, and sleep, and are familiar with social media platforms such as Instagram, Facebook, Threads, and TikTok. The app helps meet their goals by offering tools to organize health data, monitor symptoms and mental health, manage medications, schedule appointments, and engage in supportive communities. The primary device for this app is mobile because it is the most accessible and portable for people who need to track their health on the go. Tablets offer a more comfortable journaling experience at home or in a hospital setting, while desktops provide easier access to collaboration spaces and more efficient multi-tasking. Smartwatches offer quick, lightweight access to core features for users with chronic illnesses who need reminders or emergency support at their fingertips. The feature set includes advice and tips, collaborative feed, journals, appointments, mood tracking, a general tracker, figurines, and the ability to customize journals. Mobile, tablet, and desktop versions support all features. The watch version includes only advice and tips, appointment reminders, and the mood tracker due to screen size limitations. Features that are automated include advice and tips, appointment reminders, and the mood tracker. These use automation by responding based on the user’s mood, sending daily mood check-in notifications, offering personalized tips, and reminding users of scheduled appointments. Monetized features include journals, the mood tracker, and customizable journal designs. Additional monetization options include unlocking more tracker templates, brushes for journaling, and unique figurines to visually mark important notes or health events. These strategies were chosen to keep the core functionality accessible while offering enhanced personalization and support through optional upgrades.

Usability Test Feedback

Executive summary:

From my research findings, it was difficult for the user to navigate where something was located without there being a prominent icon in the main page. According to the user, the layout could be more universal and user friendly. 

Quantitative:

  1. 1 of 1 participants found the navigation bar to be better on the top with everything else. 
  2. 1 of 1 participants found the navigation to the journals confusing.
  3. 1 of 1 participants was struggling to download the entry.

Qualitative:

  1. โ€œJournals is a little difficult to findโ€ – Participant 1
  2. โ€œIt would be cool if I could tap on the journal to pen it because it was my first instinctโ€ – Participant 1
  3. โ€œIf I was going to use the back button, it would be more on the topโ€ – Participant 1

Design updates

High priority:

  1. Having the important buttons on top versus on top and bottom. This seems more universal to all phones instead of just apple.
  2. Putting the journals feature button somewhere within the main page. This will make it easier for the user to find. 
  3. Fix the settings buttons to actually work. They seem to be working on my screen but on the userโ€™s screen it is frozen.

Medium priority:

  1. Make the download pop up more visible. The popup should be higher so that users can have an easier time seeing it. 
  2. Make the journal clickable. Users are more likely to click on visuals than words. 
  3. Figure out if my prototype is on the wrong phone because the user shouldโ€™nt have to scroll on every page.

Low priority:

  1. Possibly making the profile picture into something that’s clickable. 
  2. Make the profile picture go to a quick edit of their profile. 
  3. Select a new journal icon for a more visually recognized one. 

Prototype link: Brittney Than’s Prototype

Flow Chart Link: Brittney Than’s Flow Chart

Prototype Walk Through: https://www.awesomescreenshot.com/video/39703541?key=dfcecd1d853552af70b3fdd1c81192bc

Citations

Kaman Fan. The successful control of chronic diseases mainly depends on how well patients manage their disease conditions with the aid of healthcare providers. Mobile health technologyโ€”also known as mHealthโ€”supports healthcare practice by means of mobile dev. (2021, July 11). Mobile Health Technology: A novel tool in chronic disease management. Intelligent Medicine. https://www.sciencedirect.com/science/article/pii/S2667102621000346#:~:text=In%20a%20systematic%20review%20and,and%20glucose%20levelStampe, K., Kishik, S., &

Mรผller, S. D. (2021, June 15). Mobile Health in chronic disease management and patient empowerment: Exploratory qualitative investigation into patient-physician consultations. Journal of medical Internet research. https://pmc.ncbi.nlm.nih.gov/articles/PMC8277350/