FIU Thrive: Intelligent Health & Social Care Design System
A next-generation design system for a mobile platform that leverages AI and mHealth to improve patient outcomes through personalized care plans and seamless resource navigation across 12 health domains.
Elevating Healthcare Through Design
The FIU Thrive project is a next-generation intelligent system for health and social care screening, coordination, and management. Leveraging advancements in artificial intelligence and mobile health applications, the FIU Thrive platform aims to improve patient outcomes by providing personalized care plans and resource navigation.
As part of the project, I developed a comprehensive design system to ensure a cohesive, accessible, and user-friendly interface across the application. The project was already running when we arrived, but it lacked clarity and shape. We took the existing design system and elevated it to build clean screens that are both beautiful and usable.
Building a Mobile App for Complex Health Services
Florida International University had a project to build a mobile app that connects users with different services that may help them across 12 health domains. The challenge was to create a system that could handle complex health assessments while remaining intuitive and accessible.
Key Requirements
The platform needed to enable personalized health assessments, goal selection based on user responses, seamless service integration with contact mechanisms, and flexible goal setting at any point in the user journey. All of this had to be supported by a robust, scalable design system that could evolve with the product.
Sub-Atomic Level Design Tokens
The sub-atomic level of the FIU Thrive design system focused on the smallest and most fundamental units of the design—tokens. Design tokens are named entities that store visual design attributes such as colors, typography, spacing, and shadows.
Typography Tokens
Color Tokens
By utilizing Tokens Studio and managing these tokens through a .json file, we ensured that all design properties were centralized and easily maintainable. This approach allowed for real-time updates and synchronization between design and development teams.
Building Blocks of the Interface
Building upon the tokens, the atomic level consisted of the basic elements of the user interface. These atoms included foundational visual components such as colors, typography, spacing, borders, and box shadows. Each atom was designed to be reusable and consistent.
Text Styles
We established a clear typographic system with specific font sizes, weights, and line heights. Each text style was designed to be reusable and consistent, ensuring a cohesive visual language across the application.
Icon System
A comprehensive icon library was created to ensure visual consistency. Icons were designed to be clear, recognizable, and accessible across different contexts within the app.
Grid System
A flexible grid system was established to ensure consistent layout and spacing throughout the application, providing a solid foundation for all UI components.
Simple, Functional Groupings
At the molecular level, the design system combined atoms to create simple, functional groupings. Molecules were composed of multiple atoms working together to perform specific functions.
Form Fields
Form inputs combined typography, spacing, and color atoms to create consistent, accessible input components that work seamlessly across the application.
Toggle Controls
Interactive controls were designed with clear states and feedback, ensuring users always understand the current status of their selections.
Button System
A comprehensive button system with multiple variants, states, and sizes was created to handle all interaction needs throughout the application.
Complex Composite Components
The organism level involved assembling molecules into more complex, composite sections of the user interface. Organisms were larger components that consisted of multiple molecules and atoms working together.
List Components
Complex list structures were designed to display health services, goals, and assessments in an organized, scannable format.
Navigation System
A tab-based navigation system was created to help users move seamlessly between different sections of the app while maintaining context.
Product Cards
Service and resource cards were designed to present complex information in digestible, actionable formats that encourage user engagement.
Side Menu
A comprehensive navigation menu provides access to all major app sections while maintaining a clean, uncluttered interface.
Key User Flows
The FIU Thrive platform guides users through a series of personalized experiences designed to help them improve their health across multiple domains.
Personalized Health Assessments
FIU Thrive allows users to complete checkups to assess their health across 12 different domains. Based on their answers, they are prompted to select goals in areas where they need improvement.
Seamless Service Integration
After selecting goals, users can add services to their plan. The app provides contact mechanisms for those services, making it easy to take action.
Flexible Goal Setting
Users can always set more goals at any point and select services for those goals, creating a dynamic, personalized health journey.
Professional Stakeholder Communication
Throughout the project, we maintained a high level of transparency and professionalism in communication with FIU stakeholders. Regular meetings were held to provide updates on progress, discuss challenges, and gather feedback.
Design System
Built a comprehensive 5-level design system from tokens to templates, ensuring consistency and scalability across the entire platform
Token Management
Utilized Tokens Studio and .json files for centralized, maintainable design properties with real-time sync between design and development
Health Domains
Created flexible UI components that work seamlessly across all 12 health domains, from physical wellness to social support
Accessibility
Ensured all components met accessibility standards, making health services available to users of all abilities
Collaboration
Maintained transparent communication with FIU stakeholders through regular meetings, actively listening and fostering collaboration
Scalability
Created reusable, modular components that enable rapid iteration and feature development as the platform grows
Need a Scalable Design System?
Let's discuss how a comprehensive design system can elevate your product and streamline your development process.