Zinnia Health iOS Application.

09 Jan 2024
A dedicated mobile platform that guides Zinnia Health alumni beyond treatment—fostering connection, offering personalized support, and inspiring continued growth on the path to sustained wellness.
Hero image for Zinnia Health iOS Application.
Zinnia Health
Zinnia Health
Client
hero watermark background

Tech Stack

Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo

Services

#Product Strategy
#User interviews
#Research
#Product Design
#UI/UX
#Product Development
#Mobile Development
#IOS and Android Development
#Analytics Integration
About project

Client and idea

Zinnia Health is a mission-driven healthcare provider and our valued partner. They engaged our team to design and develop a mobile application that offers seamless access to personalized support, community interaction, and user-friendly tools, empowering their alumni to continue on their path to long-term well-being.

Challenge & Goals

Operating in a sensitive and highly competitive mental health and recovery space, Zinnia Health needed a mobile solution that would truly resonate with its alumni community. The challenge lay in not only meeting strict usability and security requirements but also conveying trust, compassion, and ongoing support through every interaction. Our goal was to craft a digital experience that feels both personal and empowering—seamlessly blending intuitive navigation, meaningful community features, and visually inspiring design to promote sustained engagement and long-term wellness.

Solutions & Result

Guided by in-depth user research and competitive analysis, we developed a cohesive information architecture and user flow tailored to the needs of Zinnia Health’s alumni community. Our team iteratively tested UX wireframes to ensure intuitive navigation, seamless social interaction, and frictionless access to key resources. By incorporating a soothing color palette, uplifting visuals, and thoughtful typography, we established an environment that fosters trust and encourages ongoing engagement.

As a result, the mobile app offers a supportive, easily navigable, and visually inspiring platform—boosting user satisfaction, sustaining motivation, and ultimately improving the long-term wellness outcomes for Zinnia Health’s alumni.

1140
h
design
1312
h
development
4.5
rate in AppStore
project Overview

Main app features

Zinnia Health’s mobile app empowers users along their recovery journey by providing access to a supportive community, personalized tools, and essential resources. Users can track their sobriety milestones, complete daily check-ins, discover engaging mental health content, and find local meetings—all within a secure and intuitive interface.
Image interface

Self help and modules

The self-help modules provide on-demand access to essential resources—articles, meditations, and interactive activities—empowering users to independently cope with their addiction challenges. By simply indicating their current mood, individuals receive personalized, mood-specific support that aligns with their emotional state. This tailored experience not only encourages long-term recovery by reducing relapse risks, but also enhances motivation and satisfaction through gamified progress tracking. Focused on self-healing, the modules continually adapt to users’ needs, ensuring a highly accessible, user-centric path toward sustained well-being.

Sobriety clock

The Daily Check-In prompts users to briefly reflect on their mental and emotional state, asking questions about mood, cravings, triggers, and daily progress. These quick surveys help users identify patterns, stay mindful, and maintain accountability—while also enabling the app to suggest tailored resources to keep them on track. Complementing these daily reflections, the Monthly Survey offers a more comprehensive review of one’s overall journey, delving deeper into patterns and progress over the past month. Together, these tools provide both immediate insights and long-term perspectives, supporting sustained well-being and growth throughout the recovery process.

Daily checkins and surveys

Daily check-ins and regular surveys create a structured framework for self-reflection and progress assessment. By prompting users to note their feelings, habits, and challenges, these tools help identify trends, reinforce positive behaviors, and highlight areas in need of additional support. Over time, this feedback loop provides valuable insights, guiding both users and their support networks toward more effective and personalized recovery strategies.

Rewards and medallions

The app’s rewards and medallions system provides tangible recognition for key accomplishments, transforming users’ progress into meaningful milestones. By celebrating each step in the journey—whether it’s a week, month, or year of sobriety—these visual tokens instill pride, enhance motivation, and reinforce the positive habits that underpin lasting recovery.

Motivation and journey

The app’s holistic approach ensures that users stay connected with their personal growth, offering inspiring content, encouraging feedback loops, and supportive community interactions. Each feature—be it daily check-ins, milestone celebrations, or curated self-help modules—works together to maintain motivation, highlight progress, and nurture a sense of purpose. As users advance, they gain the confidence to navigate challenges, celebrate wins, and embrace a sustainable journey toward long-term well-being.
Development

Methodology

We prioritize modern design principles, current industry trends, and cutting-edge technologies. By developing the application with React Native, we ensured a smooth cross-platform experience and efficient performance. Throughout the process, we conducted thorough testing to validate every feature, ultimately delivering a high-quality product that aligns with both user needs and our commitment to excellence.

Design process

Research

Our team examined over a dozen competitor offerings and conducted qualitative interviews with end-users to pinpoint critical gaps in existing mental health support applications. By identifying pain points in navigation, community engagement, and privacy settings, we refined our approach to ensure that best-in-class UX solutions were supported by a reassuring UI design. As a result, we incorporated industry-leading practices, making the experience more intuitive, secure, and empathetic for Zinnia Health’s alumni community.
Design process

Sitemap

We developed a comprehensive sitemap outlining the app’s information hierarchy and navigation paths, ensuring that every user journey—from accessing community features to tracking personal progress—flows smoothly. By leveraging user story mapping, we validated each interaction, confirmed there were no loose ends, and optimized the structure to consistently deliver a clear, supportive, and engaging user experience.
Full with interface image
Design process

UX Wireframes

Following the refinement of the app’s core functionalities, our team developed multiple iterations of high-fidelity wireframes. This iterative process allowed us to fine-tune every aspect of the user journey, ensuring intuitive navigation, seamless transitions, and a welcoming environment that encourages ongoing engagement and support.
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
We created clickable wireframes to simulate a prototype that is similar to the end product. We developed and carried out user testing for prototype validation. This helped us to test every hypthesis before proceeding to the development stage.
UI ImageUX Image
Design process

UI Design

We crafted a visual language that feels both soothing and inspiring—prioritizing calming color palettes, gentle gradients, and inviting typography. By incorporating subtle animations and streamlined interface elements, the design remains easy on the eyes, reducing cognitive load and distractions. This approach ensures that users can comfortably engage with the app over extended periods, maintaining focus, reinforcing trust, and supporting the emotional well-being essential for a sustainable recovery experience.

Design Concept

Our design concept centers on cultivating a supportive, uplifting digital environment that reflects Zinnia Health’s core values of trust, empathy, and long-term growth. By harmonizing calm color palettes, reassuring imagery, and intuitive layouts, we sought to create an experience that gently guides users through their recovery journey. Every element—from visual cues to interactive components—is thoughtfully arranged to foster confidence, encourage meaningful engagement, and maintain a sense of emotional comfort throughout the user’s healing process.

Slider mockups image 0
Slider mockups image 1
Slider mockups image 2
Slider mockups image 3
Slider mockups image 4
Slider mockups image 5
Slider mockups image 6
Slider mockups image 0
Slider mockups image 1
Slider mockups image 2
Slider mockups image 3
Slider mockups image 4
Slider mockups image 5
Slider mockups image 6
Slider mockups image 0
Slider mockups image 1
Slider mockups image 2
Slider mockups image 3
Slider mockups image 4
Slider mockups image 5
Slider mockups image 6

Main page

We designed the main page as a welcoming hub that guides users effortlessly through key features and content. By prominently displaying essential tools, motivational prompts, and quick access to community interactions, the main page helps users orient themselves and begin their daily routine with ease. Through iterative testing and user feedback, we refined the layout, navigational elements, and overall aesthetic, ensuring that this central touchpoint felt both intuitive and reassuring—empowering users to confidently navigate their journey from the very first interaction.

Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image

Statistics for staff and admin

Zinnia Health’s app provides staff and administrators with a dedicated analytics dashboard, presenting aggregated data on user engagement, completion rates of surveys and modules, and community participation trends. By transforming raw metrics into clear, actionable insights—such as identifying patterns of relapse risk or highlighting which content resonates most—these statistics empower care teams to make informed decisions, refine support strategies, and ultimately enhance the quality of care and long-term outcomes for all alumni.

Full with interface image

Alumni pages

The alumni pages serve as personal profiles that celebrate each individual’s recovery journey, enabling them to share milestones, interests, and motivational stories. By featuring customizable fields—like bios, activities, and personal achievements—these pages foster authenticity and community connection. This personalized space not only encourages alumni to reflect on their growth, but also inspires others to find hope, support, and a sense of belonging within the broader recovery network.

Full with interface image
Branding

Typography

We chose Roboto for its clean, versatile character forms and strong legibility across various screen sizes and resolutions. As a widely supported typeface, Roboto excels in multilingual environments, ensuring that every user—regardless of language—experiences a consistent, readable, and visually harmonious interface. This focus on clarity and accessibility supports users through prolonged reading sessions, reinforcing comfort and trust throughout their journey.
Roboto
RegularMediumBold
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
010203040506070809
Branding

Colors

We selected a soothing palette that balances trust, clarity, and uplifting energy. The brand blue establishes a confident and reliable foundation, reflecting Zinnia Health’s commitment to long-term support and integrity. Complementing this, the emerald introduces a sense of renewal and vitality, inspiring hope and personal growth. Crisp white provides a clean, inviting backdrop, while subtle gray tones ensure comfortable readability. Together, these colors create a visually cohesive environment that feels both reassuring and motivating throughout the user’s journey.
#54B9C0
Emerald
#1D2F5D
Brand blue
#FFFFFF
White
Consistancy

Design system

Our design system ensures a cohesive and empathetic user experience by unifying color palettes, typography, and interactive elements. We prioritized clarity and simplicity, choosing clean layouts, spacious margins, and thoughtfully balanced visual elements to communicate trust, calm, and optimism. By maintaining consistent component behaviors and styling rules, we created a reliable foundation that streamlines development, fosters brand recognition, and supports users’ emotional well-being throughout their entire journey.
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image

Conclusion

Our work with Zinnia Health shows that a well-designed mobile application can empower alumni on their path to lasting recovery. By aligning intuitive UX, empathetic visuals, and meaningful interactions, we created a platform that fosters trust, community, and long-term engagement—supporting users every step of the way.