I was having a conversation about becoming healthier and dieting with a few friends. I found out that one of them had a previously discarded calorie counting app. I had decided to adopt this project and create a mockup.
This is currently a work in progress and I will continue to update it as I work through the project.
Used: Adobe Illustrator, Adobe Photoshop & XD
Starting off, I took some time to look at what I would consider what I would like in a calorie counter app. Firstly, the obvious, have it count how many calories I intake. Secondly, keep track of my progress and when I have reached my limit, over stepped or am under. I would also like the app to allow me to pre plan for a day and to have an estimate before I start eating. Additional trackers I would like would be weight, exercise and water. However, starting off with the first draft. I kept to the core ideas of planning and tracking calories. I additionally added the features to keep track of custom items, custom recipes and ideally a scan. The latter would be more of an optional feature if this becomes made.
After some discussion, it was confirmed this project will be expanded to include a web portion. The good news was I had finished up to the lofi of the mobile version. At this point so taking all the general ideas from the mobile and converted it to a web based design. While I had some minor alterations, I mainly kept the basic idea and the basic layout and feel to this version.
With the lofi, I took the sketch and began to lay out more of the details with Illustrator. As I was laying out some of the pages, I realized that the flow was not fully intact and I would require more screens as well as account for popups. As I was designing the screens, I had decided to have a fixed set of actions and visuals that go along with said actions. An example would be the swipe function for Dashboard, Trends - Monthly and the popup for Plan Monthly. For the design, I didn't want to cluster the user with options and add only the screens necessary to flow between the functions.
CATCHEN DESIGN
