Working on the Care4Today app project was a great learning experience. While the main goal of the website was to showcase the app, it also provided valuable resources for new and existing patients. This site aimed to offer a comprehensive view of what Care4Today brings to health management.
As the UI designer, I collaborated closely with a UX designer. Together, we worked on more than just visuals—we aimed to create an experience that balanced design and functionality. From early wireframing to final UI tweaks, every part of the process was about making sure the app's essence came through.
Working on the Care4Today app project was a great learning experience. While the main goal of the website was to showcase the app, it also provided valuable resources for new and existing patients. This site aimed to offer a comprehensive view of what Care4Today brings to health management.
As the UI designer, I collaborated closely with a UX designer. Together, we worked on more than just visuals—we aimed to create an experience that balanced design and functionality. From early wireframing to final UI tweaks, every part of the process was about making sure the app's essence came through.
Working on the Care4Today app website was a valuable experience. As the UI designer, I collaborated closely with a UX designer to create a balanced and functional experience. From wireframing to final UI adjustments, we focused on ensuring the app’s essence was clearly conveyed.
Working on the Care4Today app website was a valuable experience. As the UI designer, I collaborated closely with a UX designer to create a balanced and functional experience. From wireframing to final UI adjustments, we focused on ensuring the app’s essence was clearly conveyed.
Problem
Patients and healthcare providers lack a centralized, user-friendly platform for accessing educational resources, app features, and study information, leading to fragmented and inefficient user experiences.
Solution
The Care4Today website unifies these resources into a single, intuitive platform, delivering comprehensive support, seamless navigation, and accessibility for both patients and providers.
Methodology
We started by analyzing the Care4Today app to identify user needs and pain points. Through collaborative wireframing sessions, we defined the user experience, ensuring it balanced functionality and ease of use. Using Figma, we designed a UI that incorporated existing brand elements while addressing user goals. Interactive prototypes streamline
Problem
Patients and healthcare providers were struggling with scattered resources that weren’t always easy to access or navigate. This fragmented experience made it tough to get the most out of the Care4Today app, which was meant to be a helpful tool for managing health. The challenge was to bring all of these resources together in one place.
Solution
We designed a streamlined platform that brought everything together—educational articles, app features, and research studies—into one easy-to-use site. This gave users (both patients and providers) a simple, efficient way to find what they needed and make the most out of the Care4Today app.
Methodology
We started by looking closely at the Care4Today app itself to understand what users needed and where they were facing friction. Then, we dove into wireframing and user flow with a UX designer, which helped us create a clear structure. In Figma, I designed the user interface with a focus on keeping things simple but functional. With interactive prototypes, we tested the design and made quick changes based on real user feedback, making sure everything was aligned with both the app’s needs and the overall user experience.
We started by diving deep into the Care4Today app’s features, which helped set up a smooth wireframing process. Our goal was to simplify the website’s usability, considering how users might interact with a new tool. The site was broken down into five main sections: Home, Educational Resources, Our Studies, FAQs, and For Providers.
Home: Showcases the app through a video walkthrough and highlights key features.
Educational Resources: Offers informative articles like “Understanding Your Condition” and other wellness tips.
Our Studies: Focuses on the research and developments tied to Care4Today.
FAQs: Addresses common questions, giving users a quick way to find answers.
For Providers: Guides healthcare professionals on how to use the app and share its benefits with patients.
This structure made navigation straightforward, ensuring users could easily find what they needed.
We started by diving deep into the Care4Today app’s features, which helped set up a smooth wireframing process. Our goal was to simplify the website’s usability, considering how users might interact with a new tool. The site was broken down into five main sections: Home, Educational Resources, Our Studies, FAQs, and For Providers.
Home: Showcases the app through a video walkthrough and highlights key features.
Educational Resources: Offers informative articles like “Understanding Your Condition” and other wellness tips.
Our Studies: Focuses on the research and developments tied to Care4Today.
FAQs: Addresses common questions, giving users a quick way to find answers.
For Providers: Guides healthcare professionals on how to use the app and share its benefits with patients.
This structure made navigation straightforward, ensuring users could easily find what they needed.
Wireframing with the UX Team
Wireframing with the UX Team
The design phase started with a look into existing assets, providing a solid foundation to build on. I explored the Care4Today app’s interface, understanding its visual language and user flow. Beyond that, I looked into the broader branding of Care4Today and Janssen to make sure the website would stay consistent with their look and feel. This step wasn’t just about replicating colors and fonts; it was about capturing the brand's essence. By blending the app’s style with Janssen’s overarching design principles, we maintained a consistent and cohesive visual experience throughout the website.
Wireframing was a crucial step in getting everyone on the same page. We broke the website down into five main sections: Home, Educational Resources, Our Studies, FAQs, and For Providers. This simple structure kept everything easy to navigate:
Home: The home page features a video walkthrough that highlights key app features and its benefits.
Educational Resources: Articles covering everything from condition management to wellness tips.
Our Studies: A section that showcases the latest research tied to Care4Today.
FAQs: Common questions answered, giving users quick access to important information.
For Providers: A guide to help healthcare professionals understand the app and its benefits for patients.
Each section was designed to make it easy for users to find what they were looking for without wasting time.
Design Research & Brand Consistency
Design Research & Brand Consistency
Design Research &
Brand Consistency
Before jumping into design, I took a close look at the existing Care4Today app to get a feel for its style and tone. But I didn’t stop there. I also reviewed the broader Janssen brand guidelines to make sure the website stayed consistent with their identity. It was more than just using the same colors and fonts—it was about making sure the website captured the same feel and user-friendly vibe as the app, while aligning with Janssen’s professional image.
Once we had a solid structure, I got to work on designing the UI. I wanted the site to be both appealing and practical. Using imagery that reflected real-life patients and healthcare providers, I incorporated elements from the app to tie everything together. The design used four primary colors to distinguish different sections, and I added a subtle gradient header for depth. Icons were kept simple and intuitive, making it easy for users to navigate.
To keep the interface clean, we used neutral tones for text, with pops of vibrant color in icons and buttons to draw attention to key areas. This not only helped break up the content but also made the site more visually engaging without overwhelming the user.
Collaboration with Development
Collaboration with Development
Once the UI design was locked in, I built out an interactive prototype in Figma, which helped the development team get a feel for the site’s flow and animations. We worked closely together through Figma, iterating on the design and addressing technical challenges early on. This collaborative approach helped us smooth out potential issues, ensuring the website looked and felt as intended when it was finally developed.
Testing and iteration were key to getting the final design right. Throughout the process, I focused on usability and accessibility to make sure the site worked well for all users, regardless of their background or needs.
Usability Testing: We ran tests with different users, including patients and healthcare providers, to see how they navigated the site and where they got stuck. This helped us refine everything, from content clarity to app feature explanations.
Accessibility Review: We made sure the site was fully accessible by checking color contrast, font sizes, and keyboard navigation against WCAG standards. This was important to ensure we weren’t leaving anyone out.
A/B Testing: We tested two different homepage designs to see which one worked best in terms of engagement, time spent on the page, and click-throughs to the app download links. The layout that had the best user engagement was chosen for the final version.
By integrating feedback from these tests, we kept refining the design to make sure it worked seamlessly for all users while staying true to the Care4Today and Janssen brand.
The final Care4Today website achieved our goal of creating a user-friendly, accessible platform that helped patients and healthcare providers navigate the app and its resources with ease. The streamlined design not only looked great but also worked efficiently, offering a clear and engaging experience. The project reinforced the importance of a solid UI/UX process and taught me a lot about the power of collaboration and iterative design.
