Instructly

Inspiration

   Every time when I want to learn how to use a tool in an application like Adobe Express, I'd get into the                 same habit - Google on Youtube, browse through endless videos, or query GPT's. Then we go back into the application, recall steps as best as I could, get it wrong, and do it all over again. All this constant context-switching not only made me slower but also took away the joy of learning.
    That was a pain point for Instructly - a plug-in that encapsulates the learning within the application itself. No tabs, no distractions. Just hands-on, guided learning where and whenever you need it.

What it does

    Instructly is an interactive tutorial plug-in that lives inside the creative application like Adobe Express. It guides the user to tasks using:

-> Step-by-step instructions -> Visual aids like GIFs -> Voice playback via browser synthesis -> Smart UI that keeps the experience smooth, focused, and intuitive

How we built it

   We built Instructly using:
   @adobe/create-ccweb-add-on to support plug-in 
   HTML, CSS, and JavaScript for UI/UX
   Browser voice synthesis for audio playback
   Modular architecture to introduce new tutorials without complexity

The plug-in is lightweight, responsive, and simplicity-driven. Buttons are context-aware, transitions are smooth, and the layout guides uses effectively without getting in their way.

Challenges we ran into

    -> Voice Consistency
    -> UI Design
    -> Step Navigation Logic
    -> Asset Integration

Accomplishments that we're proud of

   -> Designed and deployed a frictionless in-app tutorial experience which obtained outstanding results from first-time users.
   -> Innovated a multi-sensory learning experience by blending synchronized voice-over and visual feedback to enhance user understanding and confidence.
     -> Crafted a highly integrated, native-looking exerience that empowers users, and the result is reviews like, "I wish every app had this!"
    -> Ensured system performance and stability by designing the solution with zero external dependencies.

What we learned

  -> User-centered design beats feature-packed design
  -> Real-time guidance is far more valuable than passive learning
  -> Even simple UX choices impact user confidence
  -> Tutorials aren't just about instructions- they're about experience

What's next for Instructly

       The most important feature to be implemented is one that programmatically adds non-intrusive highlights, pointers, or animated borders directly over the exact UI elements a user must engage with for associated audio and video directions.

The integration of this functionality is intended to drive a number of top-level goals - Speed User Onboarding, Reduce Cognitive Load, Boost Task Completion Rates, Enhance Accessibility.