-
Notifications
You must be signed in to change notification settings - Fork 0
/
mobile-waiter.ejs.disabled
241 lines (228 loc) · 13.9 KB
/
mobile-waiter.ejs.disabled
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<% include head %>
<div class="page-content">
<div class="hero-container mobile-waiter">
<div class="hero-text">
Mobile Waiter
</div>
<div class="hero-text-detail">
UI/UX Design, Interaction Design, Prototyping
</div>
</div>
<div class="article-container">
<h1>Mobile Waiter</h1>
<div class="software-container">
<div class="sketch">
</div>
<div class="balsamiq">
</div>
<div class="flinto">
</div>
</div>
<div class="article">
<p>This project is about making customers' experience (e.g. ordering, payment, etc.) in a restaurant/cafe/bar smoother, while also benefiting the businesses by reducing staff requirements, increasing customer loyalty and overall making customers happier.</p>
<br>
<p>I’ve decided to work on this side project when I realized this is a very inefficient process in life that we've all got used to and I wanted to give it a shot to improve this.</p>
</div>
<div class="article">
<p>For a short summary of what the app does, check out <strong>the short explanation from the onboarding process:</strong></p>
</div>
<div class="thumbnail-container" data-content='resources/mobile_waiter_onboarding.png' data-width='1956' data-height='817'>
<img src="resources/mobile_waiter_onboarding.png" alt="Mobile Waiter Onboarding">
</div>
<h2>Scenario</h2>
<div class="article">
<p><strong>Let’s take the following scenario in order to compare the regular process in a restaurant with the process using Mobile Waiter:</strong></p>
<ol>
<li>You go to a restaurant with two other friends</li>
<li>You all order one main meal and one drink</li>
<li>After eating, you all order a dessert and a coffee</li>
<li>You pay with credit card whereas your friends pay in cash</li>
<li>You all pay 10% tip</li>
</ol>
</div>
<br><br>
<div class="article">
<div>
<div class="article two-column">
<div>
<h3>Regular Process</h3>
</div>
<div>
<h3>Process with Mobile Waiter</h3>
</div>
</div>
<div class="article">
<div class="article two-column">
<div>
<p>This would be the process in a regular restaurant:</p>
</div>
<div>
<p>This would be the improved process by Mobile Waiter:</p>
</div>
</div>
<div class="article two-column">
<div>
<h4>Meal order</h4>
<ol>
<li>You sit down at a table and wait for waiter to come</li>
<li>Waiter comes and brings you the menus</li>
<li>You decide on what you will eat and wait for waiter to come get your orders</li>
<li>Waiter comes and writes down your orders</li>
<li>Waiter brings your orders, at this point mostly the waiter doesn’t remember who ordered what and asks you who ordered a particular meal. Same also goes for drinks.</li>
</ol>
</div>
<div>
<h4>Meal order</h4>
<ol>
<li>You sit down at a table and wait for the waiter to come</li>
<li>Waiter comes and scans your QR codes from Mobile Waiter</li>
<li>You open the menu, choose what you will eat and order within the app</li>
<li>Waiter brings your orders and calls you by your name to give your order</li>
</ol>
</div>
</div>
<div class="article two-column">
<div>
<h4>Dessert order</h4>
<ol start=6>
<li>When you are done eating, you try to call the waiter to ask for a dessert menu</li>
<li>Waiter brings you the dessert menu and leaves</li>
<li>You decide what dessert and drink you want and wait for the waiter again</li>
<li>Waiter comes takes your orders</li>
<li>Waiter brings your orders and again asks who ordered which dessert</li>
</ol>
</div>
<div>
<h4>Dessert order</h4>
<ol start=5>
<li>When you are done eating, you open Mobile Waiter app again and look for desserts</li>
<li>You all order your desserts and coffee using the app</li>
<li>Waiter brings your orders and again gives the correct order to the correct person as he knows who ordered what by name</li>
</ol>
</div>
</div>
<div class="article two-column">
<div>
<h4>Payment</h4>
<ol start=11>
<li>You finish eating and want to leave</li>
<li>You try to call the waiter to get the check and pay</li>
<li>Waiter comes and you tell him that you would like to get the check</li>
<li>Waiter goes back, gets your receipt and comes back</li>
<li>You tell that you would like to pay with credit card</li>
<li>Waiter goes back to fetch the POS machine</li>
<li>You try to calculate with your friends to find out what amount everyone needs to pay</li>
<li>Everyone calculates 10% tip and adds it to their calculation</li>
<li>You pay the amount you have calculated and you can leave now</li>
</ol>
</div>
<div>
<h4>Payment</h4>
<ol start=8>
<li>You finish eating and want to leave</li>
<li>You open Mobile Waiter app and do the payment with your credit card directly on the app</li>
<li>Your friends choose to pay cash, which notifies the waiter to come collect the money</li>
<li>Everyone already knows how much they need to pay including the tip, so they just pay with cash and you can leave</li>
</ol>
</div>
</div>
</div>
<br>
<hr>
<h4>Result:</h4>
<div class="article two-column">
<div>
<p><strong>Waiter comes to the table: <span class="higlight">9 times</span></strong></p>
<p><strong>Total steps: <span class="higlight">19</span></strong></p>
</div>
<div>
<p><strong>Waiter comes to the table: <span class="higlight">4 times</span></strong></p>
<p><strong>Total steps: <span class="higlight">11</span></strong></p>
</div>
</div>
</div>
</div>
<div class="article">
<br>
<p>As we can see here Mobile Waiter makes this process more efficient for the customers and it reduces the staff costs for businesses.</p>
<br>
</div>
<h2>How does it work</h2>
<h2>Ordering from the menu</h2>
<div class="article with-video">
<div>
<p>When the user arrives at the restaurant, the waiter comes to the table and scans the QR code of everyone on the table. This takes users to the restaurant menu and also lets the waiter’s application sync up with the users. Then the user browses the menu and adds the things he/she wants to order in to the basket. When everything is ready the user clicks the order now button which lets the waiter and the kitchen notified about the order.</p>
<div class='thumbnail-container' data-content='resources/mobile_waiter_order_process.png' data-width='3438' data-height='1122'>
<p>User flow: Order process</p>
<img src="resources/mobile_waiter_order_process_thumb.png" alt="Order Process">
</div>
</div>
<div>
<video controls="controls" preload="auto" width="270" height="480" name="Order Process" src="resources/mobile_waiter_order_process.mov#t=0.1"></video>
</div>
</div>
<div class="image-block">
<img src="resources/mobilewaiter_menu.png" data-index=0 data-gallery-group="mobile-waiter-4" data-content='resources/mobilewaiter_menu.png' data-width='1125' data-height='2001' alt="Mobile Waiter">
<img src="resources/mobilewaiter_burgers.png" data-index=1 data-gallery-group="mobile-waiter-4" data-content='resources/mobilewaiter_burgers.png' data-width='1125' data-height='2001' alt="Mobile Waiter">
<img src="resources/mobilewaiter_single_item.png" data-index=2 data-gallery-group="mobile-waiter-4" data-content='resources/mobilewaiter_single_item.png' data-width='1125' data-height='2001' alt="Mobile Waiter">
</div>
<h2>Payment</h2>
<div class="article with-video">
<div>
<p>The user can pay at any time using a credit card or a PayPal account. This gives the user the freedom of leaving the restaurant whenever he/she feels like, without having to wait for the waiter to bring the check.</p>
<br>
<p>This process also solves the issue with calculating the amount everyone should pay in a group. When the waiter brings the check, everyone needs to calculate the amount they need to pay, including the tip, which might not be an easy task, especially in large groups of people.</p>
<br>
<p>The app gives you the amount you need to pay including the tip. Then you can choose which payment method you prefer. Even if you want to pay cash, it is still straightforward as the amount that needs to be paid is written in the app.</p>
<div class='thumbnail-container' data-content='resources/mobile_waiter_payment_process.png' data-width='4056' data-height='2606'>
<p>User flow: Payment process</p>
<img src="resources/mobile_waiter_payment_process_thumb.png" alt="Payment Process">
</div>
</div>
<div>
<video controls="controls" preload="auto" width="270" height="480" name="Order Process" src="resources/mobile_waiter_payment_process.mov#t=0.1"></video>
</div>
</div>
<div class="image-block">
<img src="resources/mobilewaiter_payment.png" data-index=0 data-gallery-group="mobile-waiter-3" data-content='resources/mobilewaiter_payment.png' data-width='1125' data-height='2319' alt="Mobile Waiter">
<img src="resources/mobilewaiter_credit_card.png" data-index=1 data-gallery-group="mobile-waiter-3" data-content='resources/mobilewaiter_credit_card.png' data-width='1125' data-height='2001' alt="Mobile Waiter">
<img src="resources/mobilewaiter_feedback.png" data-index=2 data-gallery-group="mobile-waiter-3" data-content='resources/mobilewaiter_feedback.png' data-width='1125' data-height='2001' alt="Mobile Waiter">
</div>
<h2>Rewards</h2>
<div class="article with-video">
<div>
<p>Every category in the menu is worth a certain amount of reward points (users can see this in the menu), customers collect reward points every time they order something in that restaurant.</p>
<br>
<p>Partner restaurants offer rewards when the customer reaches a certain amount of points. For example it could be that the restaurant gives 5% discount when the customer has 50 points, and gives a free dessert for customers with 100 points.</p>
<br>
<p>Rewards encourage the customers to use the application for their orders, which in the end reduces the staff costs for the customer. Also customers are more likely to come back to the same restaurants with the rewards system and this increase the customer loyalty for the restaurants.</p>
<br>
<p>In order to get new customers to start using the app, restaurants can offer a little award for the first order made using the application. Customers would be more willing to try out a new experience when they know they will benefit from it for sure. Yet, after using it for the first time users are more likely to keep using it for more rewards in the future.</p>
</div>
<div>
<video controls="controls" preload="auto" width="270" height="480" name="Explore" src="resources/mobile_waiter_rewards.mov#t=0.1"></video>
</div>
</div>
<div class="image-block">
<img src="resources/mobilewaiter_rewards.png" data-index=0 data-gallery-group="mobile-waiter-2" data-content='resources/mobilewaiter_rewards.png' data-width='1125' data-height='2001' alt="Mobile Waiter">
<img src="resources/mobilewaiter_orders.png" data-index=1 data-gallery-group="mobile-waiter-2" data-content='resources/mobilewaiter_orders.png' data-width='1125' data-height='2001' alt="Mobile Waiter">
<img src="resources/mobilewaiter_rewards_detail.png" data-index=2 data-gallery-group="mobile-waiter-2" data-content='resources/mobilewaiter_rewards_detail.png' data-width='1125' data-height='2001' alt="Mobile Waiter">
</div>
<h2>Explore</h2>
<div class="article with-video">
<p>Users can use the Mobile Waiter application to discover restaurants that support rewards for using the app. This helps users to visit restaurants that would reward them for their loyalty and also provides a good platform to discover different restaurants, increasing the visibility of the partner restaurants.</p>
<div>
<video controls="controls" preload="auto" width="270" height="480" name="Explore" src="resources/mobile_waiter_home_detail.mov#t=0.1"></video>
</div>
</div>
<div class="image-block">
<img src="resources/mobilewaiter_explore.png" data-index=0 data-gallery-group="mobile-waiter-1" data-content='resources/mobilewaiter_explore.png' data-width='1125' data-height='2001' alt="Mobile Waiter">
<img src="resources/mobilewaiter_explore_detail.png" data-index=1 data-gallery-group="mobile-waiter-1" data-content='resources/mobilewaiter_explore_detail.png' data-width='1125' data-height='2001' alt="Mobile Waiter">
<img src="resources/mobilewaiter_my_lists.png" data-index=2 data-gallery-group="mobile-waiter-1" data-content='resources/mobilewaiter_my_lists.png' data-width='1125' data-height='2001' alt="Mobile Waiter">
</div>
<div class="article paginator">
<a class="next" data-url="fest-pack">Next project - Festpack ►</a>
</div>
</div>
</div>
<% include foot %>