COLAB14 - Web App


Goalify is a goal-tracking platform that allows users to record and reflect on long-term growth.

Problem Space

“It is well known that motivation is one of the hardest and yet important factors in life. It’s the difference between success and failure, goal-setting and aimlessness, well-being and unhappiness. Yet, why is it so hard to get motivated – or even if we do, to keep it up?” Professor Carmen Sandi, University of Edinburgh

According to Reliable Plant, only 20% of people set goals for themselves, which means that 80% of people don't set goals at all. And out of the 20% of people who do set goals, only about 30% of people will succeed. Goalify is here to change that narrative .

When you think of setting goals, new year’s resolutions often come to mind. Writing down and declaring these goals is the easy part but it’s even harder to create a roadmap to get there and stick with it with only 8% of people actually reaching their goals. 


Research - Understanding who we are designing for

Using our personal network and the Co.Lab community, we conducted a survey during our 2nd ideation sprint. Through this, we gathered feedback and ideas from more than 10 users

Our goal for this survey was to learn about how users currently set goals and their experiences around achieving and not achieving these goals.

What we learnt from the data

  1. It’s too easy to give up on goals because sometimes motivations are not documented when goals are conceptualized - One user mentioned that “I just have them written down on a sticky note but nothing to motivate me” -24 year old male from New Jersey
  1. Users need to feel a sense of worth for their efforts to stay motivated - One user mentioned that “you stay motivated when you’re having fun and deriving a sense of worth from your goals. When those two things are not happening your consistency will drop.” - 24 year old female from Toronto
  1. Visualization of progress is a good way for users to gain a sense of worth for their efforts towards their goals. This  in turn, contributes to a higher drive to maintain or regain that momentum. When asked “What top 3 things motivate you to get things done?” A user mentioned, “Deadlines, positive impact in my overall life, physically seeing my accomplishments (ex: cleaning a room and seeing the room clean). But, mostly deadlines. ” 29 year old male in Massachusetts

Some insights that guided our approach

img 1.1

Key Takeaway:  Setting mini-goals or milestones helps with generating momentum towards the main goal. By making milestones achievements in their own right, it enables users to physically see their progress as accomplishments and help foster sentiments of self-worth.

Secondary Research - Tying Cognitive Neuroscience  to our approach

Goals are great for setting the direction towards self-betterment but the declaration of goals alone does not provide a roadmap towards how we can reach goals set for ourselves.

The saying; “If you don’t know where you’re going, any road will get you there” describes the difference in motivated behavior between those who have goals and those who do not focus their attention towards a defined outcome (Locke, 1996; Locke & Latham, 1990, 2002).

A quote from a nuero-pyshcologist from the University of Pennsylvania's  “Leveraging Neuroscience for Business Impact” program is quoted in regard to how we can leverage our brains to pursue our goals.

Breaking big goals down into a series of smaller, more achievable ones, helps promote motivational salience each time a milestone is hit, the motivational salience propels behavior toward more of those successes. Another great exercise is working on framing. No one likes being told to do something they don’t want to, but when someone is passionate about achieving a goal for intrinsic reasons, suddenly work becomes almost like play. That kind of positive framing can be trained so that rather than dwell on what they have to do, a person can reframe the task as a goal they want to achieve.

Key Takeaway:  Asking the “why” behind goals can be an opportunity for users  to place intrinsic values and foster an environment for motivational salience to prosper.

Our problem statements 

  1. How might we help individuals visualize their growth over time to increase accountability and reinforce progress towards their goals?
  2. How might we foster an environment where users derive self-worth as they reflect &  work towards their goals?

Choosing a theoretical framework

img 1.2

Psychologically, humans don’t typically enjoy working harder or longer. That’s why we always find ways to automate or optimize certain tedious processes. The phrase “work smarter, not harder” rings true to setting and working towards our goals. A lot of specificity and intention is needed when creating the roadmap to  goals.

Landing on the Solutions

Using psychology and gamification to define our product experience

We wanted Goalify to help users  plan and track their goals; but more importantly to develop and reflect on goals through the use of milestones. Thinking through a psychological lens, a milestone feature will afford users the opportunity to plan out and develop goals created. This provides an opportunity to visualize progressive achievements that help to nurture motivational salience in users as they go through the motions of working towards a goal.

img 1.3

Focusing on the jobs to be done by our users’ when creating a goal, we used scenario based contexts to envision how features we had in mind would benefit our end-users.

Deconstructing goal tracking and visualizing progress

We used cards to provide users with an overview of their general progress towards each goal. Progress was shown through amounts of milestones reached over total milestones users deemed necessary for their goal to be fulfilled or achievable. A progress bar was also provided so information can be understood at a glance.

Two default categories would be provided upon users creating their Goalify account. “Active goals” and “Paused goals.” Sometimes we have to put things in our life on pause and prioritize other things, we didn’t want for the knee-jerk experience from our product to be deleting goals that aren’t currently being pursued. Instead,  we aimed to provide a place to host goals that have been put on pause due to other life events.

img 1.4
img 1.5

The opportunity to commemorate achieved milestones as a reward

img 1.6

When something feels good, we want to have that feeling again. By providing users the opportunity to reflect and commemorate on achieved milestones a reflection feature can help propagate feelings of self-worth and ultimately organic drive which helps with building intrinsic motivation towards achieving the remainder of milestones set for a goal. The reflection/reaction feature is only available upon a user marking a milestone as achieved.

Images also provides visual proof of a User’s progress towards their goal and allows users to have a “physical” view of their achievement which helps with exuding a sense of self-worth

img 1.7

Activity data to promote accountability

Img 1.8

Deciding on adding an activity overview widget to track the user's journey needed some internal convincing from all parties  within the team that it would be beneficial for our users. There were sentiments of it being discouraging mostly due to the fact that the days with no activity recorded would outnumber the days where activity was updated for a goal. While this is true, we thought it would be a useful subject to validate when we conducted usability testing.

For the 3 users that participated in our usability test their general sentiments towards the Activity overview widget was:

  • “Reminds me of github, nice to see at a high level and acts as a subtle motivator” -24 year old male from Kenya
  • “Allows me to keep myself in check, something like a streak would help, like a fire sign to help motivate me if I keep track of my goals for 5 days consistently.” -24 year old male from New York
  • “It tracks my progress towards achieving my goals, I wouldn't say it's motivating, it’s just like a tracker or a documentation of how much I’ve covered. But it’s not motivational that it makes me want to cross out my next goal unless there’s more in depth data about it.” -23 year old female from Nigeria

The value of placing  intrinsic value when declaring goals and accountability

Another thing we wanted to validate through usability testing was the value of user’s adding their motivations when initially creating their goals and how that can benefit their mindset when going through the process of achieving their goals.

When we ask users about their general sentiment towards the motivation widget this is what they had to say

  • “Very helpful to keep that why up front, I would call it “My Why” -24 year old male from Kenya
  • “Serves as a reminder, if I come back to this and I find I am on my 5th milestone and I’ve left it for a while knowing my “Why” helps me get back to the frame of mind I was in when I created the goal” -23 year old female from Nigeria

Lofi & Hifi  Mockups

Initial concept

Adding the finer details to things with the category tab menu.

Added the logo, so users can go back to the home page when switching through different goal pages + some minor changes in UI architecture

A typical goal page, where users can see the motivation they created upon developing their goal. Users can also add images and reflections to commemorate achieving their milestones. Users also have the ability to add or delete milestones and view their activity for each goal with this page.

Iterative Design Learnings

Designs were changed based on some technical feasibility and implementation blockers. One of the first things that changed from our first iterations was how we categorized different goals. Instead of using card badges as a form of categorization we used a menu tab bar above the goal cards so users could section their different goals that way. This provided an easier implementation challenge for our developers and also allowed for flexibility within our product. (For more context view img 1.4)

A learning from this is, sometimes technical constraints can still create an ideal UX for our users as this design trade-off allows  them to categorize their goals how they please. Another is, as a product designer, to show your work early to ensure alignment as to what is possible to build and what is not given a specific time frame.

One thing that we learnt as well was that the words you use in your design matter as much as the visuals. Words can make or break the intuitiveness of user interfaces so content should also be something that should be looked at and revised to make sure the design of the content is easily discernible and evident to users.

Lastly, we got some good insights from our participants as to different use cases they can see the app being used for. One of these use-cases that we didn’t think about was a way for mentors to keep track of their mentees. We thought that was an interesting point from a participant and we believe it goes to show how the way you design something can help users utilize it for different use-cases which is always a plus for any product you create or work on. 

Implementation Details

Technical implementation

Where is it hosted?  Goalify ’s frontend is currently hosted on Vercel at this link:

What is your tech stack?

  • Application Type: Web App
  • IDE: VS Code
  • Front-end: React js, Redux , CSS, Tailwind CSS, Material UI
  • Backend: Ruby, Ruby on Rails, JWT
  • Database: PostgreSQL
  • Tools: GitHub, Netlify, LocalStorage

Technical challenges

What was the hardest part of development?

  1. Transform the high fidelity prototype to actual design 
  2. Merging the conflicts between different branches 
  3. Continuous changing of requirements according to customer need
  4. Design the data to solve scalability issues in the future

Does your app have any scaling issues? We think to  start with postgres but in the future we can transform to mongoDB

What are some key takeaways?

  1. To trust your team that they will do their best, to be accountable for each other
  2. Communication is an important factor to keep progress updated

Future Steps

We really enjoyed working together over the course of this program to build, iterate and grow as a team. We are very proud of what we have been able to accomplish within a short amount of time and wanted to share some of the other features that we would have loved to build if we had more capacity. 

  1. From our ideation session and user research we understood the value behind accountability when it came to goal setting. An idea we were hoping to build out was having the opportunity to share goals with an accountability partner so that they were able to view the user’s progress so far and provide feedback. Similar to Notion, users could share a page which would include the goal, milestones and reflections as well. 
  1. With many apps, personalization can go a long way. This is definitely a space our team would have loved to explore further in terms of allowing our user to change the colors of the dashboard and other personal touches. 
  1. To increase traction to our app, our referral system feature was also brought up where current users would be able to share their goals and there would be a feature that would encourage their peers to join Goalify as well. 

Promo vid:


Product Manager Learnings:

Ravicha Ravinthiran

Co.Lab was just the hands-on experience I needed to apply all the skills I’ve acquired through different experiences through the lens of a product manager. I learned about different types of communication styles , ensuring that all ideas were communicated and the value of documentation.

Designer Learnings:

Ade Obayomi

You can never over-communicate when it comes to the design-dev phases of product development. Also as the designer, it’s my duty to kick-start the process of getting to what the vision of our product could look like; that’s why it’s always useful to show your work often to solicit feedback, gain different perspectives but most importantly for everyone to be aligned on what we are working towards the building.

Developer Learnings:

Bishoy Faheem

It is very useful to discuss details with the designer through the developing process and to prioritize the features, dividing the features into manageable tiny tasks. I was challenged to learn new technologies and apply tricky parts of the UI. It was useful to discuss the obstacles with the other developer and help each other.

Developers Learnings:

Omar Salem


To build a project from conception to completion, I learned how to operate in a cross-functional team. I also gained a greater grasp of everyone's duties within a team. Also, I now understand how to approach issues and develop solutions that best satisfy the requirements of consumers.

Full Team Learning

This program was definitely a rollercoaster and marathon at the same time. Here are some of our key learnings from the program. 

  1. Communicate on progress and blockers often. We also started to introduce agendas into our meetings which allowed us to stay mission-driven as to what our different upcoming and current tasks were allowing for steady progress as we pushed through our different sprints.
  2. Play to your team’s strengths - We were able to play to our interests and strengths which allowed us to go beyond our expectations when it came to creating promo videos and even speed up development
  3. Passion goes a long way - at the beginning of the program, we had trouble finding a problem space that related to all of us. By working together and finding a unique area that resonated with all of us, we were able to accelerate our progress and dedication to the project.