Transform Property App Video to Wireflow Storyboard

Job Title: UI/UX Specialist to Convert App Video into High-Fidelity Wireflow (Storyboard)
Project Description

I am seeking a detail-oriented and experienced UI/UX specialist to analyze a screen recording of a property maintenance app and transform it into a high-fidelity wireflow (storyboard).

The goal is to create a structured visual document that maps every screen, interaction state, and decision point of the user journey. Note: "Damp and Mould" is just one example; similar flows for other maintenance issues will also be needed.

Scope of Work

You will be provided with a screen recording of the app. Based on this video, your responsibilities will include:

1. Screen Extraction & Organization

Capture high-quality, static frames of every main screen.

Ensure consistency and clarity across all captures.

Organize the screens logically to reflect the user’s flow.

2. Interaction & State Mapping

Identify all interactive elements (dropdowns, input fields, modals, buttons, etc.).

Capture each interaction state, such as dropdown expansions, keyboard overlays, and popups.

Ensure no state is overlooked.

3. Logical Flow Representation

Map out the entire user journey, from reporting a maintenance issue (e.g., "Damp and Mould") through inspection, updates, and final closure.

Highlight key decision points (logic gates) and alternate paths the user might take.

4. Wireflow/Storyboard Creation

Create a grid-based layout (using Adobe Illustrator) that visually arranges the user flow.

Include arrows, connectors, and annotations showing the sequence of screens and user actions.

Maintain a professional, structured presentation that mirrors best practices in UX documentation.

Specific Screens & Interaction States to Capture

From the video, please ensure these key stages are included (though note that “Damp and Mould” is an example; other maintenance issues will follow the same structure):

Initial View: Ticket details screen showing a status like "Inspection Completed."

Edit State: Screen after clicking the "Edit" button with fields ready to modify.

Dropdown Interaction: "Select Status" menu showing options like "Work in Progress," "Job Scheduled."

Logic Gate: A warning modal (e.g., "No Team Member Added") with “Proceed” and “Cancel” buttons.

Transition: A loading spinner after the user hits “Submit.”

Final State: Updated ticket showing "Status: Completed," "Ticket Closed," and a green "Reopen" button.

Deliverables

A Figma or Adobe Illustrator file (Illustrator required)

Organized layers and screens with clear naming conventions

Grid-based wireflow layout that shows the logical flow step-by-step

Annotated actions, system responses, and decision points

Ideal Candidate

Strong background in UI/UX design and product documentation

Expertise in Adobe Illustrator (required) or Figma

Ability to visualize user flows, logic paths, and interaction sequences

Meticulous attention to detail and pixel-perfect design skills

Experience creating wireflows or UX documentation for apps or digital products

Bonus Skills

Experience with mobile applications