Advanced Mobile App Project 2 Milestone 2

For my second project in Advanced Mobile App Development, I am making an Android app called Flame that functions as a habit-tracker. The app is focused on the idea of “streaks”, and users keep up their streaks by completing their habits or goals on consecutive days to stay motivated.

Interactive Digital Prototype

I decided to use InVision Studio again for this prototype, since I’ve used it in the past and am pretty comfortable with the workflow. For this project, I used the InVision Studio Material UI Kit to speed up the process. I created screens for all of the ones I’d sketched out in my prototype in my last blog post, and generated a few additional screens as I thought more carefully about how the user would click through the app. I also produced a few images in Adobe Illustrator that I’ll use in the app itself and for app icons (see Asset Design section below).

Overall, I’m pretty happy with how the UI turned out and am looking forward to developing this project!

Screen Shot 2020-04-22 at 10.31.56 PM

Screen Shot 2020-04-22 at 10.32.51 PMScreen Shot 2020-04-22 at 10.32.59 PMScreen Shot 2020-04-22 at 10.33.35 PM

Check out the prototype here! If you get stuck, you can click anywhere on the screen and the “clickable” areas will flash blue. Note: some of the actions, like “Deleting” and “Editing” don’t actually have any effect in this prototype.

Logic and Algorithms

Most of the logic for this app should be evident in the prototype, and the main actions that the user will be undertaking (once logged in through Firebase) are:

  1. Adding new goals/habits which will show up on the main “Streaks” screen
  2. Continuing existing streaks by clicking the fire icon on each goal’s detail page
  3. Editing existing streaks (name, category, and color)
  4. Deleting existing streaks if desired

Authentication and data storage for this app will be handled by Firebase and Firebase Authentication. I intend on implementing functionality for logging in with email, Facebook, or Google, which I think should cover most potential users.

For the data storage in my Firebase database, I intend on having a collection called “Users”, in which each document will be a different user. In each user document, I will have a field for the user name and a collection of “habits”, which will include individual documents for each habit. In each habit document, the following information will be recorded:

  • date when the most recent streak for that habit started: Date
  • number of days streak has been active: Integer
  • name of habit: String
  • name of habit category: String
  • color: String

The date, name, name of habit category, streak length and color for each habit will be initialized upon creating a new goal, and the name, category, and color can be updated whenever the user desires. The number of days the streak has been active will be updated/incremented every time the user presses the “continue streak”/fire icon on that habit’s detail page.

I’ll be using RecyclerViews for the main “Streaks” screen, and I’ve done a little bit of research to make sure that I can implement RecyclerViews with different Sections/Headers (sorted by Category in my app), but I’ll explore the details of doing this more intensely once I start the development process.

Content Needed

The content for this app will be user-generated, since users will come up with and maintain their own habit goals. However, the data will be managed with Firebase, so that users can log in with Google/Facebook/Email to access their data and not have to worry about losing anything.

Asset Design

As part of this milestone and creating my digital prototype, I created icons and a few other assets in Adobe Illustrator for the app that I can use in the development phase. Below, you can see the app icon and some flame icons that I’ll use throughout the app.

Screen Shot 2020-04-22 at 10.56.23 PM
Asset design in Adobe Illustrator
Screen Shot 2020-04-22 at 10.54.20 PM
First screen
Screen Shot 2020-04-22 at 10.54.32 PM
Habit detail screen with streak updated
flameAppIcon-01
App Icon

 

 

Leave a comment