Git Product home page Git Product logo

district-eleven's Introduction

District Eleven Website Redesign

This repository is a continuation and conversion of a React app to a Next.js app. Original repository can be found here.

Before:

Desktop

Homepage hero view desktop Menu page view desktop

Mobile

Homepage hero view mobile Menu page view mobile

After:

Desktop

Homepage hero view desktop Menu page view desktop

Mobile

Homepage hero view mobile Menu page view mobile

Original website frustrations & solutions:

  1. Frustration: Updating menu items is a repetitive task that must be changed manually on all menu pages (all day menu, happy hour, and take-out).
    Solution: Request all menu item entries from Contentful at initial visit and use boolean values to dynamically render associated menu items to each menu page. User only needs to update item once on Contentful and publish changes.

  2. Frustration: Longer customer interactions due to sold out menu items that are not reflected on online menu. Servers do not have access to make quick menu updates during service. Can probably change on server iPads, but UI allows the website to be vulnerable to mistaken layout changes (ie. accidentally adding things where they shouldn't be, accidentally deleting other content, etc.).
    Solution: Contentful UI allows to make swift menu changes on server iPads with ease, without the website being vulnerable to layout shifts/mistakes. This change is made by simply toggling a boolean value and publishing these changes.

  3. Frustration: Seasonal or rotating menu items that should be removed completely from customer view must be manually typed back onto the menu when a menu item is back in season/rotation.
    Solution: Contentful allows for menu items to be unpublished, removing items from customer view, but retaining the data to be republished at a later time. Staff do not need to remember menu item names, descriptions, and prices, nor do they have to wait for management to make these changes.

  4. Frustration: Longer menu navigation for customers on mobile due to having to manually scroll to each section.
    Solution: Implement menu section navigation bar that remains at the top of the screen, so customers can jump from food to drinks, for example.

To do:

  • refactor drinks/menu section and condense into single component?
  • change drink category names

Furthur development:

  • get better restaurant/food photos
  • implement 3rd party map in footer
  • make menu section navigation more obvious it is scrollable on mobile

Feature requests:

  • change background color from black to white when scrolling down to drinks (address possible user experience/accessibility issue? flashbang?)

Physical menu requests:

  • single page / double sided (1 side food / 1 side drinks)
    • food side background black / drink side background white

district-eleven's People

Contributors

kaseyvee avatar dependabot[bot] avatar

Stargazers

Jarrian Gojar avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.