Blenz Coffee

Blenz Coffee

Vancouver's beloved cafe chain

Vancouver's beloved cafe chain

Vancouver's beloved cafe chain

Revitalizing Blenz's mobile app for effortless and efficient ordering, enhanced by a warm and inviting UI transformation.

Revitalizing Blenz's mobile app for effortless and efficient ordering, enhanced by a warm and inviting UI transformation.

Revitalizing Blenz's mobile app for effortless and efficient ordering, enhanced by a warm and inviting UI transformation.

Services

Visual Design

UI & UX Design

Scope

1 month

Industries

Food and Beverage

Date

January 2023

Key Screens:

Key Screens:

Old Blenz Design

New Redesign

Summary of Design Process

In-Depth Process

In-Depth Process

Problem Overview

Problem Overview

Young busy professionals are always on the go and they need to be able to order their coffee with ease.

During my research I discovered that when COVID hit, consumers had to start ordering their coffee through apps more often. Vancouver's Blenz is no exception.

After researching the market, I discovered a significant gap not just in accessibility-focused emergency services, but in disaster-preparedness apps overall. While government-run downloadable apps exist, there is little distinction between the website's flood guide and the mobile application itself. The advice invariably states that users should prepare necessities ahead of time. However, people often procrastinate, forget, or are caught off-guard by a sudden disaster, forcing them to make do with what they have on hand.

Preliminary Research

Preliminary Research

Identifying the pain points came from my observational research and speaking with existing Blenz customers.
The key source of friction came from the information architecture and layout of the app.
- My primary focus in this project's redesign is to create a more intuitive and simplified flow for ordering drinks quickly.
- Additionally, as a part of my redesigning process I would like to make major adjustments to the app’s user interface.

Market Research

Market Research

Market Research

I conducted a comparative analysis of three widely utilized mobile ordering apps in the greater Vancouver region. Specifically looking at the way they simplify their order placement flow with the information architecture.

SWOT Analysis

In conducting the SWOT analysis, I employed a problem-solution approach to identify key areas of improvement.


Circling back to the primary objective of the app redesign-simplifying the IA. During this analysis, I saw an opportunity to condense the steps for the user in picking a drink and placing the order

SWOT Brainstorm

SWOT Brainstorm

Testing and Iterating

Testing and Iterating

Card Sorting

Card Sorting

To kick my IA makeover off, I have conducted three card sorting tests, asking my users to arrange the information architecture intuitively.
Each user chose a persona and scenario prior to rearranging the sitemap cards.
As I was actively listening to the justification and thought process of testers, a reoccurring theme emphasized the importance of having an accessible "reorder" user flow.

Card Sorting 1

Card Sorting 2

Card Sorting 3

The results of the card-sorting tests were truly enlightening. I carefully reviewed the users' feedback and refined the sitemap to incorporate the most prominent takeaways.

Site Mapping

Site Mapping

SWOT Brainstorm

SWOT Brainstorm

Upon reviewing the original IA, I noted that the general tabs contained a disproportionate amount of content compared to the rest of the sections.
To address this issue, I want to relocate the scanning option to the home screen. Additionally, the home screen should lead directly to the "order now" section.


At this stage, I am considering whether the app's home screen should prioritize the scanning point-collecting QR code. While other coffee-ordering apps have not located their point scanner on the home page, I would like to test this readjustment and evaluate user feedback.

Wireframing

I began sketching the key screens in procreate to experiment with the overall layout.

Transferring over the Procreate Sketches into clickable Figma layouts:

Landing Page

Order Now

About/Settings

Mid-Fidelity Prototype

Landing Page

Order Now

About/Settings

Going into the mid-fidelity stage after making the design tiles, I am introducing the authentic Blenz colour palette and fonts.

Landing Page

Order Now

User Interface Design

User Interface Design

Color and Typeface Choice

Color and Typeface Choice

Color and Typeface Choice

As I examined the old-style tiles, I noticed that the stylistic choices applied in the app did not align well with the brand's identity. The majority of the app space was white, resulting in a sterile ambiance, and the typography relied on a thin Roboto font for almost every section.

I found that warm brown tones were a common feature in their marketing, interior design, and overall identity.

Drawing inspiration from this, I decided to incorporate these colours into the app's design. By doing so, I aimed to transform the previous sterile and uninviting user interface into a warm and welcoming one, exuding a cheerful atmosphere.

Feedback Incorporation

At this stage of the project, I put my prototype out into the world with a stack of sticky notes for anonymous feedback.
Here were some takeaways:
-Home Page should emphasize the recently ordered drinks.
-No need to display the progress bar of points.
-Remove the QR code from the home page and ttuck it into secondary tabs instead.

Final Screens:

Old Blenz Design

New Redesign

The end result is a more intuitive Information Architecture, an on-brand stylistic UI for Blenz. Perfect for on-the-go, efficient ordering with an easy point-collecting flow.

Angelina Rudakova 2024 All Rights Reserved

Angelina Rudakova 2024 All Rights Reserved

Angelina Rudakova 2024 All Rights Reserved