top of page
imageonline-co-noisedimage.png

AeroGuest UI Design Task

CHALLENGE

Create a UI design task for AeroGuest that demonstrates the ability to design intuitive, scalable, and user-friendly interfaces. The assignment included:
Designing a Spotlight Flow Guide to onboard users and building Component Sets (Main Button & Input Field) with full interactivity, responsiveness, and documentation.

SOLUTION

To address the challenge, I focused on creating a seamless and accessible user experience that balances clarity, flexibility, and brand consistency. The solution combined thoughtful interaction design, robust component architecture, and clear documentation for designers and developers.

TIME

6 Hours

TOOLS

Figma

METHODS

UI Design

Component Design
Interactive Prototyping
Design System Design

macbook-mockup-featuring-a-house-environment-21624_edited.png

Spotlight Flow Guide

I’m proud of this AeroGuest work because it shows how small details like guides, dynamics, and accessibility can meaningfully improve the user experience. For me, it was a reminder that thoughtful micro-interactions and clear documentation have a big impact on both users and designers.


The onboarding flow was designed to make users feel in control and at ease. I introduced a welcome modal followed by a step-by-step overlay guide with a pointer. Key considerations:
 

  • Directional Flow: Modals move left-to-right, aligning with Western reading patterns.

  • User Freedom: Every step includes “Back” and “Dismiss” options to avoid forcing users into a rigid flow.

  • Tone: Microcopy encourages users to take their time, reducing cognitive pressure.

  • Accessibility: High-contrast visuals and clear call-to-actions ensure usability across devices.​

Visual Documentation

I provided detailed documentation directly within the Figma file, including usage guidelines, best practices, and component behaviors.

Two interactive component sets were created: Main Button and Text Input Field. Both were designed for scalability, flexibility, and developer handoff.

​

Main Button:

  • Dynamic resizing for different text lengths and icon variations.

  • Boolean properties for quick state toggling (icon, text).

  • Smooth animations:

    • Default → Hover is slower to prevent accidental triggers.

    • Hover → Pressed is faster for snappy responsiveness.

  • Hover State: Lightened for accessibility and contrast.
     

Text Input Field:

  • Includes Error State with clear visual cues.

  • Same boolean flexibility and dynamic resizing as buttons.

  • Documentation: Each variant includes notes and examples for ease of use in real-world UIs.

Frame 37.png
bottom of page