Summary ✦
Design Focus
UX/UI, Prototyping, Wireframing, Mobile, Web
Tools
Figma, Adobe Illustrator
Creation Time
Spring 2023 [ 1 Month ]
Purpose
Academic Project
Digestible is a mobile app concept designed to make your life more convenient. By aiding you in meal planning, creating your grocery lists and delivering your lists when you need it. Created to simplify daily life by streamlining meal planning and grocery shopping. The app assists users in planning meals, automatically generating grocery lists based on their preferences and dietary needs, allowing substitutions as needed. To further enhance convenience, Digestible integrates delivery services, ensuring users receive their groceries exactly when they need them.
The concept focuses on the user by using algorithms and features such as personalized meal suggestions, nutritional tracking, and smart scheduling for grocery deliveries. By combining practicality with modern and playful design, Digestible aims to minimize the time and effort spent on meal planning, allowing users to focus on what matters most to them.
This project demonstrates my ability to design blend functional design and technology to enhance convenience and accessibility while adding a playful flair.
Prototype ✦
Notes on Viewing Prototype
Click anywhere on the screen to see active interactive elements highlighted in blue. Use the arrow keys to manually navigate through the different screens or restart from the beginning. If you have access to a keyboard,press "R" to restart the prototype, this will enable the start app animation (Figma sharing skips it).
Final Screens ✦
The final screens of Digestible showcase a launch screen, home page, browse screen that leads into more information about the meal, confirmation screen and profile page. Displaying a clean, vibrant, and user-friendly design that encapsulates the app’s purpose of simplifying meal planning and grocery management. Each screen is thoughtfully crafted to guide users through key features, such as exploring recipes, creating schedules, and managing their personalized profiles. The use of bright, playful visuals layouts ensures that the app is both engaging and easy to navigate.
From browsing curated menus and trending cuisines to scheduling meals and accessing detailed nutrition information, every screen was designed with user needs in mind. The final product reflects a seamless blend of functionality and aesthetic, resulting in an app experience that feels modern, approachable, and efficient. This project marks a significant milestone as my first full Figma project, demonstrating my growth in UI/UX design and my ability to bring a concept to life.
Website ✦
This is a web adaptation of the original mobile version, designed to translate the seamless user experience of the mobile interface into a fully responsive and interactive web environment. The adaptation includes appears like most web applications while ensuring that the core functionality and visual identity of the mobile application were preserved while optimizing for web usability. This showcases my ability to reimagine user interfaces for different platforms while maintaining design consistency and delivering an engaging, user-friendly experience.
Visual Design ✦
The brand identity of Digestible is rooted in modern visual design and playful branding, creating an approachable yet stylish look that resonates with its target audience. By combining sans-serif typefaces with bright, fun colors, the visual language reinforces the app's mission to make meal planning and grocery shopping stress-free and enjoyable.
Digestible App Icon
Adobe Illustrator, Adobe Photoshop
Constraints
Understanding the constraints helps influence my design decisions.
Design
Play, inviting, digestible
Experience Type
Mobile Experience
Feasibility
To keep the time frame realistic, this project focuses on the pre-established user flow chart created during the ideation process.
Challenge
How far can you push design boundaries between playful and practical?
The typography features a mix of dynamic and clean typefaces, including Polymath Display for bold headlines, Polymath for versatile supporting headings, Metropolis for sleek readability in smaller text sizes, and Heavitas for impactful branding elements. Together, these typefaces ensure a balance of approachability and professionalism throughout the design.
The vibrant color palette brings the brand to life, with bright pinks and yellows that evoke energy and positivity, greens and blues that emphasize freshness and trustworthiness, and neutral black and white tones for balance and legibility. This cohesive branding strategy ensures Digestible stands out as a cheerful, user-centric app while maintaining a polished and modern aesthetic.
Illustrations
To bring Digestible to life, I created a series of cheerful illustrations using Adobe Illustrator featuring a charming pink palette and playful that add personality and warmth to the concept. These playful, vibrant illustrations reflect the app's fun and approachable aesthetic. These visuals not only complement the app's user-friendly interface but also evoke a sense of ease and joy in meal planning and grocery shopping.
Meet Tofie, the adorable meal planning companion that resembles the jiggliness of tofu.
Process Work ✦
The creative and logical process behind Digestible.
Personas
To understand the audience that would become Digestible's user base, creating personas in this process allows me to understand a variety of users to understand their needs, wants, challenges, personality, and behaviours. I created four detailed personas to represent key user groups and their unique needs. These personas provide insight into the diverse challenges and goals of potential users, shaping the app’s features and functionality.
User Flow
Designing an app involves coordinating many interconnected components and it’s crucial to ensure a seamless user experience at every touchpoint. For Digestible, I developed a imple user flow to map out this projects main structure and functionality. This process allowed me to focus on individual aspects of the program while maintaining the user’s journey.
The user flow outlines key interactions, such as navigating from the homepage to features. It highlights how users can access meal information, build their schedules, and access their grocery lists or calendars.
This flow reflects the app’s main intention—making meal planning and grocery shopping efficient and user-friendly. By organizing ideas in this visual format, I was able to ensure that every feature supports the app's core purpose and aligns with user expectations. The user flow also serves as a valuable reference for refining the design, testing usability, and communicating intentions.
References
Digestible's design draws inspiration from a range of popular mobile apps, including DoorDash, Sephora, and Ikea to create a seamless, user-friendly experience. By analyzing the design choices of these established brands, I was able to incorporate modern and intuitive interface elements that already resonate with users.
Digestible 1.0
My first high fidelity version of Digestible. Using louder and more colours than I needed and taught me to tone it down.
Low/Mid Wireframe
Low and mid-fidelity wireframes are used to map out the structure and functionality of an app, focusing on user flow and layout without the distraction of visual details. Acting as a blueprint to ensure the design aligns with user needs before moving to high-fidelity prototypes.
Reflection ✦
Designing the visuals for Digestible allowed me to explore my creativity while balancing usability and aesthetics. I enjoyed experimenting with playful colors, cohesive layouts, and navigating how to create a user-friendly experience. This process taught me how to approach design with a focus on both function and style, ensuring that every detail serves the user’s needs while maintaining the app's identity.
This was my first full project in Figma, and it was an incredible learning experience. From creating low and mid-fidelity wireframes to designing detailed user flows and interfaces, I gained a deeper understanding of the design process and how to bring ideas to life within interaction design and UX/UI. Navigating Figma’s tools for the first time challenged me to adapt quickly and I am eager to create more projects within Figma in the future.