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
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:
- 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
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).
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)
Two interactive prototypes have been created using InVision. Those prototypes have been tested by possible users.
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.