-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathpaycrave.html
More file actions
executable file
·271 lines (262 loc) · 15.4 KB
/
paycrave.html
File metadata and controls
executable file
·271 lines (262 loc) · 15.4 KB
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
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>PayCrave Case Study</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/style_paycrave.css">
<!-- JQuery -->
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<!-- Header -->
<header>
<nav class="container">
<a name="top"></a>
<div class="header">
<ul id="headers" class="menu no-bullet" >
<li><a data-page="home" href="index.html"><h5>Home</h5> </a></li>
<li><a data-page="about" href="index.html#about"><h5>About</h5> </a></li>
<li><a data-page="contact" href="index.html#contact"><h5>Contact</h5> </a></li>
</ul>
</div>
<hr id="headerline"/>
</nav>
</header>
<main role="main">
<section class="case-study">
<div class="intro">
<div class="intro-left">
<li id="title-img">
<img src="Assets/PayCrave/Loading.png" alt="Portfolio" />
</li>
</div>
<div class="intro-right">
<li id="title">
<h1>PayCrave</h1>
</li>
</div>
</div>
<div class="center-text" id="process-right">
<li id="blurb">
<p>PayCrave has a simple goal: enhance the user experience for the food truck industry. PayCrave gives users an easy way to find food trucks, where they can order and pay ahead-of-time to reduce wait time for lines and enjoy their food quicker, thereby enhancing the overall food truck experience.</p>
<br/>
<div class="prototype"><a data-page="prototype" href="https://invis.io/XCBZJ35HP" class="btn">View the full prototype</a></div>
</li>
<div class="designheading">
<hr id="problemline1"/>
<h2>The Problem</h2>
<hr id="problemline2"/>
</div>
<p>Currently, users encounter a number of pain points during the food truck experience. The main 3 are:
<li class="bullet">Current available ways to find food trucks is lacking.</li>
<li class="bullet">Current payment system in the industry isn’t unilateral.</li>
<li class="bullet">The wait time to get food, once a food truck is found, is exponentially long if the truck is popular.</li>
</p>
<h2>The Solution</h2>
<p>PayCrave has these features to enhance the user experience and ease pain points during the process:
<li class="bullet">Browse map system using Google API to find food trucks in close proximity.</li>
<li class="bullet">In-depth comprehensive food truck detail card.</li>
<li class="bullet">Pay ahead order system.</li>
<li class="bullet">Aggregated Discover list.</li>
<li class="bullet">Reviews system to help the user decide which truck to go to.</li>
<li class="bullet">Bookmark function for favorite trucks.</li></p>
</div>
<div class="designheading">
<hr id="approachline1"/>
<h2>Research</h2>
<hr id="approachline2"/>
</div>
<div class="center-text">
<p>My process started off with brainstorming a user flow and coming up with user stories for what a typical user wanted out of their food truck experience.</p>
<img src="Assets/PayCrave/UserFlow.png" alt="Portfolio"/>
<img src="Assets/PayCrave/UserStory.png" alt="Portfolio"/>
<p>From here I went on to gathering research data. I based our poll off of demographics and food truck habits, such as how often the user ate at food trucks, how they find food trucks, and what their largest pain point of the whole process was.</p>
<h4 class="link"> <a href="https://goo.gl/Zux9VB">Survey can be seen here</a> </h4>
<h4 class="link"> <a href="https://goo.gl/BNXRD8">Results can be seen here</a> </h4>
<p>After gathering user research, I did some preliminary competitive analysis to see if there was a viable solution to our existing problem already. The three apps I chose to look at were Square Mobile, Paypal Mobile and the Eat St. app.</p>
<img src="Assets/PayCrave/paycravefeaturematrix.png" alt="Portfolio"/>
</div>
<div class="designheading">
<hr id="designline1"/>
<h2>Ideation</h2>
<hr id="designline2"/>
</div>
<div class="center-text">
<img src="Assets/PayCrave/PayCrave_Style_Guide.png" alt="Portfolio"/>
<p>Upon completion of our competitive analysis and finding that no competitors offered all the features we wanted to incorporate, I began to ideate our logo and come up with a style guide for future work.
<br/>
<br/>Choices going into the logo design included a way to tell that this app was for the food truck industry, in which I decided a simple outline of a food truck with utensils as an icon would suffice. Our style guide was based off complimentary pastel colors, with a red pastel as the primary color to invoke hunger.</p>
</div>
<div class="designheading">
<hr id="problemline1"/>
<h2>Wireframing</h2>
<hr id="problemline2"/>
</div>
<div class="center-text">
<p>After the style guide was finished, I went on to wireframe the app using Balsamiq.</p>
<img src="Assets/PayCrave/Lo-Fi.png" alt="Portfolio" />
<p>Above are the 3 cards for the Food Truck, with the menu, a Menu Item overlay, and the review section. In total, we created wireframes for the following cards:
<li class="bullet">Sign In/Sign Up</li>
<li class="bullet">Account Settings</li>
<li class="bullet">Browse</li>
<li class="bullet">Food Truck/Menu Item/Review</li>
<li class="bullet">Shopping Cart</li>
<li class="bullet">Order History</li>
<li class="bullet">Discover</li></p>
<h4 class="link"> <a href="https://drive.google.com/open?id=0B4aHEpPZdTEwa0xWeEhBSmRnZFE">Click here to see all wireframes</a> </h4>
</div>
<div class="designheading">
<hr id="approachline1"/>
<h2>Mockups</h2>
<hr id="approachline2"/>
</div>
<div class="mockups">
<li id="mockup-left">
<p>As I was designing my wireframes, I based my decisions on ensuring all my user stories were reflected in the design. After the wireframes were completed, I went on to design hi-fi prototype mockups. I went through several iterations of the food truck card, with the first version being decidedly old school with the Menu in white box surrounded by the frame of the phone (which, itself, is a box). Upon receiving feedback from my mentor, I decided to update the UI to more modern visual standards and spread out the elements to be full frame.</p>
<li id="mockup-right_img">
<img src="Assets/PayCrave/FoodTruckCard_V1.png" alt="Portfolio" />
</li>
</div>
<div class="center-text">
<h4 class="link"> <a href="https://goo.gl/mnesNd">First Version</a> </h4>
<h3>As a user, I want to select a truck, view details, and see a menu</h3>
<img src="Assets/PayCrave/NavigationScreens.png" alt="Portfolio" />
<p>After sending out the first version for some user feedback, I received feedback that the visual element of the food was the best part. Taking this into consideration, the addition of a pinwheel style “Featured Items” section was created in order to capitalize on the visual element as well as add a “fun” factor, while still keeping the usability of the list menu.
<br/>
<br/>My goal for making most of the decisions in the design process was to make navigation as simplistic as possible, but have high visual content to encourage users to purchase food.</p>
<h3>As a user, I want to create an account</h3>
</div>
<div class="account">
<li id="mockup-left_img">
<img src="Assets/PayCrave/AccountSettings.png" alt="Portfolio" />
</li>
<div>
<li id="account-right">
<p>For our user account, I wanted highlight two features specific to PayCrave:
<li class="flexbullet">Food Preferences, in case of allergies or dietary restrictions. I felt this was a personal touch that users would appreciate a lot.</li>
<li class="flexbullet">Credit Card storage, for quicker access to pay in the Order Ahead System.</li></p>
</li>
</div>
</div>
<h3 class="center-text">As a user, I want to view recent transactions</h3>
<div class="transactions">
<li id="transaction-left">
<p>Through PayCrave’s Order History, users could easily view past transactions, what they ordered at which food truck and the review that they left. Should they have forgotten to write a review, the Order History would indicate that so the users could complete their review from there. I felt as if this was a non-intrusive but easily designed way to encourage users to complete reviews, as data suggests that higher reviewed places always receive more customers.</p>
</li>
<li id="transaction-right_img">
<img src="Assets/PayCrave/OrderHistory.png" alt="Portfolio"/>
</li>
</div>
<h3 class="center-text">As a user, I want to view food trucks near me in a list and save favorites</h3>
<div class="discover">
<li id="discover-left">
<img src="Assets/PayCrave/Discover.png" alt="Portfolio" />
</li>
<div>
<li id="discover-right">
<p>While PayCrave had the Browse card for an easy way to see food trucks within a certain proximity to the user on a map, I also wanted a way for the user to see all available food trucks within the app. Through Discover, the user could sort food trucks through several options:
<li class="bullet">Distance</li>
<li class="bullet">Rating</li>
<li class="bullet">Food Type (A-Z)</li>
<li class="bullet">Name (A-Z)</li></p>
</li>
</div>
</div>
<div class="bookmarks">
<div>
<li id="bookmark-left">
<p>I also wanted them to be able to save their favorite food trucks in a list, so the ability to reorder from favorites was an easier experience than trying to find them on a map or in the Discover list.</p>
</li>
</div>
<li id="bookmark-right">
<img src="Assets/PayCrave/Bookmarks.png" alt="Portfolio"/>
</li>
</div>
<div class="center-text">
<h3>As a user, I want to choose items to purchase and pay for them using my phone</h3>
<img src="Assets/PayCrave/OrderSummary.png" alt="Portfolio" />
<p>The last user story I included was the POS system in our app. On the food truck card, I wanted to include a very simple process for ordering:
<li class="bullet">Browse the menu</li>
<li class="bullet">Check a checkbox to select menu items</li>
<li class="bullet">Add the item to the cart with a button</li></p>
<p>Once finished, users could go to the shopping cart to complete their order. Customers were given a chance to review their order and select their default payment option (if they did not complete this in Account Settings, they would be able to add a card here).
<br/>
<br/>After their order was confirmed, users were taken to an Order Summary screen, which had several options to enhance the user experience:
<li class="bullet">Users could see where the food truck was located on a map</li>
<li class="bullet">What their approximate wait time was until their order was complete</li>
<li class="bullet">A call to action to open their Maps app to get directions to the food truck</li>
<li class="bullet">A call to action to leave a review.</li></p>
</div>
<div class="designheading">
<hr id="designline1"/>
<h2>Prototyping</h2>
<hr id="designline2"/>
</div>
<div class="center-text">
<p>The final step was to send out our full prototype for user testing, record their feedback and make subsequent small changes to the app to reflect that feedback. Overall, the app was well received by the majority of users who tested it. Users enjoyed the visual aspect of the food, which they said helped them immensely in wanting to use the app. They also enjoyed the design and overall simplistic functionality of the app.</p>
<br/>
<h4 class="link"> <a href="https://goo.gl/n2gGCW">User Testing Feedback</a> </h4></p>
<div class="prototype"><a data-page="prototype" href="https://invis.io/XCBZJ35HP" class="btn">View the full prototype</a></div>
</div>
<div class="conclusion center-text">
<div class="designheading">
<hr id="conclusionline1"/>
<h2>Conclusion</h2>
<hr id="conclusionline2"/>
</div>
<h3>Doubts</h3>
<p>My doubts going into this project was that we wouldn’t be able to find a good balance between finding food trucks and the rest of the functionality of the app, with users not wanting to use the rest of the app after they had found the food trucks.</p>
<br/>
<h3>Surprises</h3>
<p>What surprised me the most was how comprehensive the food truck card turned out to be, as my first version was a very simple list menu and review. I enjoyed ideating how to strike a good balance between usability and fun with the final design, in which the pinwheel would help engage the user.</p>
<br/>
<h3>More Time/Resources
<p>If I had more time or resources, I would have made sure that user testing reached a larger audience since user research data is the backbone of good UX design.</p>
<br/>
<h3>Takeaways
<p>I learned to refine my design process and fully develop a useable, fun app. This knowledge will definitely help me further on in future projects.</p>
</div>
<div class="center-text">
<div class="designheading">
<hr id="approachline1"/>
<h2>More Projects</h2>
<hr id="approachline2"/>
</div>
<a href="http://agchen.design/blocbox.html"> <img src="Assets/BlocboxBanner.png" alt="Portfolio"/> </a>
<a href="http://agchen.design/knode.html"> <img src="Assets/KnodeBanner.png" alt="Portfolio"/> </a>
</section>
</main>
<!-- Footer -->
<hr/>
<footer>
<div class="footer-nav-block">
<div class="footer-left"><a href="index.html"><img class="logo" src="Assets/Logo3-sm.png" alt="Portfolio" /></a></div>
<div class="footer-mid">
<div class="back"><a href='#top' class="back">back to top</a></div>
</div>
<div class="footer-right"><ul class="social_icons">
<li class="social"><a href="http://instagram.com/ackeepitcool"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></li>
<li class="social"><a href="http://twitter.com/ackeepitcool"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></li>
<li class="social"><a href="http://linkedin.com/agchen"><i class="fa fa-linkedin fa-2x" aria-hidden="true"></i></li>
<li class="social"><a href="http://dribbble.com/ackeepitcool"><i class="fa fa-dribbble fa-2x" aria-hidden="true"></i></li>
</ul>
</div>
</div>
</footer>
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-107040718-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'UA-107040718-1');
</script>
</body>
</html>