04 ––

Paycrave

man-holding-iphone-7-jet-black-african-americanman-holding-iphone-7-jet-black-african-american

Category: Mobile App ・ Role: UX/UI, Visual Design, Branding ・ Year: 2017

Paycrave is a mobile app concept that bridges the connection between users and local food trucks. It allows people to quickly search for food trucks nearby and focuses on an easy ordering and payment process.

With the food truck industry growing rapidly in the past few years, there is a need for more apps that integrate a mobile payment solution for it’s users. While it’s nice to have an app that allows you to just search for food trucks, it’s even better to have one where you can view the menu, place an order, and be on your way to pick up your food.

For this application, I focused on prioritizing features based on pre established user stories for the project. I developed user flows, conducted user research, designed the user interface, and created a clickable prototype.

[unex_ce_button id="content_lb1c8ogvx" button_text_color="#000000" button_font="regular" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#ffffff" button_padding="15px 60px 15px 60px" button_border_width="1px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="https://invis.io/VRA0IXFH9#/214220046_Sign_In_" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]View InVision Prototype[/ce_button]
iPhone 7 Front copy 2iPhone 7 Front copy 2
Mockup 08Mockup 08
Comp 10Comp 10

STORIES & FLOWS

When mapping out user flows, it seemed that the focus was the ability for users to view trucks around them and the steps after that. The main screen for searching for trucks gives users options to view results by a map view and a list view. I wanted to make it easy for users to view results by preference and in a clean and organized manner. After viewing results, users are directed to a food truck’s detail page, where they can add items to the cart and checkout.

  1. As a user, I want to pay for food with my phone.

  2. As a user, I want to sign up for a Paycrave  account.

  3. As a user, I want to create a profile, upload an avatar, and share my location.

  4. As a user, I want to find food trucks in my area.

  5. As a user, I want to select a truck, view details, reviews, photos, and the menu.

  6. As a user, I want to order food in advance for pick up.

  7. As a user, I want to pay with a credit card.

  8. As a user, I want to share my experience and leave a rating.

  9. As a user, I want to save food trucks to my favorites list.

  10. As a user, I want to filter my search results by map or list.

The next step was to sketch out wireframes based on the user stories and user flows that were established. The wireframes I created highlighted some of the main features and functionalities of the interface and was intended to present an overview of the visual design of the app.

The identity for Paycrave needed to be welcoming and appetizing for potential users. I decided to center the main color scheme around varying shades of red and green, which by association in color theory pair great with images of food. For the menu bar and other UI elements, black and white were used to keep things clean and modern.

Typography@2xTypography@2x

The logo I chose was a fork and spoon crossed together to form an ‘X’ shape. I wanted users to easily associate the purpose of the app while keeping the style of the logo simple and modern. After all, the identity for Paycrave is casual yet trustworthy, and with users making payments through the app it was important that they felt secure using it.

Onboarding screens - Allowing users to add a payment option and pin their location via GPS was the purpose of the onboarding flow. This made it so that users could have a seamless experience when first using the app.

ONBOARDINGONBOARDING

Quickly adding food items - For a speedy checkout, we opted for a quick view and add option for food items a user would like to order

adding itemsadding items

Detailed food truck page - Users should have quick access to food truck information, including ratings, a description, and hours of operation.

ArtboardArtboard
PaycravePaycrave
[unex_ce_button id="content_45rqew2ch" button_text_color="#000000" button_font="bold" button_font_size="40px" button_width="full_width" button_alignment="center" button_text_spacing="2px" button_bg_color="transparent" button_padding="100px 60px 100px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="http://jcdelacuesta.com/?work=minimaal" button_link_type="url" button_link_target="_self" has_container="" in_column=""]Next Case Study[/ce_button]