Findining is a foodtruck finding app I created as a side project.

There are 2 types of users, 1. Food truck owners, they are users who are interested in sharing their location to increase traffic to their business and 2. Foodies, users looking for their next food truck meal. This web application (no plans for mobile yet) allows foodtruck owners to signup/login to log their location. Foodies can look for trucks in their area by simply inputting an address.

TECH STACK: HTML, CSS, JavaScript, Jquery, Nodejs, MongoDB, Express

Figma was used to create quick mocks for views and components.



under construction thumbnail

Findining is Under Construction



My Plan


(Aug 2nd 2021)

It has been a few years since Findining was created. With a recent patch update made by MongoDB, I noticed my foodtruck and user data no longer exist, rendering the app to not work. Since the application requires this information to function, I tried to troubleshoot the code for Google Map API, fix User and Food Truck model and route. This method proves to be more time consuming, so I decided to use this opportunity to recreate this app.

Feel free to review the existing codebase on My Github Repo while I tackle my 3-step plan to troubleshoot and recreate the application. I created a list of to-do's and grouped them into 3 versions based on priority and time.


1st Iteration - "Make it Work. Quick."

The purpose of this portfolio is for showcasing my skills in frontend development and design thinking, so I decided the first step is to focus on making the map work again, as that is the core of this application. This means keeping majority of the backend code and fixing only the UI and frontend (HTML/CSS/JS).

1. Remove authentication restriction (will add back later) - since user and food truck create and edit is not working at the moment, having the login option in the UI is not useful at this time.

2. Hard code food truck objects. Not the most elegant solution, but this will allow the google map to load and enable interaction immediately.

3. Fix Google map API. Update google api codebase to make map visible, and populate markers.

2nd Iteration - "Make It Better."

The 2nd iteration will focus on improving some of the most obvious UX issues, and fixing user and food truck API.

1. Fix authentication so that users can login, create (and edit) food truck and no longer rely on hard coded data from step-1.

2. Make food truck information list more visible. Currently, the list of foodtrucks are placed under the map, with the map being the focal point, it is easy to miss the list. By moving it to the right, I hope to give users a sense of familiarity, as this practice is used in many applications such as Yelp and Rover.

For interactions, clicking on the map marker will prompt 1. This marker’s properties will appear on the map, 2. the list to the right will disappear AND show only the information associated with this specific food truck marker. Vice versa is true if the user click on a food truck from the list.

A quick Figma mock was created.

figma map thumbnail

 

3. Create states for common components on CSS and remove outline border when buttons are in active state. I created the below reusable components on Figma as a guideline, this will not take a lot of time, and will help create a better user experience. This allows users to differentiate the state of the component, making the application more accessible.

figma reusable components thumbnail
3rd Iteration - "Make It Great."

This iteration will include will focus on the ‘nice-to-haves’ features and fixes from the prevous version.

1. Incorporation a frontend framework or library. Turn commonly used elements like Links, input and buttons (see Figma snippet from 2nd iteration) into reusable components.

2. Fix previous iteration design flaws. Assuming there are UX issues from the previous iteration.

3. Landing page update and animation. Add 'slide to the left' animation behind food truck to imitate movement (afterall, food trucks are always on the go!).

figma landing page thumbnail

Reflection

Thank you for taking the time to read this plan.

As much as I wish you had visited when the application was working, it is ultimately my fault for not identifying this issue earlier. I created this plan to give you an idea how I process issues and I hope it gives you some insight how I approach problems.

UX improvements are based on my own interaction with the app (since I am the only user :D), in a professional situation, there are many methods that can be incorporated to improve the UX, such as user testing. This plan is subject to change as the design and dev world is always on the move. As a designer/developer, I understand that sometimes it is necessary to rebuild something in order to ‘make it work’, which is always my first goal to all things design and development.