Fomuli — Learn Excel by Doing
An interactive Excel learning platform built around cell-level practice, spaced review, community question sets and live multiplayer rooms.
The product tension
Fomuli replaces long passive lessons with short spreadsheet interactions. Learners select cells, assemble formulas, diagnose errors and revisit missed questions at spaced intervals, while community sets and live rooms turn the same content model into a social learning system.
Designed and built the learning loop, interactive question system, bilingual product UI, creator flows and Appwrite-backed realtime room architecture.
Context
Fomuli replaces long passive lessons with short spreadsheet interactions. Learners select cells, assemble formulas, diagnose errors and revisit missed questions at spaced intervals, while community sets and live rooms turn the same content model into a social learning system.
Fomuli is presented as a personal project, so the case study separates verified implementation decisions from illustrative product framing.
Problem
The central product problem is practice-first Excel learning, formula interaction, spaced review, creator-owned question sets and secure realtime multiplayer.
The interface needs to carry enough detail for informed action without turning every decision into visual noise.
Goals
Make the primary user journey legible within seconds, preserve a distinct product identity and ensure that motion improves orientation.
Keep the system resilient across keyboard use, touch devices, reduced-motion preferences and realistic content lengths.
Constraints
No unverified client constraints or performance metrics are claimed. The concept therefore uses explicit representative constraints: mobile-first behavior, accessible interaction, recoverable states and a maintainable frontend architecture.
Decorative complexity is rejected whenever it competes with product understanding.
Responsibility
The represented role is Product Designer and Full-stack Developer.
Designed and built the learning loop, interactive question system, bilingual product UI, creator flows and Appwrite-backed realtime room architecture.
Discovery
The discovery pass maps the core task, interruption points, information users need before acting and the states that can undermine trust.
For this direction, special attention is placed on practice-first excel learning, formula interaction, spaced review, creator-owned question sets and secure realtime multiplayer.
Information architecture
Content is organized from orientation to action, then from action to feedback. Secondary detail remains available without competing with the next meaningful step.
Routes and content blocks are data-driven so the case-study system can grow without hardcoding a component for every slug.
UX decisions
Persistent context is used only where losing position would create real friction. Hover is treated as enhancement, never the only path to content.
Status, progress and errors combine language, structure and visual treatment instead of relying on color alone.
Visual direction
The visual identity uses #a7ff2f as a focused project signal rather than a page-wide neon effect.
Editorial scale, technical annotations and custom SVG composition create character without imitating a specific award site.
Design system
Semantic color, fluid type, spacing and motion tokens keep the interface coherent while allowing each project to own a distinct visual field.
Corners and surfaces are deliberately limited; hierarchy is carried primarily through type, line, spacing and composition.
Motion system
GSAP timelines handle sequences, ScrollTrigger handles viewport-linked transitions and CSS handles small state feedback.
Every major movement defines its trigger, final state, cleanup behavior, mobile adaptation and reduced-motion fallback.
Technical implementation
The proposed stack is React, TypeScript, Vite, Appwrite, HyperFormula.
Server-rendered content stays outside client components where possible. Animation registration is centralized and selectors are scoped to component roots.
Responsive strategy
Mobile is recomposed rather than scaled down. Pinned or hover-heavy desktop behavior becomes direct vertical content, with visible media and practical touch targets.
Fluid typography and spacing reduce breakpoint jumps while hard limits prevent headings from overflowing at either extreme.
Accessibility
Semantic headings, landmarks, keyboard navigation, visible focus, readable contrast and descriptive controls are part of the base implementation.
Decorative SVG is hidden from assistive technology; informative diagrams receive names and descriptions.
Performance
Animation prioritizes transforms, opacity and SVG stroke progress. Continuous effects use limited layers and are disabled or simplified when user or device conditions call for it.
Media and experiments remain isolated from routes that do not need them.
Challenges
The main challenge is balancing a memorable visual identity with a product experience that remains immediately understandable.
Another challenge is preserving motion quality without creating lifecycle leaks, double animation loops or fragile mobile behavior.
Solutions
The solution is a small set of recurring motifs, a block-based content model and a motion architecture built around scoped contexts.
A single Lenis instance is synchronized with the GSAP ticker, while reduced motion returns scrolling and content to native behavior.
Outcome
The qualitative outcome is a coherent concept that makes its product intent visible through hierarchy, interaction and state design.
Verified metrics can be added later without restructuring the case study; until then, the interface does not invent growth or conversion claims.
Lessons learned
A strong visual concept becomes more convincing when its motion, content model and failure states share the same logic.
Restraint is a technical and design skill: fewer active motifs make each interaction more legible.
Next steps
Replace structured placeholders with verified project dates, contributors, links and outcomes.
Run device testing with production media, profile performance on representative hardware and validate the experience with real users.
Product modules
- 0110 structured Excel lessons
- 02125 practice questions
- 0312 interaction formats
- 04Spaced review queue
- 05Creator Studio & community sets
- 06Realtime multiplayer rooms
“Read less. Practise immediately. Let the difficult questions come back at the right time.”
PDF Forge
Open case study