Phase three
Information architecture
After everything is kinda sorted out, the next step is to create
information architecture. Organizing and labeling the content to be easily understood by users, and ensuring its usability, findability, flexibility, and consistency.
Categories
Special offers
Shopping cart
Payment options
Broker
Broker
Main screen
Browse menu
Product 1
Product 2
Details
Details
Add to cart
Add to cart
Product 1
Product 2
Details
Details
Add to cart
Add to cart
Product 1
Product 2
Details
Details
Add to cart
Add to cart
Product 1
Product 2
Details
Details
Add to cart
Add to cart
Product 1
Product 2
Details
Details
Add to cart
Add to cart
Product 1
Still waiting
Preparing
Coming to you
Beverages
Desserts
Filters
Coffees
Order status
Pay offline
Scan the code
Apple Pay
Call the waiter
Google Pay
Pay with card
NFC-enabled device
Enter loyalty card no.
Optional
Pay online
Call the waiter
Optional
User flow
The last piece of the puzzle.
User flow is the precursor to the next and final stage of this task -creating a user interface for this app.
Phase two
This section is all about assumptions, constraints, and eventual trade-offs that were made.
A smarter way to order at the café
Designed for comfort, built for speed.
Final phase
UI design
I’ve immediately jumped onto high-fidelity designs, so, the Lo-fi prototype and wireframes are missed here. After all, some of the constraints when building a new app or system, are actually wireframes. Fast-moving environments need fast solutions and rapid prototyping and quick Candy-like UI is one of them.
Home screen
When the user clicks on the Browse menu, immediately is opened the home page. Here users can find all the products, as well as current special offers.
Categories are placed on the left side of the screen, simply because this menu doesn’t mean to be one-more-mobile-product-Dribbble-app.
Products
The price of the products is mandatory for these kinds of apps, so users can see
that info first. Reviews from other users are presented as stars, and the estimated time for that particular product to come to your table is also presented in the Product Cards. Additionally, the number of calories (if there’s info for it) could be presented there.
Detailed product description
On this screen, users can learn everything about the product. From reviews from the customers, the type of the product (vegetarian, vegan, etc.) to the real story about that product. Ingredients easily could be added and removed, and a really nice addition is the info about the dietary or allergic products. The next step from here is Add to cart, where users can pay for the product, or can continue to browse for more desserts, beverages, and coffee, so they can order later on.
Check out
This screen is known to everyone I guess, as we living in the “Ordering” society. Info about the estimated time of the arrival of the all products is something we don’t see much on ordering pages, so it’s a big plus for customers who are enjoying The Caffe for the first time.Loyalty card feature is presented there as well, whether there are points for some product or discount.
Payment options
So, the final step of the user journey is, of course, payment. Scanning the code, or calling the waiter - offline methods or online methods via Google Pay, Apple Pay, or Card are options that are opted for the users.
One last takeaway
Desing assumptions always will be only assumptions. What’s actually matter is real data, real research and real testing. If our assumptions we’ve felt on our skin, then we’ve achieved so much.
Not every digital user is knoweledable about everythig, and not every smart user is the best digital user.
Keep in mind on it!
Design process
Goals & Tasks
So, when I find out what the brief is, the next step was to anticipate actual goals and micro-tasks for the users.
User goals:
- Learn about free tables
- Order immediately
- Pay
User tasks:
- Search through categories (if there are any)
- Filter by price/review/etc. for coffee/deserts/beverages
- Pick and order
- Choose how to pay
- Sent the invoice to the e-mail
* Things should be noted here about offline payment
When users choose offline payment there will be two options
presented - Pay to cashier or Call the waiter
Pay the cashier means that the user needs to scan a QR code or just take a photo of it, then present it to the cashier and proceed with the payment.This is a good option when users don't wanna wait for the waiter or waitress to come by and give them their bill. Quite a fast process, but, there’s always a chance to wait in line for some time.
Call the waiter option is actually made for the old people, or for the users who don't have cameras on their mobile phones. Once the order is done, on the main screen of the device would be visible some kind of sticky message about the payment that needs to be done, and there will be an additional Call the waiter button, which it’s not gonna be presented if a user chose other two options. When the cashier or waiter clicks OK on their devices, that means that the bill is sorted out and the invoice will be sent to the user’s e-mail, of course, if that option is ticked in.
Loyalty card
Before we jump into the Check out and Order options, there’s one thing the user needs to answer - if he/she has a loyalty card or not.If the answer is yes, then users need to fulfill the info, and after that checkout is ready for them with all the discounts which are given as the loyalty card owner.
Next project
Previous project
Phase two
This section is all about assumptions, constraints, and eventual trade-offs that were made.
A smarter way to order at the café
Designed for comfort, built for speed.
Client
the Cafe
Type
iPad app
Timeline
2 weeks
Phase three
Information architecture
After everything is kinda sorted out, the next step is to create information architecture. Organizing and labeling the content to be easily understood by users, and ensuring its usability, findability, flexibility, and consistency.
Categories
Special offers
Shopping cart
Payment options
Broker
Broker
Main screen
Browse menu
Product 1
Product 2
Details
Details
Add to cart
Add to cart
Product 1
Product 2
Details
Details
Add to cart
Add to cart
Product 1
Product 2
Details
Details
Add to cart
Add to cart
Product 1
Product 2
Details
Details
Add to cart
Add to cart
Product 1
Product 2
Details
Details
Add to cart
Add to cart
Product 1
Still waiting
Preparing
Coming to you
Beverages
Desserts
Filters
Coffees
Order status
Pay offline
Scan the code
Apple Pay
Call the waiter
Google Pay
Pay with card
NFC-enabled device
Enter loyalty card no.
Optional
Pay online
Call the waiter
Optional
User flow
The last piece of the puzzle. User flow is the precursor to the next and final stage of this task -creating a user interface for this app.
Final phase - User Interface design
I’ve immediately jumped onto high-fidelity designs, so, the Lo-fi prototype and wireframes are missed here. After all, some of the constraints when building a new app or system, are actually wireframes. Fast-moving environments need fast solutions and rapid prototyping and quick Candy-like UI is one of them.
Home screen
When the user clicks on the Browse menu, immediately is opened the home page. Here users can find all the products, as well as current special offers.
Categories are placed on the left side of the screen, simply because this menu doesn’t mean to be one-more-mobile-product-Dribbble-app.
Products
The price of the products is mandatory for these kinds of apps, so users can see
that info first. Reviews from other users are presented as stars, and the estimated time for that particular product to come to your table is also presented in the Product Cards. Additionally, the number of calories (if there’s info for it) could be presented there.
Detailed product description
On this screen, users can learn everything about the product. From reviews from the customers, the type of the product (vegetarian, vegan, etc.) to the real story about that product. Ingredients easily could be added and removed, and a really nice addition is the info about the dietary or allergic products. The next step from here is Add to cart, where users can pay for the product, or can continue to browse for more desserts, beverages, and coffee, so they can order later on.
Check out
This screen is known to everyone I guess, as we living in the “Ordering” society. Info about the estimated time of the arrival of the all products is something we don’t see much on ordering pages, so it’s a big plus for customers who are enjoying The Caffe for the first time.Loyalty card feature is presented there as well, whether there are points for some product or discount.
Payment options
So, the final step of the user journey is, of course, payment. Scanning the code, or calling the waiter - offline methods or online methods via Google Pay, Apple Pay, or Card are options that are opted for the users.
One last takeaway
Desing assumptions always will be only assumptions. What’s actually matter is real data, real research and real testing. If our assumptions we’ve felt on our skin, then we’ve achieved so much.
Not every digital user is knoweledable about everythig, and not every smart user is the best digital user. Keep in mind on it!
Design process
Goals & Tasks
So, when I find out what the brief is, the next step was to anticipate actual goals and micro-tasks for the users.
User goals:
- Learn about free tables
- Order immediately
- Pay
User tasks:
- Search through categories (if there are any)
- Filter by price/review/etc. for coffee/deserts/beverages
- Pick and order
- Choose how to pay
- Sent the invoice to the e-mail
* Things should be noted here about offline payment
When users choose offline payment there will be two options
presented - Pay to cashier or Call the waiter
Pay the cashier means that the user needs to scan a QR code or just take a photo of it, then present it to the cashier and proceed with the payment.This is a good option when users don't wanna wait for the waiter or waitress to come by and give them their bill. Quite a fast process, but, there’s always a chance to wait in line for some time.
Call the waiter option is actually made for the old people, or for the users who don't have cameras on their mobile phones. Once the order is done, on the main screen of the device would be visible some kind of sticky message about the payment that needs to be done, and there will be an additional Call the waiter button, which it’s not gonna be presented if a user chose other two options. When the cashier or waiter clicks OK on their devices, that means that the bill is sorted out and the invoice will be sent to the user’s e-mail, of course, if that option is ticked in.
Loyalty card
Before we jump into the Check out and Order options, there’s one thing the user needs to answer - if he/she has a loyalty card or not.If the answer is yes, then users need to fulfill the info, and after that checkout is ready for them with all the discounts which are given as the loyalty card owner.
Next project
Previous project
Dejan Zafirovski
Product Designer and Illustrator
Work
About
Let’s work
* Things should be noted here about offline payment
When users choose offline payment there will be two options
presented - Pay to cashier or Call the waiter
Pay the cashier means that the user needs to scan a QR code or just take a photo of it, then present it to the cashier and proceed with the payment.This is a good option when users don't wanna wait for the waiter or waitress to come by and give them their bill. Quite a fast process, but, there’s always a chance to wait in line for some time.
Call the waiter option is actually made for the old people, or for the users who don't have cameras on their mobile phones. Once the order is done, on the main screen of the device would be visible some kind of sticky message about the payment that needs to be done, and there will be an additional Call the waiter button, which it’s not gonna be presented if a user chose other two options. When the cashier or waiter clicks OK on their devices, that means that the bill is sorted out and the invoice will be sent to the user’s e-mail, of course, if that option is ticked in.
A smarter way to order
at the café
Designed for comfort,
built for speed.
Client
the Cafe
Type
iPad app
Timeline
2 weeks
Design process
Goals & Tasks
So, when I find out what the brief is, the next step was to anticipate actual goals and
micro-tasks for the users.
User goals:
- Learn about free tables
- Order immediately
- Pay
User tasks:
- Search through categories (if there are any)
- Filter by price/review/etc. for coffee/deserts/beverages
- Pick and order
- Choose how to pay
- Sent the invoice to the e-mail
Phase two
This section is all about assumptions, constraints, and eventual trade-offs that were made.
Phase three
Information architecture
After everything is kinda sorted out, the next step is to create information architecture. Organizing and labeling the content to be easily understood by users, and ensuring its usability, findability, flexibility, and consistency.
Categories
Special offers
Shopping cart
Payment options
Broker
Broker
Main screen
Browse menu
Product 1
Product 2
Details
Details
Add to cart
Add to cart
Product 1
Product 2
Details
Details
Add to cart
Add to cart
Product 1
Product 2
Details
Details
Add to cart
Add to cart
Product 1
Product 2
Details
Details
Add to cart
Add to cart
Product 1
Product 2
Details
Details
Add to cart
Add to cart
Product 1
Still waiting
Preparing
Coming to you
Beverages
Desserts
Filters
Coffees
Order status
Pay offline
Scan the code
Apple Pay
Call the waiter
Google Pay
Pay with card
NFC-enabled device
Enter loyalty card no.
Optional
Pay online
Call the waiter
Optional
User flow
The last piece of the puzzle. User flow is the precursor to the next and final stage of this
task -creating a user interface for this app.
Final phase - User Interface design
I’ve immediately jumped onto high-fidelity designs, so, the Lo-fi prototype and wireframes are missed here. After all, some of the constraints when building a new app or system, are actually wireframes. Fast-moving environments need fast solutions and rapid prototyping and quick Candy-like UI is one of them.
The Logo
I’ve made a quicky-simple, and yet (in my opinion) a quite remarkable logo for this coffee shop. I’ve opted for the main color to be yellow, because of its joyful characteristics.
The main screen
Using yellow as the main color and black as the contrast color, the main screen follows the logo style. I wanted everyone who’d sit for the first time in The Caffe to feel the same “offline” vibe when opening the printed menu.Also, I’ve chosen the portrait mode of the tablet, just because (once again) everyone to feel more natural when will “flipping pages” of this digital and modern menu.
Home screen
When the user clicks on the Browse menu, immediately is opened the home page. Here users can find all the products, as well as current special offers.
Categories are placed on the left side of the screen, simply because this menu doesn’t mean to be one-more-mobile-product-Dribbble-app.
Products
The price of the products is mandatory for these kinds of apps, so users can see
that info first. Reviews from other users are presented as stars, and the estimated time for that particular product to come to your table is also presented in the Product Cards. Additionally, the number of calories (if there’s info for it) could be presented there.
Detailed product description
On this screen, users can learn everything about the product. From reviews from the customers, the type of the product (vegetarian, vegan, etc.) to the real story about that product. Ingredients easily could be added and removed, and a really nice addition is the info about the dietary or allergic products. The next step from here is Add to cart, where users can pay for the product, or can continue to browse for more desserts, beverages, and coffee, so they can order later on.
Loyalty card
Before we jump into the Check out and Order options, there’s one thing the user needs to answer - if he/she has a loyalty card or not.If the answer is yes, then users need to fulfill the info, and after that checkout is ready for them with all the discounts which are given as the loyalty card owner.
Check out
This screen is known to everyone I guess, as we living in the “Ordering” society. Info about the estimated time of the arrival of the all products is something we don’t see much on ordering pages, so it’s a big plus for customers who are enjoying The Caffe for the first time.Loyalty card feature is presented there as well, whether there are points for some product or discount.
Payment options
So, the final step of the user journey is, of course, payment. Scanning the code, or calling the waiter - offline methods or online methods via Google Pay, Apple Pay, or Card are options that are opted for the users.
One last takeaway
Desing assumptions always will be only assumptions. What’s actually matter is real data, real research and real testing. If our assumptions we’ve felt on our skin, then we’ve achieved so much.
Not every digital user is knoweledable about everythig, and not every smart user is the best digital user. Keep in mind on it!
Web app
Mobile app
Smoodo
Craft. Track. Deliver.
Coming soon
Mobile app
Verve
Museums. Reimagined.
Previous project