Blind Munchies wanted to redesign their website and make it responsive. My challenge was to use the existing website as a guideline to make it a responsive website.
The old website only worked on screen sizes 978px and above. It also had a lot of images on the homepage, which looked very good and loaded well on laptops, but would take a longer time to load on mobile phones. My approach was to use the similar design style of the old website and make a mobile-first website. Shown below is the old website.
I researched different responsive websites of coffee houses to learn how others approached this problem. I decided on using the home page as a secondary navigation to the interior pages. The home page would still have images to depict the interior pages, where users can tap on the images to navigate to their respective pages.
I created three variations for the layout before making the mockups. After presenting my variations to my stakeholders, I went ahead on finalizing my mockup.
The stakeholders picked the third version of the wireframe, and below are the final mockups I made for the website.