Goal Tracking Web App

Planning the App

The idea for GoalChamp started when I couldn’t find a good place to track my goals. Existing tools focused on project or task management instead of personal goals. I started by figuring out how I could solve that problem for myself and then interviewed others to see how they tracked their goals. I used those ideas to make some sketches and then wireframed a possible experience in Balsamiq. GoalChamp Wireframes

Logo Design & Branding

I wanted to add a little fun to the interface and designed the logo, icons, and colors with a boxing theme (think Nintendo Punchout). goalchamp logos

App Development

I designed and coded the interface for the app using Photoshop, PHP, & MySQL. To make it all work, I taught myself how to develop a login system and run database queries. I ended up using a card-based interface to give a quick view of current goals which can be rearranged by dragging. GoalChamp App

Tracking Goals on Mobile

GoalChamp is a responsive site that works great on phones, tablets, and desktops. Once you’ve got some goals setup, there is a quick edit option to let you make updates to your progress. Goals include the ability to set a primary task to encourage focusing on the next step. I also added tracking features such as a date countdown and a progress meter. GoalChamp Mobile

Creating the Homepage

Finally, I designed a homepage to show off the product’s features and let people sign up. (The site is currently offline as I’ve been focusing on other projects.) GoalChamp Home
More Projects