FIU Thrive

Health app · Design system · 2023

FIU Thrive is Florida International University’s AI-powered platform for health and social care screening, coordination, and management. When we came in, the project was already underway, but it was missing clarity and shape: we took its design system and turned it into a five-level one, from tokens to screens.

FIU Thrive app screens on two floating phones

Client: Florida International University
Year: 2023
Our role: UI/UX design and design system
Platform: Mobile app

12: health domains
5: design system levels
100%: token-based

Context

Health, AI, and a phone.

The platform puts AI and mobile health apps to work for better patient outcomes, with personalized care plans and a resource guide.

Our role: a complete design system to keep the app consistent, accessible, and easy to use.

The challenge

Complex services, simple app.

The app connects every user with services across twelve health domains, and it has to handle complex assessments while staying intuitive and accessible.

01Personalized health assessments.
02Goals chosen based on the answers.
03Built-in services, with a way to contact each one.
04Being able to set new goals at any time.
05A solid system that grows with the product.

From token to screenFive levels: tokens, atoms, molecules, organisms, and user flows.

How we worked

The process, step by step

01
Tokens
Colors, typography, spacing, and shadows as named entities, managed in Tokens Studio and a .json file.
02
Atoms
Text styles, icon system, and grid: basic pieces that are reusable and consistent.
03
Molecules
Form fields, toggles with clear states, and buttons with variants, states, and sizes.
04
Organisms
Service and goal lists, tab navigation, service cards, and a side menu.
05
User flows
Assessments across twelve domains, goals, services added to the plan, and new goals at any time.

Problems & fixes

Problems we ran into and how we fixed them

A project in motion, but shapeless
Problem
The app already existed, but its design lacked clarity and structure.
Fix
We started from the existing system and took it all the way to clean, beautiful, usable screens.
Design and code, in lockstep
Problem
Every visual change could break the consistency between design and development.
Fix
Tokens centralized in Tokens Studio and a .json file.
Result
Changes synced in real time between both teams.
Twelve domains, one interface
Problem
From physical wellness to social support, every domain has its own information.
Fix
Flexible components that work the same across all twelve.
Built for everyone
Problem
A health app has to serve people with very different abilities.
Fix
Accessibility as a priority in every component, plus regular meetings with FIU to review progress and gather feedback.