General idea / concept
On a sunny afternoon march 2017 we felt the urgent need for an interval timer app. Research showed multiple suggestions for HIIT or Meditation. As developers we thought we could make a more standard app that fits our needs and is more generic in use. The idea was born and a concept was made. A mobile app where you can create and manage your own interval timers, with freedom of color, sound, repeat sets etc. read more on the INTTIME app website
Go overboard, look at this idea from all angels, think outside the box.
What is the purpose of the App what problem does it solve.
Make sure to focus on the minimal viable solution, keep it simple (KISS).
Team / Project
Meet the team that made INTTIME app
Pettrie de Bondt
Pettrie de Bondt (Owner / Developer TryFirst)
TryFirst is a creative development company. The team breathes code but also has a good feel for the clients whishes. Together they create all kinds of development projects. a.o. Websites, Intranet/Extranet, Mobile applications etc.
Pettrie studied coding at the HU in the Netherlands and has since been (self)employed in the IT world. Making programms, applications and games in all sorts of languages and is an allround developer and architect.
LinkedIn - TryFirst
Martijn de Bondt (Partner / Designer Bondt & Blue)
Bondt & Blue is an advertising agency, mostly oriented towards creating and implementing concepts. We love to figure out an unique strategie for our clients. The synergy continues if we also get the change to implement our common ideas onto a thriving business.
LinkedIn - Bondt en Blue
Martijn de Bondt
Because we are working on this app with a small team (2 people) we can keep communication short and simple. But to keep the project on track we handled this project as a scrum project.
We started with a product description and wish list for the first version (Backlog).
Daily small sprints lead to completion of the weekly sprint.
Every week we met and reviewed the last weeks sprint and planned the next meeting and goals in a new backlog.
Keywords for this project are:
Agile / Scrum
Keep It Simple Stupid (KISS)
Minimal viable product (MVP)
Fail Fast, Fail Often
Communication tools like #slack
Even when working with a small team we are often not working at the same office / desk.
To keep communication quick to meet our sprints we use a variety of communication tools.
Trello is used as scrum board to maintain the sprint flows and let the developers know what to do and when.
HockeyApp is implemented in the INTTIME app and connected with Trello to quickly sort out the problems with users who test the mobile app.
Wonderful integration of several tools that connect to each other to create a good communication between developers and (beta)testers.
Trello used as scrum board
HockeyApp feedback in Trello
Look & Feel
It all starts with some loose sketches of the general app idea.
Quick placement of elements on the fictional screen, interval loop examples to clarify what we want...
General idea of the timer circle with repeat loops in them. Placement of the various items on screen...
Quick logo design and technical idea of table setup for data...
Properly naming an app is not an easy task. What is the purpose of the app what problem does it solve and what name should it bare to convey those ideas.
What is the purpose of this app:
- Create interval timers
- Ease of use of those timers
- Different timer setup for different needs / individuals
What problem does it solve:
- Quick and easy app for creating interval timers
- Generic app that accomodates more than one type of interval timer
SO. Interval .... Timer ...
It quickly became int-time ~ inttime ~ INTTIME
In the logo we wanted to show our unique (for this app) circular timer display and name. The plus signs are a reminder of the ease of adding new interval timers or ongoing interval (adding time) to your interval set.
The color blue is a soothing general color so the app is not specifically associated with Sports or Meditation but can serve a more generic purpose.
Various stages of the logo design
Sketch screen mockup
After sketching the idea and preliminary layout with pen and paper and with a logo and color scheme ready to be implemented we started working out those ideas in Sketch.
Sketch is an easy to use program with building blocks like the default iOS blocks to quickly generate a look and feel of the app with native design elements. These elements can be altered in form and color but are a good starting point of what we are trying to achieve.
We imported the designed elements and color scheme and started the layout of the different screens.
Earlier we decided to primarily use native building blocks. The development tool we think of using makes use of a hamburger style navigation menu. This menu can be used on webpages and all different platforms (iOS, Windows and Android).
Our main focus is the iOS platform, but it is good practice to keep other platforms in mind without having to alter a lot of code or duplicate code just to facilitate an other smartphone platform.
The Menu screen also shows the different options which navigate to other parts of the app.
Setting the right look & feel in Sketch is quick and Easy and can be altered when needed. Early stages of app building.
Sketch screen design
Invision app for Sketch
Invision app sequence
To get a good feel of the app - before making any code - we would like to see how the user flow would workout based on our sketch mockup. We used invision app for sketch to make the connections and visualise the flow.
From there we could test the flow via the invasion app on our mobile phone. invision app sequence and progress during development, what are the right steps to follow and what needs some more fine-tuning.
Based on the imported screenshot from sketch we could test and walk through the first app screens without any coding.
Coding platform & why
We worked with a lot of different development platforms, Flash, Shiva, Corona, Appcelerator and Xcode. All good platforms but we wanted to build the app for multi-platforms, with a quick result on a 'new' platform.
Angular in Microsoft Visual Studio Code
On top of Angular we used IONIC for the development of the App. IONIC is a great mobile framework combining the power of Angular and Cordova. Ideal for Mobile development for either iOS, Windows and Android.
As code editor we already made use of Microsoft Visual code, the new fast, platform in-dependant programming editor.
For file sharing, versioning and general source control we use SourceTree, the GUI tool for structured robust use of source control environments GitHub and GitLab. We use GitLab for this project.
XCode the Apple development environment tool for its simulator and necessary profile and app adjustments.
HockeyApp, handy and platform in-dependant distribution tool. It allows for fast delivery of the App for testing to our own devices and to the devices of our Beta testers. The goal of testing is to get feedback, and this is also great with Hockey App, you get nice feedback with screenshots directly from the test devices.
In Xcode we can easily add the LaunchImages for the several iOS devices.
Xcode is also used for editing the project setting to export the INTTIME app to the app store.
Hockey App is used to keep a close watch on the bugs which (beta)testers could encounter.
GitLab is used to maintain all the project files and share with others in the team.
iTunes Connect is the place where the App resides. Here we add all the necessary app images and info for the iTunes App store.
iTunes Connect version 1.1 is ready to be displayed in the iTunes App store. All info in place!
Promotion / product placement
People who meditate
People who exercise
Primarily we had ourselves in mind for using this app. But we also wanted to define a more elaborate target audience.
We defined the following target audiences:
- People who Exercise
- People who Meditate
- People who want an interval set for their own purpose
To get started right away we added default sets to the application.
App promotional minisite
To accommodate the target audience and to create (SEO) awareness we created an application mini website, also resulting in this mini making of application site.
The mini site tries to explain the purpose of the INTTIME app and who it is for.
Conclusion / thoughts
We have learned a lot of new techniques while creating this application. It took some new tools to integrate the project as a whole tool.
The tool is an ongoing project with new ideas and (hopefully) regular updates with implementations of these ideas.