Combocoach

View Live Site

View Live Site

Context

ComboCoach is an iOS app created to make practising boxing combinations easier and more engaging. I designed and developed the full app from scratch, using AI-assisted development to bring the idea to life and create a simple training experience that boxers can easily follow during their workouts.

Role

Designer and Developer

Timeline

1 month

Figma UI Kit

Design Language: Developed a comprehensive style guide within Figma that defined the design language for the UI Kit. This included color palettes, typography, spacing, and iconography, ensuring visual consistency across the platform.

Modularity: The style guide was designed to be modular, allowing for easy updates and expansions. This modularity facilitated the integration of new components and design patterns as the platform evolved.

Reusable Elements: Designed a range of UI components, including buttons, forms, and modals, with a focus on reusability and flexibility. Each component was created with multiple states (default, hover, active) to cover various use cases.

Accessibility: Ensured that all UI components adhered to accessibility standards. Provided guidelines for color contrast, text sizes, and interactive element behaviors to ensure inclusivity.

GenSaaS website

Resource Sharing: The web platform was developed to host and share design assets, including the Figma UI Kit, style guide, and documentation. This central repository ensured that whoever wants to has access to the latest resources.
Design and Layout: Utilized Framer to create a responsive and user-friendly web platform. The design was based on the stablished GenSaaS branding, ensuring consistency between the design system and the web interface.

Documentation and Future Deliverables

Comprehensive Documentation: Documented the UI Kit and design system in Zeroheight, providing clear instructions and best practices for using the components. Included interactive elements to demonstrate component behaviors.
Regular Updates: Established a plan for regular updates to the UI Kit and web platform. This includes adding new components, refining existing elements, and incorporating user feedback to keep the design system relevant.
Feature Enhancements: Planned enhancements to the web platform, such as advanced analytics for tracking usage patterns and additional tools for collaboration and feedback.

Impact and Future Plans

The initial release of GenSaaS included a fully functional UI Kit in Figma and a web platform for sharing resources and tracking progress. This launch provided a solid foundation for improved designer-developer collaboration and set the stage for future development.Our next steps to enhance and extend GenSaaS are focused on:

  • Continuous Improvement: Committed to continuous improvement of the UI Kit and web platform based on user feedback and evolving needs. Regular updates will ensure the system remains effective and valuable.

  • Enhanced Features: Planned future features include advanced integration tools, enhanced documentation capabilities, and additional design resources to support a growing user base.

From idea

ComboCoach started as a simple idea: make practising boxing combinations easier, more structured and more engaging.

To reality

Using UX design and AI-assisted development, I turned the concept into a complete iOS app ready to support real training sessions.

ComboCoach early concept sketchComboCoach finished iOS interface

Create a free website with Framer, the website builder loved by startups, designers and agencies.