Blenz Coffee
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.
Services
Visual Design
UI & UX Design
Scope
1 month
Industries
Food and Beverage
Date
January 2023
Key Screens:
Old Blenz Design
New Redesign
Summary of Design Process
In-Depth Process
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.
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
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
Testing and Iterating
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
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
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.
reach out to me!
Angelina Rudakova 2024 All Rights Reserved
Blenz Coffee
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.
Services
Visual Design
UI & UX Design
Scope
1 month
Industries
Food and Beverage
Date
January 2023
Key Screens:
Summary of Design Process
In-Depth Process
Problem Overview
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
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
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
Testing and Iterating
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
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
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.
reach out to me!
Angelina Rudakova 2024 All Rights Reserved
Blenz Coffee
Vancouver's beloved cafe chain
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:
Old Blenz Design
New Redesign
Summary of Design Process
In-Depth Process
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.
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
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
Testing and Iterating
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
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
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.
reach out to me!
Angelina Rudakova 2024 All Rights Reserved