Home-Cooks

Role: UXUI Designer, Front-end Developer

Members: Mike Vong (Backend Developer) & Christine Dang

Challenge: To develop an application that allows friends and neighbors to sell and cook dishes for one another while restaurants were closed.

Deliverables: Competitive analysis, Site map, Low fidelity wireframes, Inspiration collage, UI research and selected components, and Front-end app development

Tools: Trello, Sketch, Figma, Wireframe Pro, Coolors, Microsoft Word, LottieFiles, Visual Studio Code, Bootstrap, Google Maps, and ReactJS

Time frame: 2 weeks

The Approach

We used the Agile methodology and tracked our process by using Trello. As the researcher, designer, and front-end developer, I split my tasks into 4 sections: basic layout & research, low fidelity wireframe design, detailed UI research, and coding the front-end of the application. Mike and I met up on Slack three times a week to go over our research and our progress. While I researched the user interface, Mike looked into the user experience by seeing which coding packages and functions we could implement. We used food delivery services as our references, but added our own touches of home cooking and a sense of community to it.

Basic Layout Research & Discovery

My first steps included researching popular food delivery companies. These included Doordash, UberEats, GrubHub, and Postmates. I took notes of their layouts, color palettes, user experience, and navigation. While the focal point is food delivery and the navigations and themes were all pretty similar, they differentiated from one another by what they displayed on their homepage for users to see. For example, UberEats draws attention to creating business accounts, hiring delivery drivers, and adding more restaurants to their list. Doordash focuses on hiring delivery drivers and becoming a partner with them. GrubHub on the other hand focuses on supporting local restaurants, 'local favorites', and giving users perks when using their services.

The next category I researched were chain-restaurants. This included Chili's, Olive Garden, Outback Steakhouse, and Dominos. While they all have different themes (based on what they sell), the one thing they have in common is the large and vibrant food images. I noticed that this is not as prominent in food delivery applications. All four restaurant websites allowed users to add one of the dishes to their cart before choosing the location that is nearest to them. Once users are ready to check out, they are given the option to pick up their order from the restaurant or get it delivered by the restaurant's delivery service. Some have even teamed up with a food delivery company to take care of the deliveries (example: Chili's partnership with Doordash).

Food Delivery Service Websites

Moderate to minimal amount of text

Light themed

Bold colors

Cartoon-like images

Modern and clean design

Large footers

Chain-Restaurant Websites:

Moderate amount of texts

Descriptive texts

A lot of dish images

Bold colors

Light themed

Medium to large footers

Vision

Since restaurants were closed due to the 2020 Covid pandemic, people had to rely on cooking & preparing their own food. The individuals and families who relied on eating out had to pick up cooking skills and the others who ordered out as a treat or break from cooking didn't have that convenience anymore. Mike and I wanted to create a solution to this problem by allowing neighbors to open their doors to one another (metaphorically, of course) by sharing dishes. This would also allow people who cook to make a little extra money by selling their dishes.

When developing with Home-Cooks' concept, we double checked the legality of our vision, and found that it is legal in the state of Florida and California to sell dishes made in a home kitchen. We checked these two states because it is where we each currently reside and wanted to test the application here for convenience before expanding to other States. When it came to the design, we wanted it to look modern and focus on the topic of food. I used my notes on UberEats, Doordash, GrubHub, and Postmates' UX/UI for references. I also made notes to implement images, background images, and animations that had an upbeat feel similar to the other food delivery apps, but that have more of a "home cooked meal" concept. These included (but were not limited to) a kitchen background image, home cooked dish images, and cooking pan animation. We chose for the application to be light themed in order to portray a clean and safe environment. This will give users a sense of trust in the food that they're ordering.

The application will be fairly simplistic and will have a homepage that leads to 2 different areas: home cooks (people selling their home-cooked meals) and eaters (people looking to order food).

Home cooks: Users will be taken to a page where they will be asked to enter in their dish information. This includes their name, the dish's name, ingredients, cost, address, phone number, number of servings, and payment type.

Eaters: Users will be taken to the implemented Google Maps API that will display what dishes are available for purchase. Once they select a dish, and be taken to their cart and checkout page.

Sketch Sitemap:

Inspiration Collage:

Low Fidelity Design

I began the process by creating a wireframe for the application using Wireframe Pro. I created a total of 5 pages: Homepage, Cooks, Eat 1, Eat 2, and Checkout.

Homepage:

We wanted the homepage to be as simplistic as possible, mimicking the feel of other delivery applications. This would allow users to navigate easier, faster, and smoother through the app. I kept in mind that when users are feeling "hangry", the quicker their food ordering process is, the better. Designing the application to have a lot of information similar to restaurant sites didn't fit the concept of Home-Cooks because the application contains dishes from different individuals and having more information than necessary would be distracting for Home-Cooks' UI.

We omitted the navigation bar from the homepage because having the option of 'Cooks', 'Eat', and 'Checkout' were not needed until the user selects one of the two main categories. Instead, there will be a 'Get Started' button that will automatically scroll users to the main section of the page, since the banner will take up about half of the homepage when users enter the app. The main section of the page will have 2 parts - Cooks and Eat - with a similar layout: A LottieFiles gif, brief description of the selection, and a button that takes the user to the next page based on the selection they choose. For the footer, there will be two buttons: one that leads to Mike's GitHub page and the other to my GitHub page. This will be temporary until the app gets further developed.

Cooks Page:

The cooks page will have forms for the user's to enter in their dish information. These include name, email address, address for pickup, the name of the dish, serving size, price, payment type, an image to represent the dish, and ingredients list. Users can enter in their home address or choose a meeting spot to exchange their dish. The ingredients list must be filled out, to prevent 'Eat' users from having allergic reactions. This concept does have a few safety risks with meeting others to exchange cooked dishes for US dollars, but since we only had two weeks to come up with and code a fully functioning application, we kept it as is. An idea we could implement in the future to help with these safety issues is teaming up with a neighborhood app like Nextdoor or apartment complex websites so people can only purchase from a small area of their community. We could also have people create accounts and profiles with star ratings, as an extra security/safety measure for people to know which 'Chefs' are verified. Another future implementation we could add is an option where 'Cooks' select an allergen icon that is in their dish and it would be displayed on that dish's card for the 'Eat' users to see.

Eat, Pages 1 & 2:

The first page that users are taken to when selecting 'Eat' is the Google Maps API page. Here, dishes being sold nearby will be displayed within a close radius to their current location. We didn't have a lot of design options for this page because it uses Google's API, so we went with their design and layout. We chose Google Maps API because it's a well known application and trusted by many users.

The second page will show a large card, containing all of the descriptions the 'Cooks' have entered for their dish. These include an image, name of dish, chef's name, ingredients, and serving size. Users will then have 3 button options on each card: add to cart, checkout, and back. The 'back' button will take users back to the Google Maps page, where they can select another dish to add to their cart. If the user is ready to make the purchase, then they can select 'checkout' and be taken to the checkout page. The 'add to cart' button will add the dish to their cart and will keep the users on that page until they select one of the other buttons.

Checkout:

The function of our checkout page allows users to finalize their selection before confirming which dish they want to order. It will have a section that displays each dish the user has added to their cart. In that section, there will be an image of the dish, description, and 2 buttons: delete and checkout. If users wish to add more dishes to their list, they can select 'Eat' in the navigation bar. This will take them back to the Google Maps API so that they can add more to their cart. None of the user's dishes in their shopping cart will be removed unless they delete it from their list. This method allows users to see and compare their selected dishes all on one page, in order to help them make an easier decision on what to choose. We decided to only allow users purchase one dish at a time to avert people from spamming purchases and prevent the 'Cooks' from having no shows. Since there is not an account functionality, the saved items in the checkout will be stored in the user's cookies.

Wireframe Pro Wireframe:

Detailed UI Research

Once the low fidelity wireframe design was approved, I moved onto researching UI components: the primary palette, surface colors, background colors/images, fonts, icons, animated components, and buttons

Color Palette:

When selecting colors for the primary palette, we wanted them to resemble the traditional colors of a kitchen. According to KraftMaid.com's article, "Traditional Style Spotlight: The Traditional Kitchen", these colors have warm and earthy tones that make the environment feel welcoming and familiar. On top of the warm and earthy tones, we also wanted there to be a contrast of dark to light colors. Rather than choosing one or more colors from the color psychology wheel, I went with muted tones in order for the background and surface colors to add contrast. I wanted to tell a story with the background by using realistic photos. We went with #252525 eerie black (softer and less bold compared to #000000), #F8F4EB floral white, and #FFFFFF white. #BBA795 Grullo was added to the list so we could use different shades of it for the secondary, surface, and background colors. According to thoughtco.com, the color beige is seen as a traditional color that symbolizes work and simplicity in modern times. Tan - according to picsart.com - represents stability, growth, warmth, honesty, and reliability among others because of its association with the earth. These descriptions fit the image we wanted Home-Cooks to have. It brings a modern twist of the traditional hunter and gatherer ideation to the community.

Surface & Background colors/Images:

We chose realistic images for our surface and background images in order to represent home cooking to our users. Studies have shown that realistic photos on websites allow for better engagement with visitors ("4 reasons your website should include real photos", Delux.com/blog). I selected cutting boards and bold colored vegetables image for the forms and information page backgrounds in order to match our color palette and to add a rustic design to the application. These designs help represent the idea of preparing food in a home kitchen. I designed the homepage to start out in a brightly lit kitchen to tell a story through the app. Users will then be taken to the 'prep' phase where there will be a chopping board background and a form for them to post their dish or browse other dishes. Finally, they will end up in a warm and bright café checkout page in order to excite users with the emotion they would normally get when ordering takeout from restaurants, even though the food is home cooked.

UI Color Research Notes:

Animated Components, buttons, Icons:

I used LottieFiles' animated gifs on the homepage of the application in order to add a touch of movement to the website. Having the animations helps attract the users attention and brings the app to life. I searched for gifs pertaining to cooking and plates of food in order to match the theme's two options. For the 'Cooks' gif, I focused on simplistic and minimalist designs of a kitchen tool that a majority of people have used in their home. This resulted in the use of the green frying pan that is tossing a mix of veggies. For the 'Eat' gif, I chose to use an animation that had 3 dishes in rotation in front of a solid circle background. This design helps depict to users that Home-Cooks offer a variety of different cuisines. The animated gifs added a nice balance with the realistic background image on the homepage. Since our color palette has muted colors and the image on the homepage is of a white kitchen - layered with an opaque section so users can read the text - I was able to select any colored gif without having to worry about clashing colors.

I designed those cards and the forms to have sharp corners in order to show the level of importance, since the semi opaque cards contains the dish information and shopping cart items. We went with rounded corner buttons for contrast. The homepage will have black buttons and white lettering, to stand out from the light background. I didn't want the buttons to interfere with the gif colors on the page. The checkout button in the cart page will also be a black button in order to tie in with the homepage. To submit the form and add/select an item, the buttons will be green. This color represents 'go' and will encourage users to interact and place an order. The last action button, 'remove' in the shopping cart will be yellow because it is not as urgent as red and lets users know to pause before making the decision to remove a dish from their cart.

The only icon we have on our page is the shopping cart icon, located in the upper right hand corner of the navbar on the 'Eat' page. I chose not to include a remove icon in the cart page because I wanted to have another button in order to balance the checkout button. We had many cart icon options thanks to Iconify and Font Awesome. After narrowing them down to five options (chosen based on their simplicity, contrast, and rounded edges), option 5 stood out the most because the solid colored cart had a stronger contrast against our solid 'Eerie Black' navbar. We decided to use this icon over option 3 because its shape better resembles a classic shopping cart.

Fonts:

We selected this icon over option 3 for the application's name because the wide shaped letters and accent lines on the edges on each one added a fun and unique touch. This made the app stand out from others. Georgia/Times New Roman/Times/Serif was used for the rest of the app because they are readable on screens and it adds an elegant touch to the site.

Final Application Design:

Due to the time crunch and having the title of UX/UI designer and front-end developer for this application, I went straight to coding the application after creating the low fidelity wireframe instead of creating a high fidelity prototype before the coding phase. With the wireframe complete and the background images, color scheme, icons, animated components, and buttons selected during the UI research phase, this gave us a clear image of what the app will look like. The Bootstrap library provided us with many different templates for components and I was able to manipulate button and font designs with CSS.

I used royalty free stock images from Unsplash and Pexels for the three background images and dish image selections. The basic text boxes, modals, and cards were from Bootstrap and I coded the parallax feature on the homepage using CSS. The parallax feature (where the kitchen background image remained static and the jumbotron along with the top layer with information scrolled over it) helped add depth to the application.

At the bottom of the homepage, I decided to add an audio player for ambiance. The audio consists of 1 track that plays a jazzy dining tune called 'All That' by Benjamin Tissot on Bensound. I wanted to have the audio playing at around 30% volume when users first enter the page because it would elevate the ambiance of ordering out/dining. This idea was scratched because having an audio play automatically on a site has a bad reputation of upsetting users. A few examples of this feature annoying users include: their audio being turned up too loud, being in a quiet environment, or having another audio source playing. Automatic audio on applications are also associated with gaming applications and websites, which doesn't fit with Home-Cooks' genre. In the end, we coded an audio player at the bottom of the page for an 'easter egg effect'. This allows any user to be able to play the audio for their perceived sight, to satisfy their curiosity, and to enhance their experience on the app.

Overall, I enjoyed my experience working on Home-Cooks. It allowed me to combine both of my skills in UX/UI Research, Design, and Full Stack Web Development. If I were to work on this application again for an update, I would look for ways to simplify the user interface, have more solid colors and simpler backgrounds, and add a few more steps in the user experience - such as account creation and the ability for users to write reviews.