Chef at Home
Chef at Home is a project that was made to create a mockup for a home-cooked delivery food web app. It is based on other food apps like Home Chef and Uber Eats.
Objective: Create a web app that demonstrates an organized web flow and using graphic elements and principles to create an interactive experience.
Process: The process started by determining what type of users would use the app. Next was to create the brand identity of the app.
The process included creating a flowchart to map out the potential user flows, creating low fidelity to high fidelity wireframes, as well as prototyping to create a testable user experience.
Flowchart
The flowchart was created to see potential user flows and to map out the different routes a user could take. Designing the website after doing this step is important in ensuring that the user's needs are put first. In this case, since Chef at Home is a food service based web application, the flowchart revolves around the customer's needs as they browse the site but also the chef's needs as they need to prepare the meal for the customer.
Logo
The logo was created to communicate the idea of having a chef at home even if no one in the house can cook. Bringing home made meals is one of the objectives of this brand and being able to communicate this idea is important in presenting this web app to consumers. Furthermore, the green is used to symbolize the food aspect as many other food apps use green to emphasize the freshness or natural aspects of their service.
Typeface
The Brother 1816 Extra Bold typeface creates a clean san serif look to emphasize the simplicity yet modernity of chef at home's products and services.
Color Scheme
The color scheme is a simple one to again emphasize the simplicity of using the app as well as the freshness in the meals. Furthermore, having green as the only color other than white and black allows it to be more highlighted and creates a pop to the otherwise basic design.
Wireframes
The wireframing process started with low-fidelity wireframes and continued throughout to high-fidelity wireframes. Creating different layouts and seeing which ones would be most effective allows the user to navigate through the site.

.png)


