Case Study: Blue Innovations Embraces Touch and Intel® Smart Connect Technology to Upgrade Its MoneyBag App for the Intel® Ultimate Coder: Ultrabook™ Challenge

Blue Innovations recently had an opportunity to upgrade its financial tracking app, MoneyBag, to optimize it for Ultrabook™ devices and Windows 8. Prior to this upgrade, MoneyBag was a basic app, so the development team considered many areas for additional functionality. The team performed the upgrade as part of the Intel® Ultimate Coder: Ultrabook™ Challenge, which took place over just six weeks in August and September 2012.

For the Challenge, the team focused on optimizing for the touch interface, using sensors as much as possible, creating a fluid design, and taking advantage of Intel® Smart Connect Technology. This case study describes the development opportunities and decisions that the Blue Innovations team made as they essentially redesigned MoneyBag. Key opportunities included:

Ensuring that MoneyBag worked well with Windows 8

Using Windows Desktop for the primary app and creating a compatible mobile version

Making the app as touch optimized as possible, yet also allowing for high performance with keyboard and mouse input

Understanding typical user patterns and designing the user interface (UI) for ease of use

Designing the app to be completely fluid, adapting to any screen resolution and size

Incorporating Intel Smart Connect Technology

Making good use of Ultrabook sensors

Company

Blue Innovations was started by two childhood friends, George Christopher and Sureshkumar Gunasekaran, who shared a vision to create applications that make life easier and every-day processes simpler. As Intel® Black Belts and winners of the Most Valuable Developer and several Development Challenge Awards, they build software that “touches people’s lives.” The company is customer-centric and applies strategic thinking, design insight, and practicality to every project. Blue Innovations boasts a wide range of skills and knowledge and strives to deliver solutions and approaches that large companies cannot match. In addition to MoneyBag, the company’s apps include Tasksbox, Habits, Bluebirds, iAlarm, and iContacts.

Product

MoneyBag is a straightforward, intuitive money manager that allows users to easily enter transactions and create custom categories and reports. Users can set a budget for a particular category and track it continuously. Financial data entry is simplified, with reminders and the ability to set up repeat transactions. MoneyBag uses savings and goal-setting functions to help

2 Case Study: Blue Innovation

13 December 2012

users focus on getting out of debt and moving toward financial freedom. The app can be synchronized across devices and systems using Dropbox and provides an advanced tool to help people build a strong relationship with money (see Figure 1).

Figure 1. Screen shot of the MoneyBag interface for Ultrabook™

Development Process for Windows 8

The Blue Innovations team knew upgrading for Windows 8 would be critical for the evolution of MoneyBag and were able to integrate Windows 8 upgrades as part of the Intel® Ultimate Coder: Ultrabook™ Challenge. They wanted to ensure that their application could take advantage of the features the combination of Ultrabook and Windows 8 offered, especially touch, which was integral to the updated version. Christopher says, “We knew that both Ultrabook and Windows 8 had huge potential and were going to be adopted by a lot of people, so we wanted to make sure that our app would work seamlessly on an Ultrabook with the Windows 8 platform.”

The team decided to make this version of MoneyBag a Desktop application rather than a Windows Store app. Christopher explains: “We are a desktop application because we are a productivity application, which requires a lot of interaction from the user through the keyboard and mouse. A lot of data has to be keyed in when you are dealing with financial transactions. Because it is a

Case Study: Blue Innovation 3

13 December 2012

creation mode application, not a consumption mode application—like many games and media apps—we believed it would fit the Desktop model better than the Store model.”

The team thought carefully about this decision and ultimately arrived at it based on the belief that if they made a Windows Store application, they would have to compromise on too many key features. However, they did decide to create a mobile companion application that allows users to enter transactions on the go. Christopher offers an example: “If you go to Starbucks, you can pick up your phone and enter the transaction using our MoneyBag companion app on your mobile device. It then syncs with the MoneyBag application on your desktop. You can perform functions that don’t transfer well to the mobile environment using the desktop app.” Such functions include analysis, reports, budgeting, and configuration (see Figure 2).

Figure 2. MoneyBag reporting function

Christopher notes that, from a developer perspective, the team also wanted as many users as possible to have access to MoneyBag. Keeping it as a desktop application enabled them to do so. He notes, “We wanted to make it platform-independent so we could target people who are using all types of desktop devices, including Ultrabooks, desktops, and Macs.”

4 Case Study: Blue Innovation

13 December 2012

Development Process for Ultrabook™

In considering how to optimize MoneyBag for Ultrabook, a major factor was that the Ultrabook was more powerful and had more features than devices the team had previously worked with. Christopher remarks, “We recognized that these features would enhance interactivity with users. We took them, along with features made possible by Windows 8, into account as we started to port our application and configure it for this platform.” Yet the team had to pick and choose to enable only the features that made the most sense for their app. They considered the sensors, gyroscope, and accelerometer as well as Intel Smart Connect Technology.

MoneyBag Improvements

As a result of optimizing for Ultrabook, the MoneyBag user experience was improved. Christopher states, “The app became easier to use. Users will choose either the keyboard and mouse or touch or a combination; users will find their own way of interacting with the app, and there are a variety of options. Using myself as an example, when I first started using MoneyBag with Ultrabook, when I was in Desktop mode, I found myself doing most of the operations by touch. But, when I had to enter something in as text or I had to do some specific operations, I’d find myself using the keyboard and mouse.”

In their usability testing, the team found users working with the keyboard and mouse, then unconsciously switching over to a touch mode, doing a few operations in touch, and then switching back automatically to keyboard and mouse mode. Christopher comments, “I think this is the way things will happen in the future with the advent of devices that are enabled with both a touchscreen and a keyboard and mouse. This strategy has helped us to take MoneyBag to users who appreciate both ways of interacting. We are catering to both desktop and touch users.”

Touch Capability

The team understood that, with a touchscreen, users will expect to perform touch-based operations. Christopher says, “For that, we had to make sure that that option was available. But we also knew that some users would prefer to use a keyboard and mouse. We wanted to provide options so that users who prefer to could use the keyboard and mouse, and others could use touch. Here we encountered a challenge in how to provide both sets of controls.”

The team wanted to offer a hybrid of both types of input. However, notes Christopher, “The major problem is when you have a keyboard and mouse application, the touch buttons can be small; but when you have a touch-based application, the buttons have to be large. We weren’t sure what to do to keep from changing the entire look and feel of the application. We ended up using a hidden menu (see Figure 3)—a menu exclusively for touch—just behind the main application. Users can enable it using a single touch. This option lights up the application, and users can use touch functionality as they would on an Apple iPad*.”

Case Study: Blue Innovation 5

13 December 2012

Figure 3. MoneyBag hidden menu

In addition to button size, the team updated the button layout to better suit the way testers wanted to use MoneyBag on Ultrabook and optimized the menu to be easy to use. All the menus are placed at the bottom of the screen, but users can also use the keyboard and mouse. They can go back and forth based on their preference. Christopher says, “Most apps are either designed for touch or a keyboard and mouse, but not for both. MoneyBag is unique in that it caters to both of them effortlessly, and it switches between them seamlessly.”

Touchable, Touch-enabled, and Touch-optimized

Because Windows 8 is designed for touch and many Ultrabook devices use touch, the team was conscious of how touch-friendly their app was. Christopher notes, “The app has to be creative. It has to support touch and different resolutions. So, the real challenge is from a design perspective. The application must be fluid, yet at the same time have a structure and a beautiful UI.”

The Blue Innovations team was impressed with the touch functionality of Ultrabook and the number of touch-enabled options available, which they got to know better as they developed their app for touch interaction. They wanted to make the app as touch-optimized as possible. Christopher comments, “Touchable wouldn’t do. Touch-enabled wouldn’t do. We wanted to make sure it had as many touch-optimized features as possible. That involved a lot of consideration and

6 Case Study: Blue Innovation

13 December 2012

thinking on the features that were already in place. Sometimes, we went so far as to go back and change a feature.” Through the development process, the team considered the three levels of touch-friendliness: touchable, touch-enabled, and touch-optimized.

Touchable

Christopher explains: “The first category is touchable, meaning that the developer doesn’t have to do anything special for touch to work because the device and the platform take care of it. Any application is touchable the moment you put it on a touch-enabled device. However, the biggest concern with a touchable app is the buttons. On a desktop, the mouse is sharp and able to select even the smallest buttons. But, when you put such an application in a touch environment, it is not efficient because the small buttons are more difficult to navigate using a touch interface. Other examples are drop-down menus and text entry, which also do not work well in a touch environment.”

Touch-enabled

The next category is touch-enabled, in which the application is enabled to receive touch gestures. The developer makes the buttons slightly larger and properly spaces the layout, with a menu. Many layout and design actions can be taken to ensure the application is touch-enabled. A touch-enabled app doesn’t ask the user for a lot of data; most data is auto-populated.

Initially, MoneyBag was a touchable application. Christopher describes what came next: “We took that design and installed it in our touch-enabled Ultrabook. We saw that the options were working, but the design was not efficient. For example, we had a tough time trying to open the drop-down menus, display the lists, and select options. So we eliminated all the drop-downs in the application as well as other navigation tools that were difficult for users and replaced them with check boxes or radio buttons. We tried to create a uniform experience for the user between the touch and keyboard/mouse interfaces.”

The next step in moving MoneyBag from touchable to touch-enabled was to ensure that all the buttons were at least 40 × 40 pixels (see Figure 5). There were some areas where the team felt the button size could not be increased without spoiling the UI. But the hidden menu was touch-enabled, so the team was confident that touch users would find it easy to navigate.

Case Study: Blue Innovation 7

13 December 2012

Figure 4. MoneyBag with large buttons

Touch-optimized

The third category is touch-optimized. In this case, the app is completely optimized for a touch-enabled device. From a design perspective, touch-optimized considerations must be thought through carefully. A touch-optimized app should be more forgiving when users accidentally touch something. For example, with a touch-enabled device, when a user touches a delete function, many times it’s accidental. So the user should be prompted with a message saying, “Do you really want to delete this?”

Making the app touch-optimized was difficult because it took the greatest effort on the part of the design team. Christopher says, “When we say touch-optimized, the key is to make sure the most important options are available in the main menu. The user should not be looking around; all options and features should be available to the user immediately. In MoneyBag, there are no submenus. There are no menus that require a user to navigate several levels to go to a feature. Anywhere in the application you want to go, you can go to in a single touch.”

Another important consideration was gesture. Christopher explains: “A user who is using a mouse and keyboard will click to go to the next page, but a user with a touchscreen will swipe to go to the next screen. We wanted to make sure those gestures were adequately captured. So a user can

8 Case Study: Blue Innovation

13 December 2012

quickly scroll through a long list of transactions using a flick gesture, similar to how one would use a reader.”

Overall, says Christopher, “The layout was designed to be easy for users to use. More than 90 percent of frequently used buttons are available in the most accessible part of Ultrabook.”

Fluid Screen Size

Another consideration was ensuring that the display was fluid on various types of devices (see Figure 6). Christopher says, “We aimed to make the application completely fluid, meaning it would resize itself to adapt to any screen resolution without loss of quality. We believe that anyone developing for Ultrabook should not focus on one particular fixed layout. If you develop on an iPad, it has a particular fixed resolution, and that’s it. This is the only resolution that will be on users’ screens, so your design can be based on that particular fixed layout. But Ultrabook resolutions can range from more than 600 or 700 pixels in height. Developers must make the app fluid enough to clearly fit in each screen in the same layout with the same elegance and the same quality.”

Figure 5. Fluid layout ensures high-quality interaction on any device.

To address this issue, the team tried different design concepts. Christopher remarks, “Before we finalized the layout of the application, we had tried out more than 250 design concepts. That’s the kind of effort and the work that have to be done to make sure the app is fluid and supports all resolutions. Coming up with a fluid layout, and implementing it was a huge challenge. But it was important because Ultrabook is available in different resolutions and various screen sizes.”

Case Study: Blue Innovation 9

13 December 2012

Intel® Smart Connect Technology

Blue Innovations found the Intel Smart Connect Technology associated with Ultrabook useful. Christopher says, “Intel Smart Connect Technology is a huge fascination for us.”

This feature can be used to set up a reminder, which is perfect for a financial application such as MoneyBag, in which users need to be reminded of things like upcoming bills. George states, “Even if the Ultrabook is in a sleep state, Intel Smart Connect Technology enables it to wake up at intervals and connect to the Internet. That was a huge thing for us because even if the Ultrabook is sleeping, MoneyBag can still use that window and send reminders to users.”

Another use for Intel Smart Connect Technology is ensuring that transactions users record on the go with their mobile devices can be recorded on the version of MoneyBag housed on the Ultrabook.

Sensors

The MoneyBag development team wanted to make full use of Ultrabook technology but knew that not all of the sensors available were relevant to their app. For example, they did not need the gyroscope or accelerometer, which are more useful for games.

One sensor that did prove to be useful was the location Global Positioning System (GPS) feature. Christopher explains: “When a user enters a transaction, the device uses this sensor to find the location and automatically adds that location to the app. The next time the user makes a purchase at the same location, it is auto-categorized. This is a transactional parameter that would otherwise have to be entered manually.”

Not all users want this functionality, but it is particularly useful for travelers, who can later easily determine expenses for each location traveled to. Another helpful component of the feature is that once the app “knows” what type of store is at a particular location, it can auto-populate other aspects, such as the store type (grocery, electronics, etc.). Christopher notes that this feature will become even more helpful as Ultrabook becomes more mobile.

The sensors were both a big advantage and a big challenge. Christopher explains: “As developers, we had to write some integration code to make the sensors operate properly. So, there is that extra step to make full use of the sensors.” At the same time, he observes, “We don’t use all of them. The accelerometer and gyroscope, for example, are not relevant to MoneyBag. But we really love them because they would fit in a game application.”

Ultimate Coder Challenge Experience

The Blue Innovations team learned several lessons during the Challenge:

Never use a fixed layout. Christopher says, “Doing a fixed layout application is easy because the constraints are fixed for you. The x and y and the rectangle in the box in which

10 Case Study: Blue Innovation

13 December 2012

you have to work is fixed. But the app won’t scale for different resolutions or for different devices and screens. So we learned that we always have to be fluid, even though it takes a lot of effort. But once you fix the framework for a fluid layout, you don’t have to worry about various screen resolutions because it will automatically work across all resolutions. If you have a fixed layout for each screen type, you have to work on it, and that is a problem.”

Expect how users will use the application. Christopher explains: “As developers, we need to know what the usability pattern will be so we can enhance the application for users. We did a lot of research from usability, touch, layout, and design perspectives, and we made sure those observations were brought into the application. Now we are hearing from customers that they love the UI. This would not have been possible if we hadn’t done that homework.”

Understand how to leverage the power of the underlying device platform. Christopher notes, “Ultrabook as a platform and as a device has a lot of advantages, a lot of features. We learned how we can leverage that to our app’s advantage so that we get more buzz and more revenue.”

The team learned other lessons as well—so many that they wrote an e-book about their process to help other developers learn from their mistakes—and created an Ultrabook development website.

All the hard work has paid off. In the two to three months following the Challenge, the team had more than 10,000 downloads of MoneyBag from their website. As of late November 2012, they expected the app to be in the Mac App Store* by December 2012.

After the Intel Ultimate Coder: Ultrabook Challenge, the team continued to make Ultrabook-specific modifications to MoneyBag. Christopher says, “We are further fine-tuning it. We added a lot of features, made sure they were stable. Since optimizing it for Ultrabook, not only Ultrabook users but other device users as well, really want to use it because the UI looks good, with a fluid layout.”

For details on the winning entry in the challenge, visit the Ultimate Coder Winner announcement.

Summary

Blue Innovations participated in the Intel Ultimate Coder: Ultrabook Challenge, updating its money management app, MoneyBag, for use with Windows 8 and Ultrabook. Because MoneyBag is a productivity app rather than a consumption app, the team decided to use the Windows Desktop platform rather than Windows Store. Optimizing for touch was a big part of the redesign, and the team worked its way through touchable, touch-enabled, and touch-optimized features such as larger buttons, removal of difficult drop-down lists, and hand gestures. However, they still wanted to provide keyboard and mouse functionality and included a hidden menu for touch to accommodate both interactivity options. Creating a fluid screen size was another item the team considered essential for optimal functionality on a variety of screen sizes and resolutions. They

Case Study: Blue Innovation 11

13 December 2012

also made use of sensors, particularly the GPS sensor, to help users categorize purchases by location as well as Intel Smart Connect Technology to record transactions and send reminder messages. Each upgrade presented its own obstacles, but the Blue Innovations team came out of the Challenge with a greatly improved app and having learned many valuable development lessons.

About the Author

Karen Marcus, M.A., is a technology marketing writer with 15 years of experience. She has developed case studies, brochures, white papers, data sheets, solution briefs, articles, website copy, and other documents for such companies as HP, Samsung, IBM, Microsoft, Amazon Web Services, Intel, and EMC. Karen is familiar with a variety of current technologies, including cloud computing, enterprise computing, video displays, operating systems, and personal computing.

Notices

INFORMATION IN THIS DOCUMENT IS PROVIDED IN CONNECTION WITH INTEL

PRODUCTS. NO LICENSE, EXPRESS OR IMPLIED, BY ESTOPPEL OR OTHERWISE, TO ANY

INTELLECTUAL PROPERTY RIGHTS IS GRANTED BY THIS DOCUMENT. EXCEPT AS

PROVIDED IN INTEL'S TERMS AND CONDITIONS OF SALE FOR SUCH PRODUCTS, INTEL

ASSUMES NO LIABILITY WHATSOEVER AND INTEL DISCLAIMS ANY EXPRESS OR

IMPLIED WARRANTY, RELATING TO SALE AND/OR USE OF INTEL PRODUCTS

INCLUDING LIABILITY OR WARRANTIES RELATING TO FITNESS FOR A PARTICULAR

PURPOSE, MERCHANTABILITY, OR INFRINGEMENT OF ANY PATENT, COPYRIGHT OR

OTHER INTELLECTUAL PROPERTY RIGHT.

UNLESS OTHERWISE AGREED IN WRITING BY INTEL, THE INTEL PRODUCTS ARE NOT

DESIGNED NOR INTENDED FOR ANY APPLICATION IN WHICH THE FAILURE OF THE

INTEL PRODUCT COULD CREATE A SITUATION WHERE PERSONAL INJURY OR DEATH

MAY OCCUR.

Intel may make changes to specifications and product descriptions at any time, without notice. Designers

must not rely on the absence or characteristics of any features or instructions marked "reserved" or

"undefined." Intel reserves these for future definition and shall have no responsibility whatsoever for

conflicts or incompatibilities arising from future changes to them. The information here is subject to

change without notice. Do not finalize a design with this information.

The products described in this document may contain design defects or errors known as errata which

may cause the product to deviate from published specifications. Current characterized errata are

available on request.

Contact your local Intel sales office or your distributor to obtain the latest specifications and before

placing your product order.

12 Case Study: Blue Innovation

13 December 2012

Copies of documents which have an order number and are referenced in this document, or other Intel

literature, may be obtained by calling 1-800-548-4725, or go to:

http://www.intel.com/design/literature.htm

Software and workloads used in performance tests may have been optimized for performance only on

Intel microprocessors. Performance tests, such as SYSmark* and MobileMark*, are measured using

specific computer systems, components, software, operations, and functions. Any change to any of those

factors may cause the results to vary. You should consult other information and performance tests to

assist you in fully evaluating your contemplated purchases, including the performance of that product

when combined with other products.

Any software source code reprinted in this document is furnished under a software license and may only

be used or copied in accordance with the terms of that license.

Intel, the Intel logo, and Ultrabook are trademarks of Intel Corporation in the US and/or other countries.

Copyright © 2012 Intel Corporation. All rights reserved.

*Other names and brands may be claimed as the property of others.