What is it?

I have created a website listing of beverage recipes. One of the key data pieces shown is the instructions for making the beverage. Users can find their desired drink through filtering by liquor type and ingredients, and add to cart. The aggregator in the cart showing the total number of ingredients could be helpful for a shopping trip, in the case that the user wants to make a series of drinks that week and wants to plan ahead for the ingredients she will need. The next-step feature would be for the ingredients list to have specific units of each ingredient.

Usability principles considered

Basic Design principles

I wanted to go with a more simple design interface, with neutral colors except for the blue of the 'my order' cart that directs viewers eyes to one of most important components on the page. The overflowing grid format suggests that more drinks can be discovered by scrolling. The fixed navigation bar at the top means that it can be accessed at any point in the page. There is clear font hierarchy between the name, instructions, ingredients, and call to actions.

Interface principles: is it easy for users to tell what actions are possible?

I think the possiblities of actions are clearly communicated with the language and labeling; the one confusing label could be the 'number of ingredient units' label in the cart, since the term 'units' is not extremely clear. The arrows on the drop down menu are clear affordances for additional elements that can be clicked.

Interface principles: is it easy for users to tell what state the system is in and perform the actions they want to perform?

The state of the cart is clearly shown,with scrolling capabilities. Buttons that change color when they are hovered over provide clear feedback for users to click on them. A next step would be to have a clear panel under the navigation bar that shows the 'state' of the filters; for example, if its on 'rum' or 'lime' to remind users what state they are in.

Link to deployed React App website >