Timely

Inspiration

Designers often find themselves in isolation, tweaking layouts and colors in silence. Without external stimuli or collaborative energy, creativity can stall, and sessions drag into long, frustrating marathons. We wanted to reclaim the joy of spontaneous brainstorming and playful competition, transforming design sprints into shared adventures full of laughter and unexpected sparks.

What it does

Timely gamifies the Adobe Express workflow by turning routine design sessions into timed challenges. In a single click, you launch a 5, 10, or 30-minute sprint with your team. Randomized themes, color palettes, and “power-ups” (textures, shapes, overlays), ensuring every sprint feels fresh. Live timer widgets track each participant’s progress on a built-in leaderboard . When time’s up, the winning design is stamped “Champion,” and teammates vote on their favorites(Future implementation), making creativity collaborative, fast, and fun.

How we built it

Prototyping in Figma: Mapped out the three-panel UI (Timer, Power-Ups, Results) with Spectrum-inspired components. Defined interactions, animations, and responsive layouts.

Add-On Playground: Configured project settings, set up HTML/CSS tabs for panel UI, and wrote Iframe JS to handle timer logic, randomization engine, and inter-panel messaging.

Document Integration: In Document JS, used createPage() to spin up artboards, addShape()/addImage() to apply power-ups, and addText() to render session details and champion stamps.

Challenges we ran into

Ensuring True Randomness: Balancing surprise and usability in the randomization engine required refining probability weights for themes vs. power-ups.

Synchronizing Timer Across Panel & Document: Maintaining an authoritative session clock without user tampering led us to capture timestamps in document metadata.

Performance with Large Assets: Loading high-res textures and overlays initially caused jank; we'll implemented lazy-loading and optimized image dimensions.

What we learned

Design Needs Play: Creativity thrives under constraints but also when infused with game-like rewards and social engagement.

APIs Shape UX: Early knowledge of postMessage(), createPage(), and element APIs allowed us to architect communication and rendering for minimal latency.

User Trust & Integrity: Locking session stamps into uneditable graphics was critical to prevent cheating and maintain fair competition.

Rapid Prototyping Advantage: The Adobe Express Playground empowered us to iterate UI, test Document integration, and validate ideas—all in one environment.

What's next for Timely

Cheat‑Proof Timing: Implement immutable badge layers and server-verified timestamps via metadata to preserve challenge integrity.

Leaderboard & Community Challenges: Launch global monthly sprints with public leaderboards and social‑share cards for top performers.

Premium Power-Up Packs: Introduce Adobe Stock integrations, animated overlays, and custom theme bundles under a subscription model.

Advanced Analytics: Offer personal dashboards with best times, average speeds, and performance tips based on user data.

Built With

• adobe
• figma