Skip to content

Instantly share code, notes, and snippets.

@ruslan-byondxr

ruslan-byondxr/gist:6ade448ffc5acb27ab9e25228610b0d5

Last active April 10, 2023 08:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ruslan-byondxr/6ade448ffc5acb27ab9e25228610b0d5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ruslan-byondxr/6ade448ffc5acb27ab9e25228610b0d5 to your computer and use it in GitHub Desktop.
Download ZIP
user flow with pseudo code
Raw
gistfile1.md

Describe the UX, UI, and Flow using pseudocode

Plugin Name: ExamplePlugin

Purpose:

  • The ExamplePlugin is designed to provide additional functionality to the app by allowing users to customize their profile picture.

User Flow

  1. User opens the app.
  2. User navigates to the "Profile" section.
  3. User selects the "Change Profile Picture" option.
  4. Plugin prompts user to choose a source for the new profile picture (e.g., camera, gallery).
  5. If user selects "Camera" or "Gallery" as the source:
    • Plugin requests necessary permissions from the user.
    • If permissions are granted:
      • Plugin displays the selected source for image selection.
      • User selects an image from the source.
      • Plugin displays a preview of the selected image with options to crop, rotate, or apply filters.
      • User can adjust the image as desired.
      • User clicks on "Save" to confirm the changes.
      • Plugin saves the new profile picture and updates the app's UI accordingly.
      • Plugin provides a success notification to the user.
    • If permissions are not granted:
      • Plugin displays an error message asking the user to grant the required permissions.
  6. If user selects "Cancel" or closes the source selection screen:
    • Plugin cancels the profile picture change process and returns to the app's main interface.

UI Elements

  • "Change Profile Picture" button in the "Profile" section of the app.
  • Source selection screen with options to choose from "Camera" or "Gallery".
  • Image preview screen with options to crop, rotate, and apply filters.
  • Confirmation screen with options to save, discard, or undo changes.
  • Success notification for successful profile picture update.
  • Error message for permission denial.

UX Considerations

  • Provide clear instructions and feedback to guide the user throughout the process.
  • Ensure that the plugin's UI elements are visually consistent with the app's UI for a seamless user experience.
  • Handle errors and edge cases gracefully, such as when the user denies permission or closes the source selection screen.
  • Allow users to easily cancel or exit the profile picture change process without making changes.
  • Provide notifications or feedback to confirm successful profile picture updates and build user trust in the plugin's functionality.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment