Share This:

In this post, I will dive a little more deeply into the Track-It! 10.5 release by starting with a look at the new Track-It! Mobile Web.  In the next few posts I'll be answering some questions about this new feature including why we chose to go with a mobile web site instead of a native application, why we made some of our decisions around the Mobile Web and some things about the feature that we think are cool and may not be apparent at first glance. 

I starting thinking last night about the very beginning of the planning for this feature.  Our Track-It! Product Manager, Cris Coffey, and I went away for an afternoon and camped out at my house.  We were being pulled in several different directions at work and hadn't been able to sit down and simply work through the screen flow and form some initial thoughts around the look and feel of the Mobile Web.  So we took a road trip - albeit a short one, but an important one nonetheless.  The only negative thing about our afternoon (at least for Cris) was that he was forced to share our TV room with my evil little Boston Terrier, Dixie.  I could (and should) have a separate blog solely dedicated to the evil that is Dixie, but for now, just know that she is an 11 year-old terrier that has more energy than any puppy you've ever seen.  And she barks constantly.  And very loudly.  I spent the afternoon apologizing to Cris for any number of Dixie's transgressions - he kept grinning and saying not to worry about it, but deep inside I know he wanted to run out the front door screaming - she has that effect on people.

We started out talking about different aspects of the problems that customers have and how we could solve them with a mobile solution.  Eventually I went into my home office and grabbed a stack of printer paper and a pencil and started sketching out screen mockups.  We had them laid out all over the floor and kept rearranging them to create the screen flow that we were looking for.  Of course, the other reason that I was constantly rearranging them was because Dixie kept running through them, scattering the sheets of paper to the wind - or at least the breeze from the ceiling fan. 

Several hours later - we both stepped back and smiled.  We were finished.  And we were very happy.  This was one of those times when compromise was easy and the decisions seemed to flow steadily from both of us.  We had our initial screens and screen flow.  Satisfied, Cris grabbed his bag and ran for the front door with Dixie barking and nipping at his heels.  Hmmm...  he hasn't been back since that day, either.

Fast forward to two weeks ago before the release of Track-It! 10.5.  We were in the very last stages of testing the release and while I was shuffling some paper around in my office I stumbled upon those original mockups for our Mobile Web screens.  My first reaction was to smile big and start thumbing through them.  I imagined that as I looked through them I would realize how different our final screens were from those original mockups.  I was surprised to find that we actually were extremely faithful to the original sketches.  In some cases, eerily so.  But in this case, it made sense.  The Mobile Web was one of those features that just seemed to manifest itself over a period of time.  It wasn't something that changed a lot as we developed it and it wasn't something that was marked by constant discussion about how to implement certain aspects of it or whether or not we were heading down the right path with it.  I think that is because we all are heavy smartphone users here as we have some iPhone users and some Android users.  It was apparent to us what we wanted to do because we use mobile web applications every day and taken along with our Track-It! experience, we very quickly saw how to expose the proper Track-It! functionality in an easy-to-use way for our customers.

Here are some of the original screen shots along with their final counterparts - I thought it would be fun for you to see for yourself how close the end product ended up to those original sketches. 

This screen ended up being very much the same - just a couple of things were changed like the refresh button and the grouping of the list of 'My' and 'All' Work Order views.

This screen also ended up nearly identical to the original mockup.  I laughed as I saw that the buttons at the bottom even ended up being the same ones as in the mockup plus they are in the same order - that's a rarity.  We planned on having a UI to customize this screen in some fashion but that was cut from this release.  However you can edit a configuration file to change the information shown in each Work Order view - what do you think?  Would you like to see a UI that you could use to customize this screen in the future?

The details for each Work Order in a list change depending on the Work Order view that you're looking at to show you the most appropriate information for that view.  For example, we don't show the Assigned Technician for the 'My Open Work Orders' view - you know who those Work Orders are assigned to so we can show some other, more relevant information instead.  Of course, you can still configure that view to show whatever information you want - it's up to you.  We also tweaked the formatting of these lines when compared to the original sketches, but they're actually not to far off at all.  Basically we thought having the labels on the information below the summary was important and that we should have them on separate lines.  We think it looks very elegant and is easy to read that way.  What do you think?

This sketch is a tough one to read as we were planning to have the View Work Order and Edit Work Order screens be very similar at that point.  We decided to split them up for a number of reasons - one important one was so that we could make the View Work Order screen configurable in terms of the order of the fields shown.  We also wanted a very visual distinction between the two screens - this is a very common practice for mobile applications and we feel that it works well in the flow of Track-It! Mobile Web.  One other change that we made to this screen was that we went away from the original idea of using a carousel and swiping to go to each section of a Work Order when editing it to a more traditional approach with tabs at the bottom of the screen.  We quickly found that the swiping was cool and intuitive, but having to swipe 4 times to get to the Change Management section of a Work Order wasn't very user-friendly.  We think the tabs work much better and will be easier to use consistently as we add more to the Mobile Web in the future.

Finally, the Search screen is nearly spot on when comparing these two images - take away a 'Go' button to tap (you just hit enter on your keyboard to initiate a search now) and tweak the pagination a bit and voila!  You have our search screen.  We think it works really well and is consistent across the application - for example, you see this same screen when you need to insert a Solution into a Work Order in the Mobile Web (Yes!  You can do that!).

Thanks for stopping by - hopefully this was an interesting look at some of the history behind the planning for Track-It! Mobile Web.  You can take a look at the demo site by visiting from your mobile device or you can use your desktop browser to take a look at the full Track-It! Web.  This should lay the foundation for some of the other things I want to talk about for this release.  For the next post in this series, I'll likely talk about our decision to create a mobile web application instead of a native phone application.  There are some great reasons for this and I'll dive right into them with you.  Well, either that or I'll write a post about Dixie and how she is plotting to destroy our house, one square foot at a time.


Don't let the cute picture fool you. This was from before she learned all of her evil tricks...

-- As always, you can reach me at or on twitter (@BennyMorrison) --