Early-Stage Product UX: App Interface Design

Role:

UX/UI Design

Focus:

Early-Stage UX · Interaction Design · Interface Design

Overview

This project involved designing a mid-fidelity prototype for an animation app geared toward young creators. Tablet-scale mockups were produced to help the founders realize the product concept and communicate user flow to potential funders. The focus was on establishing a clear system structure and UI interactions rather than final visual polish or production-ready detail.

Challenges

  • Translate a multi-mode, timeline-based animation workflow into a clear, structured UI.
  • Consider the needs of the user group, including age and skill level, in the design process.
  • Design an icons-only interface without text labels.
  • Calibrate fidelity so the concept felt real without being mistaken for final UI.

Process

The project began with discovery and alignment around the intended use of the mockups. Team notes and early sketches were reviewed alongside light research into the target user group, including age, interaction patterns, tablet use, skill level, and accessibility needs. A comparative analysis of animation apps was conducted to identify common UI patterns and user workflows.

This early understanding informed the initial structure of the product, shaping a mode-based creative workflow with distinct stages such as creation, editing, and post-production.

The design process moved from grayscale, low-fidelity wireframes used to map key screens and overall user flow into mid-fidelity designs that established primary UI elements, layout zones, and navigation. Between these stages, I produced detailed hand-drawn sketches to reason through interaction logic, navigation, and UI placement. This gave me a clearer mental model before moving into mid-fidelity design.

Early wireframe sketch Early wireframe sketch
Selected sketches and low-fidelity wireframes illustrating early structure, navigation, and interaction flow. (Details limited due to NDA.)

Overall, the design process focused more on visually explaining how the system works rather than on how it looks. Design was intentionally constrained to avoid production-level or final-stage high-fidelity visuals, particularly in areas such as custom UI elements or styles that could imply product branding.

Outcome & Learnings

  • Early-stage UX design prioritizes system clarity and interaction logic over visual refinement.
  • Designing from low- to mid-fidelity can be more challenging than high-fidelity work.
  • Strong UX foundations at the concept stage help teams align faster and reduce risk later in development.

The final outcome was a 9-screen mid-fidelity animation app mockup that clearly communicates complex user interactions and the overall product vision, providing a foundation for future development.