“Gulpz” is a native iOS app developed over a 10-week project. Built using Xcode and the Swift programming language, the app helps users track their daily water intake based on customizable gulp sizes.
Project Overview
Gulpz is an intuitive iOS app designed to make it easy and enjoyable for users to track their daily water intake through personalized gulp sizes. Developed during a focused 10-week sprint, the app was built with Swift, UIKit, Core Animation, and Auto Layout in Xcode.
The app includes two key features:
Onboarding Flow: Guides users through an engaging experience to set personalized hydration goals based on their preferences and individual physical factors.
Main Interface: Features an interactive, animated Water Tracking Ring created using CAShapeLayer and Core Animation. Users can easily log their water intake by tapping buttons for small or large gulps, which triggers engaging, real-time animations.
The primary goal of Gulpz was to provide users with a visually appealing and effortless hydration-tracking experience. By adhering closely to Apple's Human Interface Guidelines (HIG), the app ensures smooth, user-friendly interactions with an adaptive and attractive interface.
Development Timeline & Technical Details (September 2018)
Week 1: Ideation & Planning
Conducted market research and analyzed competitors to identify opportunities in existing hydration apps.
Created initial wireframes using Sketch and developed user stories aligned with Agile methodologies.
Defined essential app features: personalized water tracking, animated user interface, and interactive logging.
Weeks 2-3: UI/UX Design & Prototyping
Developed low-fidelity wireframes, progressing to high-fidelity prototypes in Sketch.
Ensured visual consistency and accessibility by using SF Symbols and Dynamic Type.
Utilized Auto Layout and Stack Views for a responsive, scalable interface.
Integrated Color Assets and Adaptive UI to support both Light and Dark modes.
Weeks 4-5: Core Development in Xcode
Set up the project using Xcode 14, focusing on UIKit for precise UI customization.
Leveraged CAShapeLayer and Core Graphics to create the dynamic Water Tracking Ring.
Implemented Color Caching through a private struct to enhance UI rendering efficiency.
Built custom button interactions by subclassing UIControl.
Week 6: Advanced Animation & State Management
Created a custom water ring animation using PaintCode-generated Swift code.
Integrated Core Animation (CAAnimation) for smooth visualization of hydration progress.
Optimized gesture recognition using UIGestureRecognizer for responsive tap interactions.
Implemented event-driven UI updates through NSNotificationCenter to ensure seamless state management.
Developed a fully customizable Settings Page enabling users to:
Update profile details.
Dynamically adjust hydration goals.
Switch between milliliters and ounces.
Modify gulp sizes using UserDefaults and Core Data.
Added haptic feedback (UIImpactFeedbackGenerator) for improved user engagement and interactivity.
Week 9: Debugging & Performance Optimization
Conducted thorough unit testing with XCTest Framework to validate hydration goal calculations.
Utilized Instruments tools (Time Profiler, Memory Graph Debugger) for performance optimization and memory leak reduction.
Fixed animation bugs causing unintended UI lag by refining run loop execution.
Debugged and refined Auto Layout constraints for smooth rendering across all iPhone models.
Week 10: App Store Submission & Launch
Prepared App Store assets (App Previews, Screenshots, Metadata) according to Apple’s guidelines.
Generated App Store Connect profile and configured provisioning profiles using Xcode Organizer.
Successfully navigated Apple’s App Review Process and launched Gulpz on the App Store.
Design & UX Considerations
The design philosophy behind Gulpz was inspired by the Apple Activity Rings, ensuring familiarity and ease of use. The visually engaging Water Tracking Ring motivates users to achieve their daily hydration goals. Additional UX enhancements included:
Haptic feedback for physical interaction confirmation.
Dark Mode compatibility via Color Assets and Semantic Colors.
Accessibility improvements, including VoiceOver support.
Background task execution (BGTaskScheduler) for timely hydration reminders and notifications.
Performance optimization using cached color structures.
Key Takeaways & Lessons Learned
Mastery of UIKit’s animation and rendering pipeline was essential for smooth UI transitions.
Leveraging Core Data and UserDefaults enabled efficient persistent storage and user customization.
Performance optimization through Instruments and memory debugging contributed significantly to app stability.
Adhering to Apple’s best practices and leveraging Xcode’s powerful development tools enabled Gulpz to deliver a polished, engaging, and intuitive hydration-tracking experience.
.svg)