Blenz Coffee App

Problematic Design with Order Process

Blenz Coffee stands out as a less mainstream chained cafe in Vancouver, offering a distinctive range of beverages and food. With most of their locations situated in quiet spots, it caters perfectly to introverts seeking a serene environment. However, the current state of their app design falls behind competitors like Tim Hortons and Starbucks. Managed by a third-party organization, the ordering system presents a significant drawback, requiring users to navigate through an extensive list for each selection.

To ensure that they can stay competitive, the app needs to be redesigned. The goal is to streamline the ordering process, addressing the issues of the outdated design. The proposed improvements include reorganizing the placement of buttons and optimizing the overall layout for a more intuitive and user-friendly experience. This transformation aims to elevate the app's efficiency, aligning it with contemporary standards and ensuring a seamless experience for customers.

User Testing on Ordering Process

I conducted user testing to observe how long it will take them to complete an order with the app. Majority of them complete the task on average about 3.5 minutes, and showed slight degree of confusion and frustration while looking through the options. Because the current app is splitting the "Menu" into 2-3 steps before getting into the item, and the product category is also disorganized.  

The user flow tends to be:

Style Guide

I took the colour palette and typography directly from the web page. I designed the icons and buttons based on the brand's style.

Order Process Redesign- Before and After in Detail

Home

I utilized a color palette that was taken directly from the website to create a more modern and attractive appearance to the app. The selection of black was intentional because it is the storefront color of Blenz's stores, so I wanted to have some consistency between the app and physical locations.

To accommodate users with longer names, I reduced the text size compared to the previous version.

The navigation bar was completely redesigned, now providing clearer feedback to distinctly indicate the current page the user is on.

Location

The Map page's layout and design were intended to improve content contrast, ensuring users can navigate it intuitively.

1. Added a filter option for users to navigate the location better.
2. Changed the style of the description since yellow text on white background was very hard to see, and the length of the description was reduced.

Menu

I decided to remove the banner section containing the store's address entirely. I found the design to be inconsistent with the brand, and the text was difficult to read. The same goes for the search bar, which had a gigantic search button.

1. Once the user select the location, the address will show on the top. The user is able to click on the button and change the location.
2. The product category was reorganized into a grid structure and reduced the number of options to make the selection process faster and easier for the user. The featured item at the top made it stand out more. The card is also longer in length because the product category does not change frequently.
3. A sticky button was placed on the bottom of the phone's screen.

Menu - Specific Category

The card is smaller because items need to be updated frequently, so more items can be added without extending the scroll too much.  

1. The Tea section expanded because I combined other tea-related items into one.  
2. The quick-add button were designed to have high contrast with any type of image.

Menu - Specific Item

I have divided each section into separate cards to enhance clarity and improve the overall reading experience.

1. Changed from a drop-down menu to simple add and minus button, that way the user do not have to scroll through the drop-down menu when selecting for a larger number.
2. In the original version, I found the radio button odd because the rest of the options are check boxes, and the price may also steer away the users . My approach here was to make the buttons bigger to make selection process more intuitive and appealing.
3. The customized options they are offering currently only allow for a single choice, which seems unusual given the use of checkboxes. However, even if I update it with radio buttons, checkboxes are more suitable for this list, as it is intended for multiple choices.

Review Order

Because the order page has a longer list, I made it clearer by using black lines to separate each section. Additionally, I used cards to divide smaller sections for improved organization.

The main objective was to improve the user experience of the order process.