Demo Screens - OpenAgentsInc/arcade GitHub Wiki

Eight demo screens

  1. Peer-to-peer bitcoin trading screen: Show a screen with a list of buy and sell offers for bitcoin from other individuals. Allow users to filter and sort the offers. Show details for each offer like payment methods, limits, location, reputation, etc.

  2. Ridesharing screen: Show a map with available drivers in the area. Allow users to input a pickup and drop-off location to get fare estimates and request a ride. Show driver details like vehicle info, ratings, etc.

  3. Food delivery screen: Show a scrollable list of restaurants and food options available for delivery in the area. Allow users to select items to order, input their address for delivery and payment info. Show delivery time estimates and driver details.

  4. Event tickets screen: Show a list of upcoming events in the area with details like event name, date, time, location, available tickets, pricing, etc. Allow users to select an event to buy tickets for and go through the checkout process.

  5. Homestay/short-term rental screen: Show a map with available rentals in an area. Allow users to filter by amenities, price, ratings, etc. Display details for each listing like photos, description, availability, pricing, and host info. Allow booking requests.

  6. Handcrafted goods marketplace: Show categories of handcrafted items like art, clothing, jewelry, furnishings, etc. Within each category show listings of items from makers and crafters. Include photos, descriptions, maker profiles, shipping details and allow users to purchase items.

  7. Peer-to-peer lending screen: Show a list of available loan requests from individuals including details like the loan amount, interest rate, duration, purpose, etc. Allow lenders to review the details and fund portions of loans that match their criteria. Show repayment schedules and fund disbursement info.

  8. Charitable donations screen: Show a list of verified charities and causes accepting donations. For each charity show details like their mission, impact, transparency ratings and current funding needs. Allow users to select charities to donate to and input donation amounts during checkout. Show donation confirmation and receipts.

#1 - Peer-to-Peer Bitcoin Trading

Top of the screen:

  • A search bar to search for specific buy or sell offers by location, payment method, username, etc.
  • Next to the search bar, a filter icon that would open filters like location, payment methods, currencies, reputation, limits, etc. But don't show the actual filters on this screen.

The main content area:

  • Show 3 featured buy and sell offers in a top section with the username (or anonymous if preferred), location (just city/country), payment methods, price, and limits
  • Below the featured section show 10-15 more condensed buy and sell listings including just the username/anonymous, location, payment methods and price
  • Each offer listing should link to a details page with more info and the ability to transact (not created for this mockup)

On the right side of the screen:

  • A "Top traders" section highlighting 2-3 reputable frequent traders on the platform including their username, number of trades, and average rating
  • Under the top traders, show a "Payment methods" section highlighting the top 2-3 payment options like PayPal, bank transfer, gift cards, etc. to give users an idea of what's popular for trading bitcoin on the platform.
  • At the very bottom right, a link to "See all offers" which would link to additional buy and sell listings.

Footer of the screen:

  • Links to "About us", "How to trade", "Fees", "Verify account" (if ID verification is required), and your company name in the center of the footer

This single screen demonstrates featured and list view offers, information on top traders and preferred payment methods, as well as links to more details and account resources. The user can get a sense of what kind of bitcoin trading options and experience will be available on the platform from viewing this mockup.

#2 - Ridesharing

Top of the screen:

  • A pickup location search bar to enter a starting point for a ride
  • Next to the pickup search bar, a destination search bar to enter an ending point for the ride
  • Below the search bars, show options to select the type of ride needed like "Now", "Later", "Schedule a ride"

The main content area:

  • Show a map view of the local area with markers indicating the locations of available drivers
  • List 3-5 of the closest available drivers on the right side of the map with info like:
    • Driver name and photo
    • Vehicle details (make, model, year)
    • License plate number
    • Rating
    • Approximate travel time to your pickup location
  • Selecting a driver from the list should link to booking the ride (not created for this mockup)

Footer of the screen:

  • Estimated fare ranges for the different ride options (now, later, scheduled) so users know what to expect to pay

  • Links to "About us", "How it works", "Payment", "Promo codes", and your company name in the center of the footer

  • Note: You could also show fare estimates and an option to book the ride directly on the map view by tapping on a driver's marker. But keep the right sidebar listing as an alternative way to select a driver.

This single screen demonstrates the key functionality of searching for pickup and drop-off locations, viewing available drivers on a map, and selecting and booking a driver. The estimated fare info and links in the footer provide more details and resources. The user can understand the overall experience of booking a ridesharing service through this mockup.

#3 - Food Delivery

Here are the details I would include on a single food delivery screen mockup:

Top of the screen:

  • A location search bar to enter an address for food delivery
  • Next to the search bar, a filter icon that would open options like cuisine type, dietary needs, open now, ratings, etc. But don't show the actual filters on this screen.

The main content area:

  • Show 8-12 restaurant options in a scrollable list view including:
    • Restaurant name and logo (if available)
    • Estimated delivery time
    • An option to mark the restaurant as a "Favorite"
    • A "View menu" button to see menu items and add to your cart (not created for this mockup)
  • The restaurants should be sorted by estimated delivery time with the fastest options at the top, or you can use different sort options if the filters are opened.

Footer of the screen:

  • Links to "About us", "How it works", "Payments", "FAQ", and your company name in the center of the footer

  • Estimated delivery times section: Show 3 options like 30 min or less ($5.99 fee), 60 min ($3.99 fee), Asap (fees waived) as an example

  • Note: You may also want to include the user's delivery address at the top under the location search bar to confirm it is correct before showing restaurant options.

This single screen demonstrates searching for and selecting a delivery address, viewing restaurant options, sorting/filtering those options, and understanding the delivery time frames and fees. The user can get a sense of how the food delivery experience will work from this mockup. The links and info in the footer provide more details and resources about the service. Please let me know if you have any other questions!

#4 - Event Listings

Top of the screen:

  • A search bar to search for specific events
    • Next to the search bar, a filter icon that would open the category/date filters in a sidebar (but don't show the actual filters on this screen)

The main content area:

  • Show 3 event listings with images in a top highlighted/featured section
    • For each event show the event name, date/time, location, image, ticket options, number of tickets left
  • Below the featured section show 6 more condensed event listings in a list view with event name, date/time, location and ticket options
  • Each event listing should link to the event details page (not created for this mockup)

On the right side of the screen:

  • A "Recommended for you" section with 2-3 event recommendations based on the user's location and category preferences
  • Show the event name, date/time and an image for each recommended event
  • Under the recommendations, a "Most popular near you" section showing 2-3 top events in the local area
  • Show the event name, date/time, location and an image for each popular event
  • At the very bottom right, a link to "See more events" which would link to additional listings

Footer of the screen:

  • Links to "About us", "How it works", "Customer service", "Sell tickets", and your company name in the center of the footer

This single screen mockup demonstrates filtering events, featured events, list view events, recommended and popular events sections as well as links to more details and information. The user can get a good sense of browsing and finding events from just this one screen.

#5. Homestay/short-term rental

Top of the screen:

  • A location search bar to enter a city, neighborhood or address to search for rentals
  • Next to the search bar, a filter icon that would open options like price, ratings, amenities, etc. But don't show the actual filters on this screen.

The main content area:

  • Show a map view of the local area with markers indicating the locations of available rentals
  • List 3-5 of the top recommended rentals on the right side of the map with info like:
    • Property type (entire place, private room, shared room)
    • Price per night
    • Photo
    • Rating
    • Amenities (kitchen, wifi, free parking, etc.)
  • Selecting a listing from the right sidebar should open a popup on the map with photos and a description, reviews and a "Request to book" button. (not created for this mockup)

Footer of the screen:

  • Links to "About us", "How it works", "Travel insurance", "List your space", and your company name in the center of the footer
  • Show the price range for rentals in the selected location to give users an idea of what is available in their budget. For example, "$50 to $200 per night based on your search location and filters."

This single screen demonstrates searching for and viewing available rentals on a map, with the top recommended options shown in the right sidebar. The links in the footer provide more details and the price range gives context on what users can expect to pay. The mockup shows filtering for location but additional filter options could easily be added. The user can get a sense of browsing homestay and rental options and going through the booking process based on this screen.

Let me know if you have any feedback or suggestions for improving this short-term rental screen mockup! I'm happy to revise it.

#6 - Handcrafted Goods Marketplace

Top of the screen:

  • A search bar to search by product or maker name keyword

The main content area:

  • Show categories in a left sidebar:
    • Art
    • Clothing
    • Jewelry
    • Furnishings
    • Home decor
  • When a category is selected, show 8-12 product listings in a scrollable list view including:
    • Photo
    • Price
    • Maker name
    • Location
    • Selecting a product listing should link to the product page with photos, description, maker info, shipping details, reviews, and an "Add to cart" button. (not created for this mockup)

Footer of the screen:

  • Links to "About us", "How to buy and sell", "Shop by region", "For makers", and your company name in the center of the footer
  • At the bottom of the footer show your company tagline if you have one. For example, "Handmade with love" or "Discover unique goods from independent makers".

#7 - Peer-to-Peer Lending

Top of the screen:

  • A search bar to search for loan listings by amount, interest rate, duration, etc.
  • Next to the search bar, a filter icon that would open options to filter by loan purpose, risk level, loan amount, duration, etc. But don't show the actual filters on this screen.

The main content area:

  • Show 3 featured loan requests in a top section with info like:
    • Loan amount
    • Interest rate
    • Duration
    • Purpose
    • Risk level
    • Amount funded so far
  • Below the featured section show 8-10 additional loan listings including:
    • Loan amount
    • Interest rate
    • Duration
    • Progress bar showing amount funded so far
  • Selecting a loan listing should link to the listing page with details, comments from the borrower, and an option to fund the loan. (not created for this mockup)

On the right side of the screen:

  • A "Top lenders" section highlighting 2-3 reputable frequent lenders including their username, amount lent, and repayment rate.
  • Under top lenders, show a "Funding methods" section highlighting the top 2 ways lenders add funds like linked bank accounts, wire transfers, mailing a check, etc.

Footer of the screen:

  • Links to "About us", "How to lend", "Verification", "FAQ", and your company name in the center of the footer
  • At the bottom, show a summary of lending stats like "$750,000 lent to date" and "97% repayment rate."

This mockup demonstrates options for lenders to browse loan listings, see the top lenders and funding methods, access more details and resources. Borrowers can also get a sense of listing a loan request and providing the right type of info to get funded. The stats summary adds credibility. The user can understand the peer-to-peer loan experience through this single screen.

#8 - Charitable Donations

Top of the screen:

  • A search bar to search for charities by name, location, cause, etc.
  • Next to the search bar, a filter icon that would open category filters like health, education, environmentalism, community, etc. But don't show the actual filters on this screen.

The main content area:

  • Show 3 featured charities in a top section with:
    • Charity name and logo
    • Mission statement
    • Location
    • Rating
    • Unfunded needs section showing 1-2 of the charity's greatest current needs
    • Donate button
  • Below the featured section show 8 additional charity listings including:
    • Charity name and logo
    • Mission
    • Location
    • Rating
    • Selecting a charity should link to the charity profile with photos, videos, missions, stories, reviews and a donate button. (not created for this mockup)

On the right side of the screen:

  • A "Highest rated charities" section highlighting 2 top-rated local charities according to a third-party nonprofit watchdog. Show charity name, logo, and rating.
  • Below ratings, a "Ways to donate" section highlighting 3 options like donate online, donate by phone, mailed check.

Footer of the screen:

  • Links to "About us", "Our nonprofit partners", "Start a campaign", "Sponsor a charity", and your company name in the center of the footer
  • At the bottom, show the total amount donated through your platform to give users an idea of the impact. For example, "Together, we've donated over $2 million to charities around the world."

This mockup shows options for filtering and discovering new charities, viewing current needs and causes, accessing ratings and reviews. The total donated amount builds additional credibility. The links provide more context on the platform. The user can get a sense of how to research and donate to charities from this single screen.