Gulpz - A Water Tracker App

"Gulpz" lets users log their daily water intake using their gulp sizes as the measurement. "Gulpz" was built in Xcode, using the Swift language. The app is available on the App Store to try.

Umbrawler Header Image

What is this?

Gulpz was a 10-week class project while I was at Drexel University focusing on building a native iOS app using Xcode and Swift Language.

No items found.


Week 1: Brainstorming, Sketches, UI Inspirations.

The app has 2 parts: Onboarding and the Main App. Onboarding welcomes new users and personalizes the experience with name, gulp sizes, measuring unit, and the daily goal. The Main App has the Water Ring, 2 add-gulp buttons (one for small gulp (sipping), one for large gulp).

Apple Watch - Close Your Rings - Apple
The Apple Activity Ring was one of the inspirations for this app

Early design ideas

Week 2 and Week 3: Wireframes, low and high-fidelity mockup, app icon

I brought the sketches I have into Sketch App and started designing the wireframes. I followed the Apple Human Interface Guidelines by using their default components and tab bar design.

App Icon Design: 

The Water Tracking Ring:

High-fidelity mockup:

Since this was my first iOS build, I wanted to keep the UI simple and not overcomplicate the design with custom font and styled buttons so I followed Apple’s Human Interface Guidelines.

Week 4 and Week 5: Xcode Development Phase 1

In Week 4 and 5, I was excited to bring my design to Xcode and start coding. I prepared the app’s configuration information with the product name, organization identifier, managed files in the Main Window.

Auto Constraints:

Auto constraints dynamically calculate the size of the iPhone screen and position, allowing me to build the app’s interface in the Interface Builder. 


SwiftUI let me see an interactive preview of the user interface while developing my app. 

Week 6: The Tracking Ring’s Animation

There was a software called PaintCode that helped me convert my Tracking Ring design into Swift language and saved me a lot of time. I brought the ring design from Sketch to PaintCode and set the variables for the animation then connect the ring with code using iboutlets. 

Week 7 and Week 8: Xcode Development Phase 2:

I was mostly working on the Settings where users have the ability to change their name, reset their measurement unit (ml or oz), set a new daily goal, and change their gulp sizes. 

Week 9: Debugging:

In Week 9, I had issues with the Ring’s animation where it did not animate properly with the gulp input.

Week 10: App Store Launch:

With the Apple Developer Account, I was able to submit the app to the App Store Connect for Apple to review, making sure the app meets Apple's strict standards. After a few days, the app was finally approved and available on the App Store for everyone to use. Scan the QR Code below with your iPhone to try it out!

No items found.

No items found.

No items found.

No items found.

Other projects