My Role
Research, UX/UI
Filmmaking
Timeline
7 weeks
Skill Practice
Interaction Design
Inclusive Ideation
Software
Figma
Adobe After Effects
Naturalizing Figma Presentation.
Today, numerous presentation tools and methods exist. Nevertheless, many individuals encounter challenges in effectively delivering their intended content within the constraints of limited time and structure.
While slide-based presentations are a valuable format for showcasing your work, it's nearly impossible to encapsulate every detail of the extensive effort you've invested.
Gestural User Interface based presentation
FigGes is gestural user interface-based presentation mode in Figma, allowing users to present off their design file by freely navigating to showcase their deliverable’s big picture to small detail.
This project challenges students to design Natural User Interface for platforms to enable hands-free interaction with the environment. Users will learn a gestural language through an instructional app utilizing the device’s camera and LIDAR sensor. The final phase of project involves creating a video documentation using a combination of green-screen film and After Effects -animated Figma prototypes.
Background
Throughout the exercise and research, I categorized daily human behaviors into "Intentional" or "Unintentional" to learn what actions are natural and memorable. Redesigned Figma control interfaces into gesture interfaces. Then user tested to refine and finalized assigning a gesture to each control interface.
Research & Discovery
I designed gesture patterns for all Figma’s basic control UIs and specified each step in user flow diagram.
User Flow Diagram/UI Patterns
Starting with low-fidelity sketches, I refined visual compositions and feedback placement based on user testing insights and Gestalt principles
Wireframing
Jumping into Figma to create mid-fidelity to visualize general flow. Take them to high-fidelity based off the feedback from professor and classmates.
Mid/High-Fidelity
The Style Guide allows you to easily copy and paste pre-designed components, encompassing typefaces, sizes, colors, and basic UI elements, making the rest of the design process smoother.
Style Guide
Prototyping
Low-Fidelity
High-Fidelity
Making functioning prototype to prepare for user testing.
Insights received from the participants highlighted errors in visual feedback and confusion regarding the UI.
There are errors that only a fresh eye can spot. Peer review and user testing are essential in identifying and fixing these issues."
User Testing
Final Wireframe Prototype
Well Designed UI ≠ Good Function
Researched UI Feedback Required.
In this project, I learned the importance of timely feedback in user interface design, discovering that without it, even well-designed interfaces can confuse users.
I aim to refine it further by testing with a wider audience and improving semantic feedback placement. If given more time, I'd enhance the concept by making the projection of Figma design file directly interactive with gestures. Motivated to continue this work, I plan to propose my concept to Figma for potential implementation.