HealthConnect
TREATING OVERCOMPLICATED HEALTHCARE
People can often struggle to juggle all the different aspects of their health. Scheduling appointments with multiple doctors, remembering to get prescriptions refilled, and keeping track of various symptoms can be a lot to deal with on top of everyday life.
HealthConnect is a proposed solution to this problem. It’s an all-in-one app that can connect to multiple patient portals and pharmacies, with extra sections for tracking symptoms and medical history.
Currently, I have developed the brand identity for the app. This case study shows the process of developing several aspects of the brand that will later be incorporated into the app.
Background
GOALS
The goals of HealthConnect are to:
- Provide an easier way to manage different doctors and offices.
- Provide an easier way to keep track of appointments and which appointments need to be scheduled
- Provide an easier way to keep track of prescriptions and when they need to be refilled
- Provide a clean and professional interface
User research
This app will mainly benefit the average person with everyday health concerns, but it’s likely to be considered most useful among those with chronic health issues. Everybody must have occasional check-ups and wellness exams which can be easy to forget about and miss, but HealthConnect can be especially useful for those with more serious medical concerns.
Visual Research
The main goal with the design elements was to create a calm and assuring aesthetic. I want the app to help the user feel assured that they can relax and let go of their mental load when it comes to their medical—concerns as if the app has their hand and is saying “Relax, we got you.”
The mood board shown above was the first attempt at visually creating the desired aesthetic for the app. I was trying to achieve the calm and assured feeling that doctors try to provide in their offices. For example, they use the soft voice when questioning you about your symptoms, make assuring nods while checking your vitals, tell you you’re doing a good job while breathing for the stethoscope, etc.
Persona Traits: calm, clean, professional.
Development
MoSCOW Analysis
I wrote out several potential features for the app to include in the designs and sorted them by priority.
Visual Design
I brainstormed logo ideas by mind-mapping things related to “health” and “connection,” as those were main things associated with the app.
I sketched out various logos by combining concepts from the mind mapping.
The final design for the logo is a fingerprint shaped like a heart. The heart represents health and wellness while the fingerprint is a way to symbolize how the app is a way to connect all health information, as well as also being another potential health symbol. Since fingerprint readers have become mainstream on smart devices, fingerprints have become visually associated with logins and digital security. The app serves as a single login for viewing health information and is a way to easily give the user a way to have everything they need for their health at their “fingertips”, the fingerprint visual makes sense for a logo.
Once I created a cleaner drawing of the logo, various colors were put over it, with a focus on cooler colors. The primary color for the app was selected and a broader color palette was created based on the logo and the visual goals established in the mood board.
This is the final logo set for the app.
Final Thoughts
Conclusion
This project was my first experience with design systems and styles within Figma. I experienced a bit of a learning curve designing for web since my previous experience was print design using InDesign’s paragraph styles.
I experimented a little bit with Adobe’s Firefly in this project to help generate a fingerprint for the logo. I cleaned up the result to get a better-looking vector.
Next Steps
If I’m able to continue with this project, I’d like to:
- Perform card sorting tests and design the information architecture
- draft sketches for various app screens.
- Create digital wireframes for app screens in Figma.
- Finish final designs for app screens.
