Project Overview 🌱

Legumatic is a web platform I collaborated on with a team of six JKUAT students. It leverages a Machine Learning model to predict cooking times for legumes—like beans, lentils, and chickpeas 🫛—making cooking easier and more fun for home cooks. My role? Designing the website, while my awesome team handled the rest. My leverage point was crafting an eye-catching theme that pulls users in and gets them excited to explore as they predict their cooking times ⏲️.

The Challenge ⚡

The challenge was creating a "legumatic-theme" that felt inviting and fun 🤗, even for users new to Machine Learning. I needed a design that shouted simplicity and joy, encouraging navigation while hinting at the tech magic behind it ✨. It had to shine on both desktop and mobile, balancing a playful vibe with functional bits like sign-up forms and login prompts.

Design Process 🎨

I kicked off in Figma, wireframing the hero page to hook users with a bold, legume-inspired layout 🌿. The sign-up/sign-in and login pages came next, designed for clarity and ease. For the main page, I mapped a flow where users could dive into predicting cooking times right away ⏳. Using Adobe Photoshop, I whipped up custom legume graphics, and in Canva, I built posters to pitch the vibe 📸. Color theory was key—I chose a rich dark green (#527F34) for an earthy, natural feel 🌍 and paired it with a vibrant purple (#7E7EEC) for contrast and energy 💜. This duo made the site pop, blending calm with excitement.

Challenges and Solutions 🛠️

Early feedback said the hero page felt too busy 😵. I simplified it, zeroing in on a clean headline and a single call-to-action. The sign-up form stumped some testers, so I added hints ✅. Mobile responsiveness was a hurdle—too many elements cramped the screen—so I prioritized key features and leaned on the dark green (#527F34) as a grounding base, with purple (#7E7EEC) accents to guide the eye 👀. This kept it fresh and easy to navigate.

Results and Impact 🌟

The front page stole the show—users loved its vibrant look and how it made exploring feel like a game 🎮. Teamed with my crew’s killer work on the backend and the other pages, Legumatic was a seamless win. The design got props for its intuitive flow and fun vibe, with testers saying, “It’s so easy to get started! 🚀” The dark green and purple palette stood out, proving color theory can turn a tool into a stunner.

A Little Reflection 💭

Legumatic was a blast—I loved making legumes exciting (who knew, right? 🌱). My front page set the stage, and my team nailed the rest 🎉. Soon, I’ll drop the Figma template and the frontend code for a steal—watch out! The project fueled my UI/UX passion.

Need a standout design? Request a free quote↗—let’s make magic! ✨