GrubHub Food Delivery Website

Project Summary

GrubHub Food Delivery is a fully responsive single page website developed using HTML5, CSS3, JavaScript and jQuery.  This was developed for a term project for my Quality Assurance course at BCIT. The goal for this project was to build a website and test at every stage. We were instructed to create a repository on GitHub and use GIT to make commits along the timeline of the project. We were also instructed to create a development branch and merge the final tested code into the master branch. After completing our websites we used the application Trello to work collaboratively with peers to test each other’s websites and report any issues to be fixed. 

Project Details

Role

Designer/Developer

languages

HTML5, CSS3, JavaScript, jQuery

goal

Create a fully responsive modern single page website

Process

The first steps of preproduction I drew up a mind map to brainstorm ideas and crucial elements needed to produce the mood and feel of GrubHub’s brand identity. 

Sketches

I then gathered up all my ideas and began getting creative by drawing up sketches, laying out the information architecture to show where each UI elements should be placed for user friendly experience.

Wireframes

Finally, before developing the website I used Adobe XD to create low fidelity wireframes to confirm the design model of the project. 

Special Features

  • Sticky navigation menu that appears again as you reach the second section of the page
  • Navigation menu has links that smooth scroll to targeted sections of site
  • Smooth parallax effect as you scroll down header section
  • To make the website more dynamic I used animations from animate.css library and also some jQuery animation
  • High definition images 
  • Smooth scrolling effect on navigation and buttons
  • Zoom effect on images for image gallery
  • Contact form you can enter your name, email and message
  • Ion icons for high quality styling
  • Creating fully responsive website design across multiple devices by applying Media Queries

 

Final Product

Target Audience

Primary demographic:

Young professionals in their 20-30s that live busy lives and are looking for a convenient way to eat healthy meals while being able to maintain their busy schedules.

Secondary demographic:

Elderly couples looking for a quick, safe and contactless way to do their food shopping. As we are in this pandemic, elderly people are most likely to stay at home as they are at more risk.

Design Choices

For simplicity I decided to build a single page website to make it easier for users to navigate. I used a monochromatic color scheme with different shades of green & black being the most dominant colors as I really wanted to make the user feel balance and harmony as well as fun scrolling through the website.  

Design Philosophy

The goal of GrubHub was to use the skills I learned over the last 15 months to build a fully responsive website from scratch using HTML5, CSS3, JavaScript and some jQuery, while testing throughout the timeline of the project.    

Challenges

The biggest challenge I faced in this project was using jQuery on the sticky navigation menu. I  was having problems with the navigation links disappearing after resizing the screen but after doing some research, I was able to make a quick fix after inserting some conditional statements.

Thanks for Reading!

Lets Work Together!