Analyzing competitors provides valuable insights into the features, user flows, and feelings evoked by their design solutions. To evaluate the strength of my solution, I selected three competitors offering similar solutions to our problems, both directly and indirectly.

I conducted guerrilla research by engaging classmates from diverse demographics to gather insights into their experiences navigating a website for food delivery and pickup. Through this informal and rapid approach, I gained valuable user feedback on the website's usability and user experience, specifically focusing on the process of selecting food items.

Based on guerrilla research and a website audit, I've learned that prioritizing clear visuals, easy navigation, and detailed information is crucial for enhancing the user experience. Simplifying menus, improving the ordering process, and implementing user-centric design principles can make the experience seamless, intuitive, and engaging. Additionally, regular usability testing is essential for validating decisions and gathering valuable feedback.

I've identified key areas for enhancing the user experience. Here are the changes we can implement to improve usability and engagement:
‍
1. Seamless Ordering Process: Implement an in-house food ordering user flow instead of relying on a third-party websites, optimizing the interface for a smoother experience.
2. Intuitive Navigation: Introduce a traditional navigation bar that seamlessly integrates with user practices, featuring clearly defined buttons and intuitive design elements to minimize accidental clicks.
3. Efficient Menu Browsing: Enhance menu navigation efficiency by organizing items based on food types and incorporating search filters for quicker item discovery, ultimately saving users time and effort.
4. Visual Transparency: Enhance decision-making by incorporating clear photos of food items, meeting users' need for dietary transparency.
5. User-Centric Design: Prioritize user-centric design principles throughout the redesign process, ensuring that the website's layout, features, and functionality align with users' needs, preferences, and behaviors.

This visual map provides a comprehensive overview of the pages that will be included in the new website design. By contrast, the previous website featured only a single landing page, which anchored to specific sections and redirected users to a third-party food ordering provider.  

Building upon research findings and with a focus on enhancing user  experience, key modifications include the integration of an in-house food ordering system, the categorization of food items, and the introduction of quantity and add-on options to enhance a faster checkout process.

After finalizing the site map and wireframes, I revamped the website's visual elements. Recognizing the power of color, I opted for more warm tones like reds, yellows, and oranges to stimulate appetite and create a welcoming atmosphere. Unlike the previous palette of blues and oranges, these colors were chosen specifically to evoke hunger and excitement, while building a stronger emotional bond with our users. By utilizing warmer hues, the redesign aims to attract users to explore the menu and leave a lasting impression.

After finalizing the mid-fidelity wireframes and style guide, I transitioned into crafting the high-fidelity screens showcasing food images and descriptions, improved color contrast, legible text, enhanced navigation, and interactive elements—all seamlessly integrated with in-house operations. Below, you'll find the redesigned Love Baked Wings featuring the updated aesthetic and user experience, including the incorporation of the Manrope font for a modern touch.

View Prototype

After completing the design phase, I brought the new redesign to life using HTML and CSS, leveraging my knowledge and expertise in web development. The result? A polished, user-friendly interface that perfectly captures the vision and aesthetic of the redesign! This project reignited my passion for both the technical and design portion of development, motivating me to pursue more projects in the future.

HTML

CSS