Kuro-Kuro Online Ordering Responsive Website

I transferred the previously created paper wireframes into a digital format using the design tool Figma. I mostly created the designs based on the paper version, but I also made some changes on a few frames in order to improve them.

​

I decided to design all the page contents above the fold so that users don't need to scroll down and avoid mistakes from any missed information if contents were placed below the fold.

​

Kuro-Kuro has three main items on their menu: Kuro-Kuro bread, fresh milk, and grilled bananas. In this wireframe, I only focused on the Kuro-Kuro bread menu. There are plenty of toppings to select from, so I needed to figure out a way to create an efficient layout to showcase all of them.

​

 I included images for the menu items and customizations to create a better visualization of what users are selecting. I also included a concise order summary containing item name, quantity, and price on the "Checkout" page so that users can review their order one last time before completing their payment and inputting their order to the seller.

​

In the last page, which is the "Order confirmation", users receiver three new information: their queue number, time estimation, and pick-up time, which would help the pickup process become more organized and efficient. Users can come to the stand at the designated time and avoid waiting in long lines, and pick up their order by showing their queue number to avoid order mix-ups.