Interactive Coffee Tutorial App

This browser-based app teaches users how to brew coffee using manual methods through simple, clear walkthroughs. Built with Flask and vanilla JavaScript, the app was designed to prioritize usability and clean instructional flow, offering users an approachable way to learn different brewing techniques without distractions. The project became an exercise in lightweight front-end scripting, progressive content design, and iterative UI refinement, all within a minimal tech stack.

Goals

• Provide users with clear, interactive tutorials for different coffee brewing methods.

• Improve UI behavior so that the interface naturally guides the user step by step through each brewing method.

• Build a fully functional Flask app with dynamic client-side behavior, without relying on front-end frameworks.

• Improve pacing and usability through progressive disclosure and simplified user interactions.

​

Specs

• Back End: Flask (Python), simple route handling, HTML template rendering

• Front End: JavaScript (vanilla), DOM manipulation for dynamic button states and timers

• UI Design: Responsive layout, progressive content reveal, semantic HTML for accessibility

• DOM Manipulation: Implemented dynamic element states (e.g., disabling/enabling buttons) through JavaScript event listeners

• Instructional Design: Structured content for readability and gradual progression through each brew method

​

Design process

• Started with a basic static tutorial and mapped out each brewing method into a modular, reusable HTML structure.

• Refined button behaviors to prevent premature navigation and enforce a more linear instructional flow.

• Reworked layout and spacing to better support mobile use, including single-column formats and easy tap targets.

• Conducted informal testing to identify and resolve friction points in content hierarchy and interaction pacing.

• Iterated on copy, layout, and structure to maintain clarity while reducing user effort.

​

Challenges

• Flask by itself doesn’t manage dynamic UI states, so everything had to be handled with careful JavaScript logic.

• Managing button and link states in pure HTML/CSS required careful scripting since anchor tags don't support the disabled attribute.

• Keeping user experience clean and functional without relying on a JS framework meant building all behavior from scratch.

• Designing for clarity across screen sizes required constant layout tweaks and content restructuring.

• Balancing depth and simplicity in instructional content to keep users engaged without overwhelming them.

​

Outcomes

• Delivered a clean, focused educational app that runs smoothly across devices and browsers.

• Developed a reusable structure for presenting additional brew methods with minimal code overhead.

• Improved UI behavior and pacing through thoughtful scripting and visual adjustments.

• Demonstrated the ability to enhance user experience within a constrained, minimal-stack environment.

​

Potential next steps

• Expand to include more brewing methods and deeper educational content for each.

• Refactor UI code into modular components for easier updates and scaling.

• Consider implementing optional interactive features like timers, brew logs, or ratio calculators.

• Explore migrating to a framework like React if content becomes more dynamic or user-driven.