User Flows - Paycrave

Paycrave connects food trucks with buyers and makes the entire experience (from selection to purchase and collection) much easy and enjoyable.

Together with my design mentor we designed Paycrave, an Android mobile payment app designed for phone and tablet. 

The understanding of the users, therefore the user flows, played a crucial part in the process.

What: Research, Wireframes, Visual Design, Prototype 
How: Axure, Illustrator, Photoshop, Google Docs
When: 2014, 3 weeks work 
  User Stories  (buyer and food track owner)

User Stories (buyer and food track owner)

Requirements, User Flows, Site Map

The requirements list has been color coded in order to define a first draft of the screens needed for the app. 

The key final user requirements are:

User Flow (Food Truck owner persona)

  • Locate the food truck on a map
  • Select a specific category of food, select a specific food from an updated menu
  • Order food and select a time for collection
  • Receive a notification when food is ready
  • Pay through the app

The key food truck owner requirements are:

  • Create and update an account
  • Upload menu and food description
  • Receive payments
  • Organize deliveries

Site Map (Buyer persona)

In order to be more effective in the design and to put order in the ideas, the two site maps have been colored as well. Same color means functions in the same page, while the diamond shape stands for a new screen. 

Sketches & Wireframes

Through the definition of the users personas we realized people are quite visual when comes to select their meal. So we opted for a visual oriented app, giving the opportunity to the truck owner to create a food gallery followed by a detailed description of ingredients and prices.

Different personas implied also different scenarios, which dictated the use of different platforms for the buyer (phone) and the seller (tablet). 

  Wireframes  (Axure)

Wireframes (Axure)

Grid And Layout

Google Material Design has been used and adapted to the branding guidelines we received from the client.

Adobe Illustrator templates for tablet and phone have been used as foundation for the style, hierarchy and organization of the components in the screen.

Design Experimentations & Gesture

Functions have been simplified along the development of the app. In some screens (like the 'Order submission') the user tests highlighted not only suggestions for the UI, but also important UX critiques, like:

  • an articulated UX (e.g. need to go through 3 screens before actually submit the order)
  • the presence of unnecessary functions (like the 'time floating button below') that slowed down the flow
  • lack of important actions (e.g. quantity customization)

Prototypes

Two interactive prototypes have been created using InVision. Those prototypes have been tested by possible users.

InVision mobile prototype
InVision tablet prototype

What I've Learned

Paycrave was our first attempt using the Material Design guideline, and this challenge happened to be very stimulating.
We have enjoyed the clarity of the guidelines and the multiple templates we downloaded for Adobe Illustrator. 

The main lesson I have learned comes from the user flows that showed the importance of the environment.
The two personas had quite essential yet multiple requirements, and they were expected to use the app in two different contexts. That dictated a different UI applied to specific platforms. 

  Sketches and interactions  between screens

Sketches and interactions between screens

  Mock ups with design guidelines from Material Design

Mock ups with design guidelines from Material Design

Order submission (first design): old screens with gesture and user flows on the side

Order submission (redesign): redesigned screens with less screens for the submissions and a new feature added (i.e. the quantity customization)