ToneVault - Guitar Gear Rig Tracking App

A mobile app for creating, sorting, and viewing guitar gear setups, designed in Figma and developed in FlutterFlow.

Role: UX Designer and Developer

Tools: Figma, FlutterFlow, Firebase

Timeline: March–May 2025

Deliverables: Interactive prototype, functional FlutterFlow app

The Challenge

Guitarists often struggle to keep track of their gear setups or share them easily with others. Existing platforms lacked a streamlined, visually appealing way to document rigs and discover new equipment combinations. ToneVault aimed to fill that gap by making it simple to create and view digital representations of guitar rigs.

Goals

  • Enable users to easily create and save custom gear setups

  • Provide a visually engaging way to showcase rigs with background images and descriptions

  • Ensure a smooth experience from prototype to development using Figma and FlutterFlow

Design Process

Step 1 – Research & Insights

Explored how musicians document and share their rigs today, identifying a need for both visual appeal and organizational clarity.

Step 2 – Wireframing & Prototyping

Created low- and high-fidelity wireframes in Figma, focusing on an intuitive flow for adding gear, editing rigs, and browsing one’s setups.

Step 3 – Development in FlutterFlow

Brought the prototype to life by building the app in FlutterFlow, leveraging Firebase for data storage. Designed the UI to closely mirror the Figma mockups for a consistent experience.

Step 4 – Iteration & Testing

Tested functionality across different devices, refining usability and visual layout to ensure smooth navigation and gear management.

Step 5 – Demo & Peer Review

Presented and demoed the full app to peers for review. Incorporated their feedback to make final refinements.

Key Screens

Login-portrait.png
Rig Page-portrait.png
Rig Items Page-portrait.png
Add Gear-portrait.png
Create Rig Page-portrait.png
Edit Profile-portrait.png

Outcomes

  • Delivered a functional FlutterFlow app that allows guitarists to create, save, and explore their rigs.

  • Achieved visual and functional consistency between prototype and final build.

  • Positive feedback from initial users highlighted ease of use and the appeal of visually rich rig pages.

What I Learned

Working on ToneHub provided hands-on experience with taking a project from concept to a functioning product. The process highlighted the importance of maintaining consistency between design and development, particularly when transitioning from Figma prototypes to FlutterFlow builds. As development progressed, minor adjustments-mainly in navigation—were introduced to better align with FlutterFlow’s capabilities and to improve overall usability. This reinforced the need for flexibility in the design-to-development workflow. The project also deepened understanding of how no-code tools can accelerate iteration while still requiring careful planning to ensure scalability and performance.