Flojuggler iOS App

Flojuggler Mobile UI Design

Flojuggler is the lifestyle menstrual tracking application designed to track the cycles of multiple persons. There are times when you want to know which of the women in your life are having their periods. See the illustration below.

I created the entire brand, site design, and programming which included  “Facebook style” image management, extensive AJAX feature sets, JQuery UI integration, all on a true MVC architecture. This was another opportunity to invent a service from the ground up.

flojuggler-problem

The original Flojuggler was built on the CakePHP framework. I was in love with PHP at the time. Cakephp, a Ruby on Rails knock off written in PHP, and JQuery UI had just come out. Had a lot of fun making this one years ago but the technology, UI/UX, and brand have become dated so it’s time to make an iPhone app. Let’s take a look at that process.

Balsamiq Mockups

Balsamiq Mockups provides a ready to use language for wireframes and makes it easy for non-designers to make edits.

Wireframes: First step is to create a rough idea of what the app will do. I prefer to use Balsamiq Mockups to create wireframes because it’s simple and does not distract from the task at hand. Here we have three basic screens; The flo list, flo edit/create form, and the prediction form. This allows us to dip into the initial conceptualization of the UI/UX which leads to the code class structure. I’ll spend at least a week going over multiple versions of these wireframes. It’s cheaper to explore and make mistakes here rather than in the development cycles. Solid wireframes provide design and engineering with a consensus on where they are both headed which is supposed to be a single destination.

Designs: During this phase I’m living in Adobe Illustrator, Photoshop, and mostly Fireworks. The latter allows amazing rapid prototyping and final comps as it provides a huge amount of object support when compared to Photoshop. Fireworks allows producers to approach a project similarly to the way that a good framework allows a developer to proceed with structure. Illustrator and Photoshop help a designer create art. Fireworks helps a producer to create assets. When you’re wearing all the hats it really helps to have the right tools on hand.

ios-simulatorscreensnapz002

The UI/UX progression over time. The initial MVP on the left and the results after some iterating on the far right.

Since this is a ‘prototype’ project there’s not a lot of custom design up front. I’m really looking to emulate the iOS 7 look and feel first. Get the app working in an acceptable UI/UX format. The time for exploring real designer ideas comes later.

Diagrams: The wireframes are the stepping stone into my UML diagrams. Again, it’s cheaper to plan on ‘paper’  instead of planning while coding. Sure, I’m always going to run into problems and run back to the drawing board but this is about minimizing how much that happens and how much damage occurs in the event. I’ve also found UML diagrams great for code reviews before any code is written. Having a more senior programmer look of my diagrams helps keep my mind open as I have not invested any hours in code. It’s easier to throw away a diagram than it is to throw away a day’s worth of code.

Flojuggler is remarkably simple when it comes to class structure. There’s really just one, two if you found the model class. The rest of the methods are behavioral and not really dealing with the data other than calling flos to display or delete.

Flojuggler iOS native version

Initially I wanted to see how far I could get in Objective-C in two months.

Coding: While I’m very familiar with Javascript, I wanted to try and do this in Objective-C for all the obvious benefits of using a native language on the platform. Off the bat I knew that JS and Obj-C are not very close in syntax or structure but I felt like it was worth trying. At the same time I didn’t want to dig myself into a six month learning curve so I decided to time box the experiment. Two months of Obj-C and let’s see how far we can get.

Two months later I had a working CRUD in place. I learned the general syntax of Obj-C and dug a bit into the X-Code data model paradigm which I found to be very SQL like. It looked promising but… that was a steep learning curve for a simple CRUD. The time box had ended and it was time to start over with a Phonegap implementation. Let’s see what I can do in the same amount of time using Phonegap, a Javascript framework in iOS.

Flojuggler iOSA month later I had a complete prototype with all the core features and a few bells. With little to no ramp up on the core language it was much easier to crank out a product. In fact, there was even time to evaluate Backbone and Angular along the way. Given the minimal nature of the application it didn’t appear necessary to use another framework on top of Phonegap and JQuery Mobile so I wrote everything by hand. It’s less extensible but the project won’t extend and the codebase is a fraction of what it would be with additional libraries.

There’s some additional libraries for camera functionality, notifications, etc but this is the basic prototype done in a month. Now I can go into design mode and start coming up with final concepts for the real brand aesthetic.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s