menu

The making of INTTIME

INTTIME helps you manage and organize all your interval sets. Do you exercise, create an HIIT interval set. Want to meditate, create a Meditation interval set. For every purpose you can imagine, you can create and manage an interval set.

And this is how we created the APP!

 Iphone App

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

brainstorm

Go overboard, look at this idea from all angels, think outside the box.

define

What is the purpose of the App what problem does it solve.

focus

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

TryFirst - structureert informatie online

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.

Martijn studied graphics design / advertising at CIBAP Zwolle and learned programming along the way. First in Flash (Actionscript) and later in JavaScript.

LinkedIn - Bondt en Blue

Bondt & Blue - van concept tot realisatie

Martijn de Bondt

Project Philosophy

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)

and

Fail Fast, Fail Often

Project Tools

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.

  • Skype
  • Slack
  • Email
  • Telephone

 

Skype

Slack

Email

Telephone

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 as scrum board

HockeyApp for user feedback

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).

Sketch

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

iPhone Simulator

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.

Invision

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

The relative 'new' platform - new for us to develop for mobile devices - was Angular (Angular 4), because it is a modern javascript based application framework. It has a structured front-end approach, is flexible and has a large and good community support.

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.

 

Angular

Ionic

Microsoft Visual Studio Code

SourceTree

GitLab

xCode

HockeyApp

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.

Get your INTTIME app now

 Iphone App

INTTIME

INTTIME is a mobile app to create, store and re-use your interval sets. Easy to use for HIIT training, meditation or any other need. Try it and let us know what yout think. Regards, INTTIME

Bondt & Blue

Bondt & Blue is an advert 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.

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..

Contact

We would love to hear your reactions, contact us for:

UP