WIREFRAMING
When we started building the wireframe for Cardfree, the main client on the pipeline was Dunkin’. The current app is built on these wireframes for Order-Ahead, however, the project has expanded to support other clients.
Cardfree’s Order-Ahead system provides mobile and web ordering to SMB and large sized merchants. The unique demands of mobile ordering are met by the system which combines an existing, successful, production ordering code base with ground-up mobile-specific functionality, all encompassed within and making use of Cardfree’s integrated mobile commerce platform. Via the order ahead system, consumers may access a mobile/web menu, add items to their order, apply modifiers, choose a pick up location, pay for the order and finally check-in at the desired location to pick up their order.
| ROLE | UX, UI DESIGNER |
|---|---|
| TOOLS | SKETCH, INVISION, HTML/CSS PROTOTYPING, ABSTRACT |
| TEAM | MYSELF, PROJECT MANAGER, ENGINEERING TEAM, EXECUTIVE TEAM |
| TARGET PLATFORMS | MOBILE (IOS,AOS), WEB |
1. User opens the app (app, web view, etc. Mobile/Web app calls our APIs / SDK).
2. Find nearest mobile order enabled store.
3. Select the store.
4. On the store homepage, the user is presented with time information ("Today at 8:18 AM" for example, or "Busy, prep time is longer than usual")
- User gets this information before they build an order.
- User gets pickup options.
- User gets order type options (Dine-In, delivery).
5. Browse a (master) menu or selects from their favorite order or order history.
6. Select a category (coffee).
7. View items in that category (espresso, latte, macchiato, etc.).
8. Select modifiers (double shot, almond milk, large, light sweetener, 2x sugar).
9. Add to cart.
11. Order is open and the user is able to review on Checkout.
12. View and edit pickup options or order type options.
13. View items on cart, the user is able to update items in cart.
14. The user is able to add more items to cart.
15. Select payment tender (stored value card, credit card, debit card, OS specific).
16. Purchase.
17. Immediately upon purchase, the user will receive informant in the UI (pop up modal, etc.) - Scheduled for pick up, date, time, instructions (go to pre order counter, etc.) and a dismiss button "OK" forcing the user to acknowledge the information.
18. Upon dismissing the order confirmation information the user is taken to a screen in the app that contains a map of the location, the estimated order time, the order status (order sent, preparing order, order ready for pick up) - note that the area of this screen that contains the order status is dynamic - it will update when the order status updates (from preparing order to order ready for pick up, etc.) .
19. The user can use navigation to leave this page and either build another order or explore the menu - for example a back arrow taking the user to the store home page.
20. The user will always be able to get back to the order dynamic order confirmation page (map, status, etc.) - if they are on the store home page or exploring the menu, there will be visual indicator to take them back to the dynamic order confirmation page (for example a cell that states Order History, etc.).
21. User goes to store and pick up the item or at restaurant.
22. Additionally, the user gets a receipt via push/email (product / item ordered including modifiers and subtotal, tax and total). There will be a prominent call to action on the receipt as well - Order Ready at 8:19 AM, Friday March 04 with instructions (please go to mobile order station, etc.).
When we started building the wireframe for Cardfree, the main client on the pipeline was Dunkin’. The current app is built on these wireframes for Order-Ahead, however, the project has expanded to support other clients.
As part of the Order-Ahead experience I designed the web app following the patters stablished in the mobile experience.
