Mobile Lab

Week 13: Final Project Documentation, theZone App


This project began with my long lasting passion for organization, tracking, and the search for better work habits.  Most would consider me a very organized person in both my personal and work life. While this is generally a positive aspect of my personality there are consequences that come with this life style.  Often work and organization can overwhelm my world such that my push toward getting a specific task done inhibits my focus on other equally important tasks.  For this reason, I have been hesitant to implement tracking apps in the past.  I am worried that the heightened awareness that comes with tracking apps would amplify the narrow focus I tend to get stuck in?  

In order to explore what I do and do not like about tracking apps that aim to help your work habits I implemented a few into my life over the past semester.  Two of these apps included the Reporter App and Toggl.  The Reporter App is a customizable survey app that randomly asks you questions about your day.  The app stores your answers into simple visualizations and helps you keep a record/journal of random variables throughout your day.  This app does a wonderful job of helping you to note important aspects of your day that may contribute to your work habits.  However, I found the randomization of the surveys to be very distracting when I was working.  Often, when I was in the middle of a work session, a notification would pop up on my phone to tell me that it was time to “report”.  Most of the time I would find myself ignoring the notification in order not to break up my work session.  Then after the work session I would notice the notification again and continued to ignore it since I was not working and the answers would not be applicable.  What I liked about the Reporter app however, was the simple and immediate opportunity to analyze your answers.  Overall I had a much more positive experience with the Toggl app.  I used the Toggl app to track my work sessions throughout the semester.  If I was doing homework for one class I would start and stop a timer at the beginning and end of the work session, respectively.  Now I have a very comprehensive timeline of how much time I spend on each class.  I found this app very easy to use and so quick to implement that it barely creeped into my work sessions.  Still however, I had a weird feeling that tracking my time for each class and noting that timing in the moment was motivating my work in negative ways.  Noting the time ticking by instead of focusing on the task at hand is a common result of time tracking and I often find myself doing just that.  Of course, having the data after the fact has been interesting to analyze and motivates changes in my work habits. 

My aim for this project was to think critically about how a mobile application could benefit or harm your work habits.  Ultimately, I tried to design and build an application that took all of the positive aspects of tracking apps but eliminated the negative effects that they can have on work habits in particular. 


Since I spent time this semester thinking about and exploring apps that aid in work productivity I began this project by spending time researching and validating my conclusions. 

In a wonderful article called “Productivity Isn’t About Time Management. It’s About Attention Management,” Adam Grant highlights some key concepts about productivity that motivated my project.  Grant writes “But after two decades of studying productivity, I’ve become convinced that time management is not a solution - it’s actually part of the problem” (4).  Managing your time makes us focus on the wasted hours in the day.  He continues, “A better option is attention management: Prioritize the people and projects that matter, and it won’t matter how long anything takes… Attention management is the art of focusing on getting things done for the right reasons, in the right places at the right moments” (4).  Thus we must find the times that excite us about our work in order to be motivated enough to get them done.  

With these concepts about work and productivity solidified, I tried to find a metaphor that would help to form a theme for my project.  In his well known book Getting Things Done, David Allen writes about how preparing for a work session is just like an athlete preparing for a game, you have to get into the zone.  I found this to be a good theme for my project.  Rather than focusing on time I want users to focus on the task at hand and fully get in that zone in the moment.  This will motivate productivity and allow users to complete tasks in that chosen space more efficiently. 

Ultimately I decided to make an app that would motivate attention management and would guide users to reflect and change habits over time.  The concept, design and backend of the app was developed for my Quantified Humanist class.  The development of the initial iOS app was completed in Swift for my Mobile Lab class.  The app was split into three sections… the “work zone,” the “reflection zone,” and the “analysis zone.”  Before the work session begins, the user is asked to answer questions that guide them to focus on the work at hand.  After the work session, the app asks questions that help the user to reflect on the completed work session.  Lastly, a visualization component allows the user to analyze their data and compare variables from their work session.  These visualizations will guide the user to make changes to their habits for future work sessions.  For the scope of this project, I decided to focus mainly on input side of the application (aka the “work” and “reflection” zones).  I also build an express API to store the information.  In the future, I would like to focus on the output visualization (aka the “analysis” zone) which will use data from this API.  Some defining questions that guided my project included…

  • What environment/attributes contribute to a productive work session for you?

  • What defines a good work session? (If you complete the goal? If you were productive despite maybe not completing the goal? How do you define success in a work session?)

  • How can tracking your work lead to more productive work sessions?


From my research I developed some key app features that I wanted to include.  It was important for me not to show a timer in the app while the user is working.  Once you initiate a work session in the app, a timer should not distract from the work that needs to be done.  The time stamp information should only be exposed in the output “analysis” zone when the users are guided to adjust their work habits based on the data.  Additionally, it was important for me to include an opportunity for self reflection in the application.  It is important to record reflections immediately after a work session.  Also the act of reflection would guide the user out of the work session and allow them to pull their focus away from the work and into something new. 

With these considerations I developed a series of questions to ask before and after a work session.  The following list represents the final questions.  The name tag for each question shown inside the brackets represents the reference tag used in the API. 

Pre-work session (“work zone”) questions:

1. What project are you working on? [project]

2. What task are you working on? [task]

3. Where are you working? [place]

4. What is your goal for this work session? [goal]

additional variables stored automatically: [location], [weather], [sound level], [timeStart]

Post-work session (“reflection zone”) questions:

1. Did you complete your goal for this work session? [goalCompletion]

2. Are you excited/content with the work you complete this work session? [excitement]

3. Add some tags to this work session [tag]

additional variables stored automatically: [timeEnd]

With this data structure understood, I built an initial design to map out the app flow (Figure 1).  This design guided the first iterations of the mobile application.

Figure 1

Figure 1

From there I began to build out the backend of the application.  In order to store the user data I decided to make a simple basic auth express API using mongodb.  I hosted this API on Heroku.  This API was heavily based on this example.  I added the data structure outlined above and implemented GET, PUT, POST, and DELETE requests into the code.  To see the full API code for this project visit this link.

With the backend complete I was able to focus on the Swift code.  As an initial proof of concept I created a simple application that tested GET, PUT, POST, and DELETE requests from swift to the API.  Figure 2 shows this application running in a simulator.

At this point, I updated the UI and explored micro animations that would help guide the user experience (Figure 3).

Figure 3a

Figure 3a

Then I began to build the general user flow through the app in swift.   Figure 4 shows this basic setup.  This video shows four view controllers the start and stop view controllers and then the pre and post work collection view controllers. 

With this skeleton built, I began to add the input text fields and buttons for the questions and connected the answers to the API.  I also included the background variables.  When a session is started the application notes the location (lat and longitude), the weather (using the dark sky api), and the sound level of the environment (in dB’s).  The application also notes the start and stop time stamps when a work session begins and ends.  Figure 5 shows the state of the application at this state and its connection to the online API. 

At this stage I was ready to conduct user testing (Figure 6). I got some great insight during my user testing.  It was most apparent that there were some issues with the collection view.  Users did not know to stroll to answer the remaining question.  I thus added a “swipe to the right to continue” label on the first screen of each questionnaire section.  I also noticed that the scroll feature was too sensitive.  Users were swiping to the right too aggressively and the view would end up scrolling past the questions and they would have to scroll back.  I solved this problem by implementing paging in the scroll view.  This way it still animates between cells but a swipe will only initiate the next cell of the collection cell.  I also got some great feedback about the colors and the design.  Users said that the screens were too similar.  I decided to use color and branding to more clearly differentiate between the view controllers.  I also used this link to pic colors that were a bit more bright and vibrant yet still simple and not distracting. 

Figure 6

Figure 6

I added some final UI touches to the application keeping in mind the adjustments recommended during user testing.  Figure 7 shows various branding and color exercises I went through at this stage.

Finally, I had a working application.  Figure 8 shows the pre work (“work zone”) section of the app.  Before starting to work, users would open this application and answer this questionnaire.

Figure 9 shows the post work (“reflection zone”) section of the app.  After completing a work session, users would open this section of the application and answers the remaining reflection questions before moving on.

When they complete the post work section and press submit, the resulting data is sent to theZone API (Figure 10). 

Figure 10

Figure 10

Conclusion/Future Steps:

Overall, I am happy with the outcome of this mobile application.  I look at this project as a general proof of concept for a larger project.  There are many directions I could take this project or even just the mobile application in the future.  I would like to test the application at its current state on myself and others for a longer period of time to determine its value and ensure it is successfully addressing the initial goals.  Of course, the most pressing next step of this project would be to add the “analysis” visualization zone to this mobile app/experience.  Collecting habit data is important, but only when you use it to make changes to your habits in the future. 

There are many small features that I thought of along the way that would be improvements to the app in its current form.  It may be valuable to allow users to select from a list of pre and post work questions in their setting to cater the app to themselves.  I would be hesitant to make the questions fully customizable because users may choose questions that do not follows the attention management criteria.  I would also like to further explore background variables that could be taken during a work session.  One that I could see being useful would be to count the number of phone pickups during a work session.  This data could be valuable to the user during the analysis zone.  I also think that more iterations on the design and micro interactions of the app will only improve the user experience. 

Links to the project:

- theZone iOS App Github

- theZone API (note that you will need credentials to view this link)

- theZone backend Github

























Eva Philips