ONLINE MENU
website design

Pastiche is my favorite dessert place in Providence. Sometimes I get takeout orders with friends. I always find it hard to make recommendation to people, since everyone has different taste and I genuinely find everything at Pastiche so delicious!

Is there a way to improve the online menu's display so users can have an easier time finding what they like?


On Pastiche's current online ordering site, users can only browse information about the cake after clicking on each individual icon. On my redesigned website, users can browse information about each cake all in one page, add cake to favorite, sort the display by name or price, and filter the display by different flavors or allergy.

Part 1: Link to the Redesigned Website

Click here for my redesign.

The website is built using React. The next section talks about some key points about how the website is set up.

Part 2: How the Website Works Under the Hood

Click here to see the source code.

Organization of Components

  1. BakeryItem: hold information about each cake. This makes rendering the menu easy, because each cake is rendered in the same format.
  2. UpdateMenu: hold information about the menu organization, including the current ordering and filtering criteria.

How Data is Passed Down Through Components

In the main file App.js, sorting and filtering buttons are displayed and their corresponding onclick functions are set. The onclick function changes the states of the menu. UpdateMenu is then called to make sure the overall menu is updated correctly based on the buttons clicked. After that, each item in menu is mapped to a BakeryItem and rendered.

How the User Triggers State Changes

There are 5 variables that use states: cart, menu, order, filterList and allergyList. Users can change the state of order by clicking on the radio buttons "price" and "name"; change the state of filterList by clicking on the checkbox buttons "chocolate", "fruity", "coffee", and "something else"; change the state of allergyList by clicking on the checkbox buttons "gluten-free" and "nut-free". Clicking on these buttons mentioned above would also change the state of menu. When users click on "add to favorite" or "remove from favorite", state of cart is changed.

Part 3: Usability Principles Considered

  1. Visability of system status: when adding item to favorite, users can see the name of the item in the added to the favorite column. If an item is already there or if user tries to remove from favorite of an non-existing item, the system would alert the user.
  2. Recognition rather than recall: while scrolling the menu, sort and filter buttons on the left stay at the top, and so does the favorite cart content. This way the user don't have to remember which buttons they have clicked so far and don't have to scroll back and forth.
  3. Minimalistic: each menu item contains all the necessary information and nothing more.