PayCrave

BRANDING & UI DESIGN

THE CHALLENGE

Paycrave is a mobile app concept that allows you to search for foodtrucks nearby, order online and then pay through the app.

THE USER FLOW

The user flow follows the journey of searching for nearby foodtrucks, adding items to your cart and finally purchasing the items. I began the development of Paycrave with defining the user stories. Determining what functionality is most important helped me narrow the focus of the app. I then researched competitors in the same space (Yelp, Square and Caviar) to see what functionality seemed to be most important and what the pain points are. Using the information from this initial discovery phase, I was able to create wireframes.

User Stories

  1. As a customer | I want to pay for food using my phone | High-level Requirement
  2. As a customer | I want to sign up and create a profile | High-level Requirement
  3. As a customer | I want to maintain my profile High-level Requirement
  4. As a customer | I want to use my social networks to sign up (Facebook or Twitter) | Profile Creation Process
  5. As a customer | I want to sign up using my email and creating a password | Profile Creation Process
  6. As a customer | I want to create a profile and add my photo |Profile Creation Process
  7. As a customer | I want to add my credit card information securely | Profile Creation Process
  8. As a customer | I want to see a map of food trucks nearby | Map View
  9. As a customer | I want to select a specific truck on the map to view more details | Map View
  10. As a customer | I want to view the menu of the food | Food Truck Detail
  11. As a customer | I want to view ratings of food trucks | Food Truck Detail
  12. As a customer | I want to place an order for food at a food truck nearby | Food Truck Detail
  13. As a customer | I want to pay for my food using the app | Food Truck Payment Process
  14. As a customer | I want to add a tip when purchasing | Food Truck Payment Process
  15. As a customer | I want to rate my experience with the food truck | Rating Process
  16. As a customer | I want to provide a written review about my exerience with the food truck | Rating Process
  17. As a customer | I want to share pictures I took while eating at the food truck | Rating Process
  18. As a customer | I want to view my transactions and recent visits | Profile View
  19. As a customer | I want to change my password | Profile View
userflow_paycrave

THE WIREFRAMES

The next step in the initial design process was to develop the wireframes based on the user stories and user flow that I created. The wireframes I created were detailed and intended to give a complete overview of the visual look and feel of the app. wireframe_paycrave

THE STYLE

The brand uses reduced color palette with green as a distinctive primary colour. Overall the app uses a modern, bright and differentiated brand identity that stands out with personality and hint of playfulness.

THE MARK

I started in one direction, focusing on the idea of playfulness as well as moving towards a goal. PayCrave is approachable, trustworthy and lighthearted. I started in one direction with the logo, utilizing the vibrant color palette.

logo_paycrave

I decided to focus on two areas most imporant to the brand—location and freshness, which I illustrated in the final mark.

logo_paycrave

THE DESIGN

onboarding_paycrave

Educating the users about how to use the app was important for a smooth onboarding.

favorites_paycrave