UX Flow - tais-yakimovich/nadatrace-app GitHub Wiki

Purpose

Describe how users interact with the app from login to using core features.

Wireframes

wireframes1

homepage signup discover tracking-screen orders cartPage profileSett updatePay updateShipping

App Screen Flow

screen-flow1 screen-flow4 screen-flow2 screen-flow3

Flow

HomePage

  • Entry point for the app.
  • Button: Get Started → Login

Login

  • Tabs for Sign Up and Log In
  • Sign-up fields: email, password, confirm password Buttons:
  • Sign Up → discoverLayout2
  • Log In → discoverLayout2

Discover & Tracking Flow

  • discoverLayout2

  • Sustainability content blocks and engagement CTAs.

  • Buttons:

  • Start Tracking → tracking

  • Learn More (Products) → productPage

  • Bottom nav → routes to tracking and profile

  • tracking

  • Carbon footprint analytics

  • Comparison data and visualizations Bottom navigation bar for:

  • Return to Discover

  • Navigation to Profile, Orders

Product Flow

  • productPage
  • Product details page Button:
  • Return to Discover → discoverLayout2

Profile Management Flow

  • ProfilePage
  • Input fields for users': Name, Address, Birthday
  • Button: Complete Profile → discoverLayout2

ProfileSettings

  • Display user info
  • Menu options:
  • Subscription → MySubscription
  • Orders → order
  • About Us, Privacy Policy, Help
  • Log Out → Login

Subscription Flow

  • MySubscription
  • Current plan display
  • Sections:
  • Change Plan
  • Shipping Information → updateShipping
  • Payment Method → update payment
  • updateShipping
  • Editable shipping fields
  • On save: navigates back to MySubscription

Order History Flow

  • order
  • List of recent orders
  • Order details: ID, status, amount
  • Return via back navigation to ProfileSettings