INFORM
CO-UI/UX DESIGNER • USER Researcher
THE problem
Young adults, particularly women aged 18-24, often feel overwhelmed and uninformed by the sheer volume of nutritional information available. Existing nutrition apps fail to address the "why" behind nutritional guidance, focusing instead on weight loss without explaining the reasoning behind specific dietary recommendations. This lack of clarity leaves users frustrated and unable to make informed, personalized choices about their health - especially those with specific health conditions, such as celiac disease, diabetes, high blood pressure, etc., who require precise dietary management to avoid adverse health effects.
THE solution
Our app bridges this gap by providing personalized nutritional guidance that not only recommends healthier eating options but also explains the "why" behind each recommendation. By leveraging user-provided information, our app educates users on the science of nutrition in an intuitive, accessible way. Whether it’s a busy mom balancing work and family, a recent college graduate navigating new health goals, or someone managing dietary restrictions due to health conditions like celiac disease, our app offers tailored tools and insights. For instance, individuals with celiac disease will receive detailed, science-backed recommendations for gluten-free foods and an understanding of why these options are essential for their health. This personalized and educational approach empowers users to make informed, healthier choices for their unique needs.
overview
Culminating in a prestigious Viz-a-Gogo award for 'Best in Interactive Media,' this comprehensive 15-week project delivered a Figma prototype that surpassed current market offerings in personalization and information. The final deliverables included a purposefully crafted brand guide, an engaging promotional video, and a walkthrough video, collectively showcasing the project's innovative features and user-centric design approach.
Personal growth
This project was a pivotal experience that sparked my journey toward mastering UI/UX design, specifically in crafting components and refining micro/macro interactions. It introduced me to the strategic and creative challenges of designing intuitive user experiences, where every interaction, no matter how small, plays a crucial role in enhancing usability and engagement.
Working with Figma became a key part of my process, allowing me to experiment with component systems and iterate efficiently. Beyond the technical aspects, this project deepened my understanding of how thoughtful interaction design drives user satisfaction. It wasn’t just about creating visually appealing elements; it was about ensuring seamless, delightful interactions that users barely notice yet thoroughly appreciate.
This journey solidified my expertise in creating cohesive design systems and fine-tuning interactive details that elevate user experiences. It reinforced the importance of balancing user needs with design innovation - an approach that continues to inform my work as I strive to create impactful and engaging digital experiences.
FINAL PRODUCT
rESEARCH PROCESS
Embarking on this project, we embraced Human Centered Design principles, weaving them into a comprehensive three-phase research methodology. Our journey began with a deep dive into market analysis, competitive benchmarking, user research, and creative exploration. This initial phase laid the groundwork for our understanding of the nutritional app landscape and user needs.
As we dove deeper, the stark realities of the market became clear. Our analysis unveiled a significant demand for personalized nutrition guidance, with 20 million individuals grappling with food allergies and a staggering 96 million U.S. adults facing pre-diabetes. These numbers weren't just statistics; they represented real people seeking solutions. Our user research echoed this need, with an overwhelming 99% of survey respondents expressing concerns about their nutrient intake, and nearly half reporting dietary modifications due to various health factors.
Armed with these insights, we transitioned into the second phase, meticulously crafting user personas and flow charts to address the pain points we'd uncovered. This process was both challenging and enlightening, forcing us to view the problem through the eyes of our potential users.
The final phase saw us bringing our research to life in a Figma prototype. This wasn't just about creating a visually appealing interface; it was about synthesizing all our findings into a solution that could genuinely address the gaps we'd identified in the market.
Throughout this process, we didn't just look at direct competitors. Our SWOT analyses encompassed both direct and indirect competitors, providing a comprehensive view of the landscape and informing our strategic positioning. We also delved into creative research, exploring food color theory and mobile user interaction principles to enhance the overall user experience.
DESIGN PROCESS
Our design process for Inform began with a comprehensive user flow developed in Miro. I strategically divided the application into four key domains: personal dashboard, food integration, nutrient information, and grocery scanner. This structured approach allowed for precise interface segmentation and targeted design assignments across our team, effectively translating complex user interactions into an actionable design strategy.
As Figma novices, my co-lead Makenna Baylor and I embarked on an iterative learning journey. We started with tablet-based white boxing sketches, progressed to Figma wire-framing, and gradually refined each page into high-fidelity displays. A Behance template served as our guide, helping us master Figma's intricacies in creating frames, interactions, and components.
Being our first mobile application project, Inform's prototyping capabilities were somewhat limited compared to later work. While we successfully implemented inter-page navigation and select micro-interactions, retrospective analysis revealed for more comprehensive prototyping. This experience not only shaped the project but also provided valuable insights for future endeavors, highlighting areas for growth in enhancing user experience and functionality.
Testing & Iteration
Our testing and iteration phase was a hands-on, immersive experience. We utilized Figma's mobile application to conduct direct usability testing, personally interacting with the prototype on our devices. This approach allowed us to systematically refine button placements and navigation flows, constantly striving to optimize the user experience. While external user testing was limited, we compensated by leveraging comprehensive peer and faculty feedback. These expert critiques became the cornerstone of our iterative process, helping us enhance the project's overall user experience and design integrity with each revision.
Persona Driven Design
Throughout this phase, we continually refined and expanded the application's features, always keeping our primary user persona in mind, Skylar Johnson.
Skylar is a 20-year-old female with celiac disease, became our focus. We tailored nutritional guidance and information to address her specific dietary restrictions, ensuring that our app could provide personalized recommendations to mitigate potential nutrient deficiencies associated with food intolerances. This focus on personalization drove our iterations, shaping Inform into a truly user-centric solution.
low fidelity
Our testing and iteration phase was a hands-on, immersive experience. We utilized Figma's mobile application to conduct direct usability testing, personally interacting with the prototype on our devices. This approach allowed us to systematically refine button placements and navigation flows, constantly striving to optimize the user experience.
While external user testing was limited, we compensated by leveraging comprehensive peer and faculty feedback. These expert critiques became the cornerstone of our iterative process, helping us enhance the project's overall user experience and design integrity with each revision.
Throughout this phase, we continually refined and expanded the application's features, always keeping our primary user persona in mind. Skylar Johnson, a 20-year-old individual with celiac disease, became our focus. We tailored nutritional guidance and information to address her specific dietary restrictions, ensuring that our app could provide personalized recommendations to mitigate potential nutrient deficiencies associated with food intolerances. This focus on personalization drove our iterations, shaping Inform into a truly user-centric solution.
HIgh fidelity
The prototype contains 4 main pages which are personal dashboard, food integration, nutrient information, and grocery scanner.
With Inform, you can easily learn nutritional information, understand how each food or nutrient affects your body, and create a list of foods best for you personally.
Using your profile data, Inform scans common grocery items or foods and gives advice on whether it would be beneficial for your body, or if there are better alternatives to fit your personalized needs.
The knowledge and substitutions that Inform provides will enable you to create personalized eating and shopping patterns grounded in nutritional understanding and confidence.
Personal dashboard serves as a centralized hub for users to input, view, and manage their comprehensive health data, dietary preferences, and budget constraints, enabling the app to provide highly personalized nutritional recommendations and insights tailored to everyone's unique profile and goals.
Food Integration serves as a dynamic food exploration and comparison tool, enabling users to discover suitable alternatives, analyze nutritional content, and receive personalized recommendations tailored to their unique dietary needs and health goals
Nutrient Information serves as a comprehensive knowledge hub within Inform, offering users in-depth, personalized insights on food items, nutrients, substitutions, and global food standards, enabling them to make informed dietary decisions aligned with their health goals and nutritional needs.
Grocery Scanner serves as a powerful tool that enables users to instantly access and evaluate nutritional information of grocery items by scanning barcodes, providing personalized ingredient rankings, product comparisons, and shopping list functionality to facilitate informed, healthier purchasing decisions aligned with individual dietary needs and preferences.
IMPACT & RESULTS
The impact of Inform extended far beyond our initial expectations. Shortly after completing our project, we witnessed the release of Fig, a mobile application that mirrored many of our core features. This market validation was both exciting and affirming, confirming our identification of user needs in the nutrition and shopping space. While Fig didn't encompass our full vision for nutritional education, its success and high user ratings corroborated our initial hypotheses, underscoring the potential impact of our prototype.
This experience has been transformative, sharpening my understanding of market trends and user needs in health technology. It highlighted the critical importance of thorough market research and user-centric design in product development. Moreover, it has fueled my ambition to further refine my abilities, setting my sights on creating app store-ready projects in the future. The journey of Inform has not only validated our concept but also paved the way for continued innovation in the realm of nutritional technology.
Our efforts culminated in a prestigious accolade at the 2023 Viz-a-Gogo ceremony, where Inform's mobile application and promotional video clinched the 'Best in Interactive Media' award. This recognition, amidst competition from year-round projects, was a testament to our problem-solving and design implementation skills.
