COLAB25

TimeOut!

An application that allows users to easily record and analyze how much time they spend outside.

Product Experience

Problem Statement

The average person needs to increase the amount of time they spend outdoors, because time in nature reinforces healthy habits and improves mental health.

Problem Background  

Various studies show that spending time outside is beneficial to both mental health and physical wellbeing. This includes strenuous efforts like exercise and sports, as well as more leisurely activities like reading a book, socializing at a park, gardening or going for a walk. Unfortunately for the average person, life tends to get in the way of them spending more quality time outdoors. Other times there might just be a complete lack of motivation to leave the comfort of one’s home. Whatever the reason may be, the problem has been getting worse in recent decades.

Research Insights  

Initial Online Survey

We performed an online survey of 40 participants, in which 62% of all participants estimate that they spend less than 240 minutes outside on a weekly basis. When asked to rate their level of satisfaction with the amount of time that they currently spend outdoors, only 48% of participants responded with “Satisfied” or “Very Satisfied.” This means that more than half of our participants felt that there was room for improvement.

For reference, if you set aside at least 30 minutes a day to spend time outdoors, that would add up to 210 minutes at the end of the week. Interestingly enough when we asked our participants what amount of time outside they thought most people should be striving for, the consensus was around 60 minutes a day as the ideal, or 420 minutes for the week.

By making it easy for our users to track time outside, identify trends, and work towards achieving personal goals, our product aims to improve happiness and overall wellbeing.

User Testing Brief

Objectives

To gather data from potential users that helps us identify possible usability issues and gain insights that may help us improve the app and gauge interest.

Methodology

  • Unmoderated user test
  • Participants are USA based Participants who are currently looking to increase the time they spend outside
  • Participants who are looking for a way to track and visualize the time they spend outside.

Tasks

  • Using this prototype, show us how you would set a weekly goal to spend at least 30 minutes a day using the "Goals" tab.
  • From the "Goals" tab navigate to the "Stopwatch" tab and start tracking your time spent outside for the next 15 minutes.
  • Show us how you would manually input your missed time of 30 minutes spent outside from January 11.
  • Check your overall statistics for the past week in the "Statistics" tab.
  • Show us how you would check your overall statistics for the past week in the "Statistics" tab.
  • Explore the preferences within the app and customize a notification preference of your choice.

  • Satisfaction Rating: How would you describe your overall experience with this product?
  • Closing Question: Do you have any final thoughts on the app, particularly regarding its visual design and functionality? Is there anything specific that stood out to you, or any suggestions for improvement? 

Insights

  1. 9 users started the study however only 4 users made it to the end of the study
  2. Users were able to easily access and navigate both the stopwatch and notification flows which resulted in the highest completion rate in the expected path
  3. 2 out of 5 (40%) users described their overall experience with his product as “not bad”
  4. Direct user comment: “I love the minimal look and the color! I would have loved to see the UI with some goals already there so I get a look and feel for what that would be like. Good job!”
  5. The unmoderated study was inconclusive and didn’t result in actionable insights for improvement. 
  6. I would recommend conducting an additional study after the release of the live product

Landing on the Solution

Our mobile application will allow users to record time that they are spending outside. The logged activity data is then automatically analyzed and presented as daily, weekly, and monthly metrics to help our users improve on the time they spend outdoors. With the ultimate goal of helping our users lead more healthy lives.

With this mission in mind, we worked on the following features for our MVP:

  • Stopwatch – simple and easy to use interface to start, stop, & save your outside timer
  • Manual Entry – retroactively log your outside activity if you forgot to run the timer
  • Set a Goal – set & update personalized weekly or monthly goals
  • Analytic Views – track progress with high-level view of weekly and month time spent
  • Notifications – push notifications to remind the user to go outside

We want to foster a community where users can cheer on and challenge one another to want to do better.

Lo-Fi & Hi-Fi Mockups

Link to Lo-Fi Wire Flows: COLAB25 Design

Link to Hi-Fi Figma file: Hi-Fis


Iterative Design Learnings

“After we showcased our prototype to the users, we learned that…”

The unmoderated study was inconclusive and didn’t result in actionable insights for improvement at this moment. I would recommend conducting an additional study after with a live demo or after the release of the product.

Implementation Details

Technical implementation

Where is it hosted? 

Timeout! API is hosted on render at this link  while the mobile app is hosted and deployed via Apple’s services i.e TestFlight to deploy and test beta builds in real world applications.

What is your tech stack?

Frontend: React Native
Backend: Node.js, Express.js, MongoDB

High level journey of a request

Timeout!'s backend was built using the MVC (Model, View, Controller) architecture pattern.

The journey begins with a client making a request to become a user by providing a unique deviceId to the createUser controller. This request involves checking if the deviceId exists for a user. If it does, the user’s details are simply returned. If it is not found in the database, a new user is created, and the user’s details are then returned.

Among the fields of the user’s details is the id generated as soon as a user is created. This id is referred to as the userId. With this userId, a user can perform all CRUD functionalities made available to the user.

Moving to the time log creation process in the TimeLog controller, the createTimeLog controller verifies that the provided date is not in the future. A new time log is then created, and the user's goal progress is updated through the updateGoalProgress helper function.

The user’s goal progress can only be updated if the user has a goal created. If not, this would not be implemented at the time. After creating a goal through the createGoal controller, the helper function runs with each creation and update of a time log.

After multiple time logs have been created, the user can view their statistics in the form of a line graph. For a weekly representation of the timelog, a request is made to the getWeeklyStats controller, which retrieves weekly statistics by fetching time logs for the current and previous week, grouping them by day. Statistical data can be adjusted to view former week stats with their corresponding previous week statistics.

In addition to all this, there are routes and controllers for getting the daily average time spent by a user and also streak implementation to get the number of consecutive days the user has input time log.

Technical challenges

What was the hardest part of development?

Backend: As someone who has always used authentication in building every API, the most challenging aspect for me was figuring out how to create users and manage all their data without authentication. However, once I crossed that bridge, I realized it was much simpler than I had initially thought.

FrontEnd: Most of my FrontEnd journey has been web development so taking on the responsibility of FrontEnd developer and learning a framework that I was not familiar with was challenging. As well as learning backend implementation, but after help from my fellow developer the whole process was as seamless as it could have been.

What are some key takeaways?

Hikmah: My key takeaway is that software development is a step-by-step process. Sometimes you have the whole picture of how it would be; sometimes all you have are fragments. Nonetheless, it’s good to have a great basic structure of what you want to build. This way, even as things advance and changes are made in various places, you still have a good foundation to work with.

Mohammed: Some key takeaways is that learning is more a part of the process than actually developing and building. Working as a team can allow you to be more successful in the long run and can open roads of understanding as opposed to doing things on your own. 

Future Steps

Our team has the goal of getting our mobile application officially published into the iOS App Store and the Google Play Store. 

Learnings

Product Manager Learnings:

Juan Munoz

I got to see first-hand what each person within a cross-functional product team does. I learned the most about the role of the Designer. As a PM it was great to learn that product teams have Designers that are focused on aesthetics and creating a fantastic user experience!

Designer Learnings:

Oluwaseyi Aladeselu

Co.Lab was an interesting learning experience. From collaboration to reinforcing the need for being prepared and critical thinking beyond what is provided. 

Developer Learnings:

Hikmah Yousuph

For me, it was building a project from scratch with a team for the first time. I also gained in-depth knowledge of the product manager role and how it impacts the entire team.

Developers Learnings:

Mohammed Naeem

&

I learned what it means to be a member of a cross-functional team and it really opened my eyes to how imperative communication and collaborating with different members of a team really is.

Full Team Learning

The importance of effective communication for a successful team project.