Hi there! 👋🏻

I'm excited to share my new project - a simple and user-friendly UI design for a web application. This project was created as a team project for HackZürich 2023. I was mainly working on the ideation, style and front-end development. Thanks for taking the time to check out my work!

🌿 The Challenge

From many captivating challenges, our team set its sights on the Migros challenge: "Sustainable Shopping and Travel – Better Choices with AI". The mission before us was nothing short of visionary: harnessing the transformative potential of Artificial Intelligence (AI) to shape consumer choices. Our team was united by a shared commitment to sustainable living, which made this challenge particularly compelling. Armed with a dataset and an inspiring problem presentation from the Migros Team, we eagerly embarked on our journey to hack this challenge head-on.

🍽️ Solution

To tackle this challenge, we came up with a clever solution to empower shoppers to navigate the complex world of shopping and cooking while putting sustainability at the forefront: Sustainaplate - a brand-new addition to Migros' existing web and mobile app designed to elevate your culinary adventures with an eco-conscious twist. With a design that harmoniously combines Migros' recognizable style with a fresh infusion of innovation. Picture having your own AI-driven sous chef at your fingertips. You can list your ingredients using natural language, specify dietary preferences, or input any information you have in mind. Sustainaplate takes it from there, serving personalized recipe recommendations that align with your ingredients, nutritional needs, and tastes. The best part? You can add recipe ingredients to your cart for convenient online ordering or in-store pickup at Migros, making sustainable cooking a breeze.

🛒 Key Features

Sustainaplate integrates with Migros' web platform, offering a new set of new features to its existing capabilities:

1. Effortless Ingredient Input: Sustainaplate understands natural language inputs. Users can effortlessly list their ingredients, dietary preferences, or relevant details in plain language, simplifying the process.

2. Sustainability-Centric Recipe Recommendations: Sustainaplate goes beyond generic suggestions, offering a diverse range of sustainable recipe recommendations tailored to individual ingredients, nutritional needs, and taste preferences. This feature empowers users to explore eco-conscious cooking effortlessly.

3. Seamless Cart Integration: Sustainaplate simplifies eco-friendly shopping by allowing users to easily add their selected recipe's ingredients into their shopping cart. This integration streamlines the process, making sustainable shopping a hassle-free experience.

4. Flexible Pickup or Delivery Options: Whether users prefer the convenience of online orders or the immediacy of in-store pickups, Sustainaplate offers flexible options to accommodate their choices, ensuring a personalized and sustainable shopping journey.

5. Custom Sustainable Subscription Packages: Sustainaplate takes sustainability to the next level by enabling users to create personalized subscription packages. Through collaborations with local eco-conscious businesses, the app offers specially tailored subscription boxes delivered to users at their desired frequency. This feature brings a delightful element of sustainability to users' doorsteps.

🍏 Designing the Future of Sustainability

Sustainaplate's design is a harmonious blend of modern aesthetics and design elements to create an eco-conscious appearance. Every element has been thoughtfully selected to provide an engaging and sustainable user experience.

Font Choice: We chose the Roboto font, which matches Migros' Helvetica. It provides optimal readability and a contemporary appearance. Its clean and well-balanced letterforms enhance the user interface, enabling users to navigate the app easily. Roboto represents clarity and accessibility, aligning perfectly with Sustainaplate's mission to simplify sustainable shopping and cooking.

Logo: We created the Sustainaplate logo to represent our commitment to sustainability and culinary excellence. It features a green bowl with a prominent leaf, symbolizing food and sustainability. This symbolic design embodies the essence of Sustainaplate, where eco-friendly choices and delicious meals converge. The logo is cohesive and visually appealing to Migros' current design.

Color Palette: Sustainaplate's colour palette is a testament to our dedication to sustainability. The primary colour, a refreshing shade of green (#5CA747), signifies eco-consciousness and complements Migros' primary colour (#FF6600). This harmonious pairing emphasizes the app's commitment to sustainable shopping. The light primary colour (#E8F5E5) evokes a sense of freshness and cleanliness, enhancing the overall visual experience. These colours, in combination with black for text and white for backgrounds, create an inviting and user-friendly atmosphere that resonates with eco-conscious consumers.

💸 Branding

Sustainaplate's branding and design represent our vision: to blend sustainability into everyday life. The app's earthy colour palette draws inspiration from nature, evoking feelings of freshness and vitality and guiding users towards sustainable options effortlessly. The symbolic logo, a green bowl with a leaf, invites users on a journey where each meal can be eco-conscious and enjoyable, ensuring brand continuity and familiarity within Migros' existing platforms. Our design prioritizes user-friendliness with clear icons, legible fonts, and a logical layout that guides users seamlessly through the app, making sustainable shopping stylish and effortlessly chic.

UI Design

The app combines design elements into its screens, breathing life into Sustainaplate's user experience. The home page introduces the feature with its inviting logo, an easy-to-use entry field for user inputs, and a handy shopping cart conveniently positioned on the left side. It also provides a glimpse of the found recipes, complete with appealing images, making browsing for the perfect meal a visual delight. The recipe pages offer comprehensive details, including the title, cooking time, and labels such as dietary needs and specifications. It also shows the ingredients on the right side, which can be added to the shopping cart with a single tap. Additionally, the step-by-step instructions for preparing each dish ensure a smooth culinary journey. Lastly, the subscription model screen for customized boxes demonstrates how users can conveniently receive eco-friendly meal options tailored to their preferences, adding another layer of sustainability to their culinary adventures.

💻 Technical Implementation

Sustainaplate relies on a sophisticated technological stack, including Artificial Intelligence (AI) and advanced algorithms. The AI-driven recommendation engine analyzes user-inputted ingredients and generates sustainable recipe suggestions. FastAPI powers the backend server, while React, a popular JavaScript library, handles the front-end to ensure a seamless user experience. We've also integrated MaterialUI for a visually appealing and user-friendly interface, aligning with Migros' branding. If you are interested in the intricate technical details, you can delve into our comprehensive project description to explore the inner workings of Sustainaplate.

🌟 Summary

Crafting Sustainaplate was a fantastic ride! The Migros challenge presented a unique opportunity to pair cutting-edge technology with the familiar warmth of Migros' existing design. It was like tackling a puzzle, figuring out how to seamlessly blend Migros' familiar design with our fresh sustainability twist. With every line of code, every design tweak, and every new feature, we knew we were onto something special. We're incredibly proud of what we've achieved so far. We faced the challenge head-on but overcame it by bringing our creative ideas to life in design and development.

---

👉🏻Let's connect!👈🏻

If my writing piqued your curiosity, let's connect on social media and explore more. Check out my projects on my website, too. I'm always excited to connect with fellow tech enthusiasts and share our passion for innovation.

Instagram | LinkedIn | GitHub | Portfolio | Dribbble | Medium