This is part one in a multi-part series on usability issues with fast food eCommerce websites. We visited fast food restaurants to test how real-life users experience ordering through their websites. In each part, we'll highlight the usability problems (and possibly some successes) we discovered while performing guerrilla user testing⁽¹⁾ at popular fast food restaurant locations.

We'll also offer suggestions on improving each website for higher conversions and customer satisfaction. 

The redesign of the CanJS website required a way to create a fixed header and a fixed flexible sidebar that adjusts its width based on its content. The main content container also needed to flex to accommodate more (or less) sidebar content.

Here's a layout hack using Flexbox for creating your own HTML template with:

Establishing a Design System improves the quality of a product for the people creating and maintaining it and offers the end-user a better experience. While building a Design System prior to creating a product is the best approach, you may find yourself in the position of having to create one retroactively. Instead of having made documented design decisions prior to development, you have to identify existing patterns and consider how best to standardize them. 

Tailwind CSS is an easy-to-use CSS framework for quick UI development on anything from small projects to enterprise level applications. It's great for all CSS experience levels and since Angular v12 finally offers support for Tailwind, there's nothing getting in the way of giving this excellent framework a try. Here's a primer on Tailwind's features and how you can set it up with Angular v12.