WORK

FullSprint Studio - App Map

Brief:

Full Sprint Studio is a design studio that provides fractional product design for startups. I wrote a comprehensive technical design document for an internal design tool they wanted to build, providing detailed technical diagrams, cost and time estimates, and alternative approaches. Subsequently, I build a prototype that is currently utilized internally by the studio.

App Map offers a way for designers and stakeholders to understand web applications in a visual graph. It places live websites within an interactive canvas, allowing users to visualize and experience complex user flows directly. This streamlines the process of building a mental model of the site and eliminates reliance on static design tools. App Map aims to bridge the gap between design and production, making collaboration and development more efficient for designers and engineers.

Work:

  • Design Document and Planning: I worked closely with the founder and lead designer of Full Sprint Studio to build technical requirements and collaborate on user experiences. I then wrote up technical designs for the features. The design document explores the use cases of the product, examines the technical feasibility of the product, looks at different approaches to engineering the product, and then makes recommendations on best path forward for constructing the product.

  • Interactive Web Frames: Developed an interactive, resizable web frame component to encapsulate and manage iframe content within a web application, facilitating dynamic user interaction. Implemented a top bar for real-time adjustment of frame size and positioning, enhancing interface adaptability and user experience. Integrated accessibility features and responsive controls for keyboard and pointer events, improving usability and interaction efficiency.

  • Infinite Canvas:

  • Saved State accross Sessions: State is saved in the URL so users can share a link with a teammate and all of the frames and websites will carry over to the teammates session.

Toolset:

  • FE: Typescript, Svelte, Tailwind, Skeleton
  • other: Vercel
T S