ZenZen

A native mobile app designed for Android and iOS aimed at supporting gestational diabetes, a form of diabetes that develops during pregnancy.

The Project

ZenZen is an app that provides support for women who have developed gestational diabetes during pregnancy. It provides mental and behavioral health support to manage symptoms and promote healthier choices. Support includes health tracking through supportive AI Chat, meal planning and tracking, activity tracking, and health data tracking. My role in this project was to transform the visual interface of the app and support the development of cohesive user flows. The MVP for ZenZen is currently in development.

Team

Myself - UI Designer, Illustrator

Susa H. - UX Researcher & Designer

Zsuana F. - UI Designer

Victor H. - Developer

Timeframe

2 months

OVERVIEW

Gestational diabetes is a type of diabetes that can impact women during pregnancy, and if left untreated, can cause harm to both the mother and baby. For women impacted by gestational diabetes, they can be left wondering:

How can I effectively manage my blood sugar level? What systems of support are offered to monitor carbohydrate intake throughout the day? How can I feel supported during this time?

Problem

Pregnant women who are experiencing gestational diabetes need systems of support and intervention in order to efficiently manage blood glucose levels throughout their pregnancy. Making healthy food choices and maintaining an active lifestyle are ways in which blood glucose levels can be kept at healthy levels. When approached with this project, the current stage of design did not meet the stakeholder's vision of an app that felt calm, playful, and supportive.

Solution

To meet user needs, ZenZen was created to provide a system of support by offering meal planning capabilities, food shopping lists, health tracking, and AI chat technology to efficiently track and support health throughout the pregnancy. By designing a visual interface that is welcoming, supportive, and fun, and by creating an engaging conversational design, users will be motivated to stay on track when managing gestational diabetes. Additionally, by improving aspects of the current user flow, users will be able to more efficiently create weekly meal plans and track blood glucose levels.

Thank you! 🤗

Mood Board 1

Mood Board 2

SETTING THE MOOD

I had the pleasure of joining the ZenZen team during the design stage, where I was presented with a set of user flows, mid-fidelity wireframes, and the desired tone that should be captured within the app's design and interface. The primary goal was to create a design that felt supportive, kind, and trustworthy. Additionally, it was specified that the interface should feel fun and playful. When considering accessibility and tone, we ultimately chose Mood Board 1 for a greater contrast ratio and its organic feel.

Recipes vs Cookbook

Main issues:

Not enough visual distinction between searched recipes and saved recipes
Cluttered interface
Minimal search, filter and sort options

Design solutions:

Create specific layouts for recipes on the database and those saved to the device for offline use
Incorporate search, filter and sort options as an overlay screen

Dashboard Screens

Main issues:

Users had difficulty navigating back to the dashboard
Difficulty differentiating between the "Recipes" and "My Cookbook" icons on the navigation menu
No clear vision of how to display data

Design solutions:

Include a "Home" tab in the bottom navigation
Combine "Recipes" and "Cookbook" in the main navigation and incorporate a secondary tab menu to differentiate between searching recipes and saved recipes.
Design empty states and cards that display essential data for tracking and monitoring

DESIGN

When considering the key features for functionality, our primary focus was to create a user dashboard that highlighted essential information for managing blood glucose levels. Based on market and user research the following were included: Upcoming meals as identified by the user's meal plan, data from the user's last blood glucose check, a timer for the next blood glucose check, and a daily activity tracker. Secondary to the dashboard, we focused on designing screens associated with meal planning. These included screens used for searching for and saving recipes to a personal recipe book, adding meals to a meal plan, and shopping list views.

DESIGN SYSTEM

We started the project by creating a component library of colors, typography, type scale, and reusable components for ZenZen. This provided greater internal consistency when working with multiple designers, quicker iterating when necessary, and a greater overall cohesiveness between screens. Based on the mid-fidelity wireframes, the reusable components designed at this stage included top app bars, navigation drawer menus, buttons and all of their necessary states, and icons.

Screenshots from Component Library

We focused on improving the fidelity of the most commonly used components from the mid-fidelity wireframes and then used these as the building blocks for our high-fidelity screens.

USER FLOW & ITERATION

During the process of designing the dashboard, the UI team ran into a few unexpected issues! As we began to branch out to screens accessible from the dashboard, we became aware that there was no clear user flow for adding meals to the meal planner from different use cases. We worked on creating a more developed user flow for this task before moving on to screen design.

Meal Planning

ILLUSTRATIONS

I was also tasked with creating illustrations to represent the different categories of available recipes. It was decided that illustrations would be used rather than photographs to create faster loading times, to decrease the required storage for downloaded materials, and to maintain the visual direction of ZenZen. I was instructed to create simple and playful illustrations with varying details to be used for thumbnails and expanded views.

ITERATION: NOT QUITE RIGHT

Nearing the completion of the final UI, we were all in agreement that something was not quite right and we began to consider the main green color used throughout the interface. Ultimately, it did not represent the playfulness and warmth that we initially sought. While it perhaps conveyed a sense of safety and growth, and met the accessibility guidelines contrast ratios, we felt that it wasn't the right choice of color for the desired tone.

Design Changes:

All white navigation across all screens for consistency and creating lightness
Since the in-app chat will become a main feature of support, access to the chat was relocated to the bottom navigation as a FAB for greater accessibility and prominence.

CHALLENGES & REFLECTIONS

The biggest hurdle during the first phase of the project was navigating through creating user flows without having been the one to conduct the research. The UI team joined ZenZen after the first prototype was created and was initially tasked with creating the final design without knowing the specific issues that users were encountering, having only a cursory understanding of the user flows for the many features of ZenZen. Additionally, as a small company, our resources and time were limited. As a full cross-collaborative team, we were ultimately able to step back and focus on the necessary features for the MVP and together, work to develop clearer flows to address usability issues.

Throughout the design process, we knew we wanted to ensure contrast ratios met accessibility guidelines. We often struggled to find a color palette that met the accessibility guidelines and maintained the aspect of playfulness, trust, and warmth. The use white and additional negative space was just what we needed and something to keep in mind for future designs!

WHAT'S NEXT?

While the current designs are being developed for the MVP and continued usability testing, the next UI design phase will be to enhance the conversational design feature. In our upcoming phase our focus will be on further developing the AI response and use cases for our AI chatbot. Additionally, we will also be working to develop user flows for account management and onboarding, and working with the brand specialist to further develop our design system.