Shop at and support DISPLAYBLOG


2015.12.30 13:14 PT

PayCrave was one of the projects I worked on during my apprenticeship. PayCrave is not an intuitive name so allow me to explain: It is is a mock mobile app that helps you find food trucks nearby, order the food you want, and pay for it. All you have to do then is to go there, pick it up, and eat!

I have never designed a mobile app from scratch so PayCrave was an eye opener. I didn’t know where to start so I took the suggestions on Bloc and started searching online. I found an abundance of tools such as iOS templates, vector graphics, color palette pickers, etc. all over the Internet. All user interface elements were designed in Adobe Illustrator.

I started putting ideas down on paper, well actually on pixels with a stylus on my Galaxy Note 4. The image above has been cropped by Pixelmater, a Photoshop-like Mac app that is just as functional but at a fraction of the price. I use Yelp almost all the time to find places to eat, so naturally I went to Yelp to find inspiration. The food trucks in PayCrave are actual food trucks in my area — San Jose, California. I wanted PayCrave to get you going — find your food truck, order the food you want, and start trekking over — as soon as possible. I wanted one of the first screens to be a map that automatically loads all nearby food trucks based on your current location. You can, of course, zoom in and out just like the Maps app on your smartphone. Looking back a Favorites of food trucks might have been a good option to add.

Click on a food truck and you get more details, such as exact location, contact information, how expensive the food is, photos, and reviews. Yes, much like you see on Yelp. (You see that ‘S’ watermark on the bottom right? That’s Samsung doing its not-so-great thing.)

Click on the menu button — yes, there is a menu button in the food truck details page; it was just invisible at the moment — you get to a list of foods available. You get to see beautiful photos, a description of what it is and how it was made, the price, and a button to add to your cart.

Only when you want to check out does PayCrave ask you to either make an account or login. I wanted a new users to experience first how easy it is to find a food truck and order the food you want to eat. The user then would be more willing to create an account with PayCrave.

The above map is the hand drawing rendered. The blue dot is where you are. Only two food trucks are showing, but you can flick up and the rest show up. The piggy icons show how customers have rated the food truck.

Above is what it would look like if you scrolled down the list of food trucks. Of course, there’s a filter: proximity, reviews, price, etc. It’s just invisible at the moment.

Like the hand drawing, the detailed food truck page shows additional information that helps the PayCrave user decide whether she wants to order from this food truck, or not. Of course, Moveable Feast wouldn’t be a good choice since it’s closed at the time I designed it.

This is making me hungry! The above page is the menu: enticing photos of food available, a description, the price, and a button to add to your cart (and a button that shows that you’ve already added). I wanted to keep the overall UI clean and simple, like you would want a restaurant to be.

The checkout page above allows you to change the quantity and shows you how much it’ll cost you. The + and – buttons were originally a little small and thanks to input from my Bloc mentor — Jason Early — I made the buttons a lot larger so it’s really easy to add or subtract from your cart.

This is when I wanted to ask our PayCrave user to create an account, after experiencing how easy it is to find a nearby food truck, find what you want to eat, and place an order. You can use Facebook or Twitter to sign up or use your email address and create a PayCrave account. You can also checkout without signing up, but take another look at all the benefits you’re forsaking. I took a page from Starbucks’ loyalty program, which I consider to be quite effective.

And a big welcome to Jony! I wanted to make sure Jony knew PayCrave is ecstatic to have him as a member.

The Place Order page shows a summary of what you’ve added to your cart, how much it will cost, and payment options.

Once your order is placed, your order is confirmed and you’re given the approximate time it will take for the food truck to get your order ready. And for your convenience a map of where you need to go is shown. Just tap the pin and let Siri help you get there.

You can write a review:

Well, there you have it. My first mobile app UI project. I’ve also created an InVision prototype to work on the user experience (UX). I’d love to get your feed back on it.

Note: I will be switching to Mac as my main design platform and the reason is Sketch. The full suite of Adobe designs tools were paid on a monthly basis during my Bloc apprenticeship, but going forward if I wanted both Photoshop and Illustrator it will cost me $50 every month. Illustrator alone would cost $20, per month, forever. I’d rather pay a one time fee of $99 for Sketch, which is a vector-graphics design tool like Illustrator but laser-focused on helping designers get going with designing.