My Role:
- Sole Software Engineer & UI/UX Designer
Duration:
June 10, 2024 - current
Design Tools: Figma
Technologies: Python, Django, HTML, CSS, JavaScript, SQL
Overview
Dad's Kitchen is a heartfelt project dedicated to showcasing my father's culinary talents and spreading Korean food culture. With no prior online presence, I embarked on creating a website from scratch to bring his homestyle cooking to a broader audience.
The purpose of Dad's Kitchen is to provide an online platform where customers can easily browse our menu and enjoy our authentic Korean meals through a convenient delivery service. This project aims to share the rich and diverse flavors of Korean cuisine with a wider community, making it accessible and enjoyable for everyone.
The purpose of Dad's Kitchen is to provide an online platform where customers can easily browse our menu and enjoy our authentic Korean meals through a convenient delivery service. This project aims to share the rich and diverse flavors of Korean cuisine with a wider community, making it accessible and enjoyable for everyone.
Problem
Dad’s Kitchen lacked an online ordering system, limiting its reach and convenience for customers. Existing and potential customers expressed the need for an efficient, user-friendly platform. We needed to create a comprehensive online presence, including consistent branding and a visually appealing interface, to manage orders efficiently, avoid errors, and reflect the restaurant's brand.
Dad’s Kitchen lacked an online ordering system, limiting its reach and convenience for customers. Existing and potential customers expressed the need for an efficient, user-friendly platform. We needed to create a comprehensive online presence, including consistent branding and a visually appealing interface, to manage orders efficiently, avoid errors, and reflect the restaurant's brand.
Goals
1. To create a seamless and intuitive online ordering experience for customers.
1. To create a seamless and intuitive online ordering experience for customers.
2. To establish a strong online brand presence for Dad's Kitchen.
3. To streamline the ordering process, enhancing efficiency and accuracy.
______________________________________________________________________________________________________________________________________
Preview of the Solution
This is the actual website after code implementation:
______________________________________________________________________________________________________________________________________
Research
I first sent out a survey to existing customers and potential users interested in an online ordering system and received about 70 responses. Additionally, I conducted 3 user interviews to gather more in-depth insights.
I first sent out a survey to existing customers and potential users interested in an online ordering system and received about 70 responses. Additionally, I conducted 3 user interviews to gather more in-depth insights.
Competitive Analysis
I researched several restaurants with online ordering systems for some inspirations and insights. Some major takeaways were:
I researched several restaurants with online ordering systems for some inspirations and insights. Some major takeaways were:
1. Consistent branding with visuals: strong visual branding with high-quality images and a clean, modern design that captures attention
2. Simple navigation: clear menu options at the top, making it easy for users to find what they need
3. User-Friendly Ordering Process: intuitive ordering process that minimizes steps and makes it easy for customers to place orders quickly
By analyzing these competitors, I identified several best practices and areas for improvement that can be applied to Dad's Kitchen's online ordering system:
- Customer Reviews and Ratings - section for customer reviews and ratings to build trust and provide transparency and social proof for new customers
- Simplified Checkout Process - simplify the checkout process to reduce cart abandonment / since this only deals with one store, avoid implementing overly complex features that aren't necessary at this stage (focus on creating a quick and hassle-free checkout experience)
Ideation
Based on my research and identified opportunities, I noticed that users do not want cluttered, complex interfaces but prefer a clean, intuitive design with easy navigation. In response, I started brainstorming to see what information and features could be added to enhance the website.
Specifically, I focused on streamlining the user experience and enhancing visual appeal. The goal was to generate creative ideas and solutions that would improve the online ordering experience.
Based on my research and identified opportunities, I noticed that users do not want cluttered, complex interfaces but prefer a clean, intuitive design with easy navigation. In response, I started brainstorming to see what information and features could be added to enhance the website.
Specifically, I focused on streamlining the user experience and enhancing visual appeal. The goal was to generate creative ideas and solutions that would improve the online ordering experience.
Prototype
For lo-fi prototype, I considered using psychology and visual design principles. I used Gestalt principles for continuity, proximity, and similarity to create a cohesive and intuitive interface. These principles helped group related elements together, making the layout more organized and easier to navigate.
For lo-fi prototype, I considered using psychology and visual design principles. I used Gestalt principles for continuity, proximity, and similarity to create a cohesive and intuitive interface. These principles helped group related elements together, making the layout more organized and easier to navigate.
In addition, I spent time focusing on the best way to present the main homepage. I decided that F-shape eye-tracking pattern would guide the placement of key elements to align with natural scanning behavior, ensuring that users could find important information quickly and efficiently. Also employing an asymmetrical layout was to purposefully create imbalances that draw emphasis to specific areas, highlighting critical information and guiding the user's attention effectively.
For hi-fi prototype, I focused on bringing the visual and interactive elements with high fidelity. I considered detailed visual design, and user interface components, such as a clear navigation bar, easily identifiable buttons, and consistent UI components (typography, color). Web accessibility was also a priority, with annotations, hierarchical headings, and clear labels implemented to make the design more accessible.
Usability Testing
To refine the platform's online ordering system, I conducted user testing with about 15 diverse groups of participants, including existing customers and new users who frequently order food online. Through in-person and remote sessions, I observed users performing tasks such as browsing the menu and customizing orders. I guided them through the tasks, asking them to think aloud and share their thoughts as they navigated the system. Afterward, I asked for their feedback through follow-up questions and surveys. I received positive reactions as well as some areas for improvement, which I later implemented into the final design.
The goal was to gather feedback from potential users to identify any usability issues and ensure the platform met their needs and expectations, and I thoroughly enjoyed interacting with users, demonstrating the new design, and observing their reactions. This experience motivated me to make thoughtful design decisions that genuinely benefit the users and enhance their overall experience with the platform.
___________________________________________________________________________________________________________________
Implementation
Front-End Development:
Front-End Development:
- Used HTML, CSS, and JavaScript to build the website's front end
- Integrated interactive elements like the menu navigation, order customization options, and cart updates
Back-End Development:
- Developed the server-side using Python and Django to handle the business logic and database interactions
- Set up a relational database (PostgreSQL) to store menu items, customer orders, and user information
- Implemented order management features to ensure accurate and efficient processing
Integration:
- Connected the front-end and back-end to create a seamless user experience
- Implemented real-time updates to provide immediate feedback to users during the ordering process
* Let me know if you want to see the finished product, and I will guide you with the link !
___________________________________________________________________________________________________________________
Next Steps
- Incorporate real-time feedback mechanisms (such as pop-up notifications when items are added to cart, order confirmation messages, status updates, etc.)
- Incorporate real-time feedback mechanisms (such as pop-up notifications when items are added to cart, order confirmation messages, status updates, etc.)
- Introduce a section for special promotions, discounts, and loyalty programs to encourage repeat customers and increase engagement
- Improve customizations
Reflection
I was proud that I was able to start from scratch where I designed, branded, and coded everything by myself to show it onsite. This accomplishment demonstrated my ability to take a project from concept to completion, ensuring it met both user needs and business goals. I learned to effectively integrate user feedback into the development process and adapt to changing requirements. I challenged myself to balance creativity with functionality, ensuring that the final product was both visually appealing and highly practical.
I was proud that I was able to start from scratch where I designed, branded, and coded everything by myself to show it onsite. This accomplishment demonstrated my ability to take a project from concept to completion, ensuring it met both user needs and business goals. I learned to effectively integrate user feedback into the development process and adapt to changing requirements. I challenged myself to balance creativity with functionality, ensuring that the final product was both visually appealing and highly practical.
The development of Dad's Kitchen's online ordering system was a comprehensive learning experience, focusing on both coding and user-centered design. Through thorough research and addressing key user needs, I deepened my coding skills, particularly in creating a seamless, visually appealing interface. By incorporating best practices and user feedback, I aimed to create a platform that exceeds customer expectations. This project underscores the importance of combining technical skills with user-focused design to deliver an exceptional online experience.
