Application Flow & User Interactions


Exercise: In this exercise, draw out the layout of the flow, the application will use to engage with customers and generate revenue. Page 1 (Homepage): Visit Foodal.co homepage (anonymous). Login with Facebook, LinkedIn and Twitter buttons. Displays 3 subscription prices, $50, $100 and $150. Displays benefits for each edition price. Page 2 (Logged in Homepage): Logged in Foodal.co Take user to the Settings page. Displays 3 subscription choices: Basic, Advanced or Enterprise. Display more details on the benefits and revenue differences. Allow user to pick the subscription. Use a radio button within the Settings page. Save the Settings. Display add products link. Page 3 (Add Products): Seller add products page. Display add product button. Build a seller shelf, add multiple products by name, price, image and quantity. Page 4 (Products – Shelf): Buyer page, display the buyer view (no login required). Display all products, image, name, price, image and quantity. Display buy now button on each product. On click on buy now, a credit card pop up, linked to Stripe payments. On adding the credit card details, display pay now button. Page 5 (Transaction detail page): On click on pay now button, process the credit card. Send out emails to foodal, seller and buyer. Track the seller sales for the month, to justify the subscription. Display the transaction detail page, whether success or feature. On failure, display a try again link. A try again link takes the user back to the seller page. Page 6 (Analytics dashboard): Display each product. Next to each product, show number of total traffic count. Next to each product, show number of items sold, buyer conversion. Next to each product, display inbound traffic sources, referrer distribution chart. For sellers on Twitter, display followers/following analytics chart, display growth. Menu: Menu bar for seller. Products (Shelf). Analytics (Dashboard). Settings (Account).