Ecosphere
  • Introduction
  • Elevator Pitch
  • Pitch Deck
  • Lean Model Canvas
  • OVERVIEW
    • Mission
    • Problem Statement
    • Ecosphere Prime Solution
    • Benefits
    • Value Proposition
    • Use Cases By Industry
    • Achieving Net Zero
    • Technology Platform
    • "Waze For Weather"
    • Strategic Roadmap
  • Technology
    • Climate Intelligence Network
    • Climate Nodes
      • Prototype
      • Device Mockup
      • Device Setup
      • Node Location Planning
      • Node Explorer
    • Smart Nodes On Hedera
      • Web3
      • Smart Nodes Vs Smart Contracts
    • DIDs and Verifiable Credentials
    • Peer-to Peer Data Sharing
      • How We Use Hedera
      • Hedera Topics
      • Data Tokenization
      • Data Sharing
    • Decentralized Identity
    • Micro Royalties
    • Fractional Ownership
    • Integration
      • Climate Data Workbench
      • API
    • AI Forecasting
  • Functional Flows
    • Registering A New User
    • Registering A New Node
    • Data Collection From Nodes
    • Data Tokenization
    • Data Sharing
    • AI and DLT
    • Marketplace
    • Fractional Ownership
  • Community Product
    • Product Community Fit
    • Product Vision
    • Minimum Viable Product App
    • Wireframe
      • Onboarding
      • Walkthrough Tutorials
      • Wallet Creation
      • Location List
      • Weather Information
      • Location Options and Support
      • Timelapses
      • Animations
      • Weather Station Setup
      • Search and Explore
      • Settings
      • Sharing and Notifications
    • Style Guide
    • Visual Design Elements
    • Usernames Feature
  • Commercial Product
    • Sector Focus
    • Product Market Fit
    • Comprehensive Reporting and Dashboards
    • Climate Data Oracle
    • Go-To-Market
    • Competition
  • Tokenomics
    • Revenue Drivers
    • $PRIME Token
    • Value Capture Mechanism
    • Reward Structure
    • Locale Coverage
    • Nodes For Public Good
  • Community
    • Whitepaper
    • Public Good
    • Joining Ecosphere
    • Governance
    • Awareness
    • Disaster Readiness
    • Early Warning System
    • Socials
  • Project Developer
    • About
    • Team
    • Funding
    • Testnet Accounts
Powered by GitBook
On this page
  1. Community Product
  2. Wireframe

Animations

Custom Scroll Animations: To aid in the recognition of the app's spatial structure, we created custom scroll animations that supported the screen placements (see screens 1–13). This was aimed at solving the problem of a lack of correlation between data and time of capture by creating visual grouping via the app's z-axis. The animations were quickly mocked up using moment-by-moment snapshots to communicate with the engineering team for technical feasibility of future production.

Scrolling Down = Forward in Time: For the weather information screen, the scrolling of stacked "cards" created the visual illusion that they did not exist in the same space on the z-axis (see 1–7). First, the current weather data would scroll "under" the weather photo so the image is always viewable and related to the numeric data via grouping (see 3–4). Second, the forecasted weather will scroll "over" the current weather data, creating the correlation between time and app space (i.e. moving forwards is going into the future and moving backwards is going into the past) (see 5–6). Third, the location information card will scroll over the forecasted data, to visually and spatially create grouping and separation of information (see 7). In addition, when scrolling down, the top and bottom navigation bars will pan out, to provide additional screen space for information consumption. Scrolling up at anytime will bring them back into view (see 1–2).

Scrolling Up = Backward in Time: Scrolling up from the weather information screen will show the refresh module; if they let go at this point, the screen will refresh the weather data (see 8–9). If the user pulls down further, they will see a prompt to continue pulling, and if they pull down more, they will see the "yesterday" module; if they let go at this point, the yesterday timelapse data screen will "fall down" from the top of the screen (see 10–11). If the user pulls down even further, they will see a snippet of a list of past days; if they let go at this point, the timelapse list will fall down from the top (see 12–13). The visual illusion that the timelapse screens are from the top and/or from behind the current weather data emphasizes that the timelapses are from the past.

PreviousTimelapsesNextWeather Station Setup

Last updated 7 months ago