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.
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).
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:
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!
.svg)