BENJAMIN WHITTAKER

QuotaQuest

Unlocking users full potential and help them live a more balanced life by developing productive habits.

Project prompt

Create your full-stack app

Prompt: “You'll be building a Node/Express/MongoDB app from the ground up yourself.”

With my new understanding of full CRUD apps and my self-interest in bettering myself, I decided to tackle building a habit tracker.

The project must: Have at least 3 related data entities · Have full CRUD on all models across the Back End · At least 1 Additional Create Update or Delete functionality on models across Front and Back End

Research

Getting inspired

While researching digital habit trackers, I noticed common themes such as overall goal progress, history, and visualizations of progress today vs. days in the past. These themes were often displayed in bright colors and airy designs.

Product definition

Being realistic

Knowing this was my first time building a full-stack app, I tried my best to be realistic on what I could do in a short timeline. Immediately, I knew the product page with add and remove would be my bare minimum because of the project requirements, and anything else would be a stretch goal. Some nice to haves I documented right away in hopes of getting to them in the future.

Wireframes

Starting designs

I started with a basic color pallet, choosing a moody, rich blue and a complimentary salmon color. I laid out the basics of the minimum behavior I hoped to achieve, considered basic patterns of actions users could take, and visuals of the user's progress. I knew as I moved into design, I could expand on behaviors, styles, and future enhancements that could be made in future experiences.