The new QuickBooks Online bookkeeping software has gone through quite a few changes. As with any product (or company for that matter), it is always hard to incorporate all of the feedback given to us by our customers. In order to prioritize what we implemented next we launched our feedback portal about a year ago. You can go to feedback.qbo.intuit.com and suggest the features you want next or vote on the ones that matter to you. The last year has been spent building a product based on this feedback.

In this post we will talk about the high level / infrastructural changes to the new QBO. We start with these, but by no means are they the only things changed. With all the improvements we have put in place there is a lot of awesome stuff to talk about and share with you. We will be releasing weekly blog posts over the next few months to talk about specific areas and accounting workflows. From the previous two blog posts we have heard some criticism about our UI changes, but hopefully this and future blog posts should help our customers understand the scope of the changes we made and how we ended up incorporating some of your feedback.

First, why a new user interface? I wanted features.

Since the launch of our feedback portal (feedback.qbo.intuit.com), we have gotten a large amount of feedback that required drastic changes to QBO. QBO was first implemented more than 10 years ago and over time it has accumulated a lot of code – quite like a big machine with lots of moving parts. Making changes for new features was increasing the code complexity, it’s maintainability and thus increasing the turn around time for bug fixes and new features. A small change in one part of the product started to destabilize another part.

Since the UI (user interface) was originally written so long ago and just added to since then, it’s now showing its age in modern browsers. Since its original inception there hasn’t been a change to its architecture. Every now and then our customers get affected by browser bugs. In fact just recently we have come across yet another bug causing an issue for our Safari users. And there have been a lot more in the past. While such bugs can never be eliminated completely due to the rapid release of modern browsers, they definitely can be reduced by revamping our code base. The more time we spend in fixing such issues, the less we get to spend on feature development. A UI architecture change was needed to modernize the app as web technologies have evolved quite a bit in the last few years.

Our primary task was to upgrade the app’s UI infrastructure to take advantage of modern web technologies for performance, faster feature development, faster bug fixing and overall maintainability. Upgrading to modern web technologies has customer usability benefits (beyond getting your desired feature implemented faster), a few of which you will read below in this blog post. And now that we have a much cleaner platform to work upon, many developers can implement your feedback faster than before.

Along the way we also revamped the app’s visual design to make it a lot more consistent across the product. The design change was a parallel effort to the infrastructure change and was an effort to modernize the look and feel of the product. Even though QBO is an accounting app, it can be made cleaner and simpler for the vast majority of our customer base that is not coming from an accounting background. For those already familiar with the old UI, we do understand it’s a big change, but we are hopeful that eventually you will get used to it just like you did for our old product, and probably much faster. Of course when people see pictures of the new product, it mostly shows visual changes and not everything that’s changed underneath, so keep an eye on this blog to learn more about those.

And now, the changes…

Below are the most noticeable changes to the product overall. In the next few blog posts we will do a deep dive into specific changes to accounting workflow areas.

Design

As you have already seen (and read), QBO is sporting a brand new look and feel. This design and color scheme is being adopted not just for QBO but also for all connected Intuit provided apps and services, including payroll and payments. With a similar design across the QBO ecosystem, we expect our users to have a more fluid experience when interacting with our different products. And hopefully this should help minimize the time to learn the UI for another intuit product that integrates with QBO. Integrated payroll should not look like it was written by another company. Likewise the new colors should also be easier on the eyes, feedback users have given us in the past.

Menus and navigation

As you may have noticed from pictures, the navigation system has changed significantly. We no longer have the top horizontal navigation system. It was causing issues as users could not reach certain menu items without trying the second time. Hovering was flaky. It was especially hard on computers with touchpads instead of mice. Since vertical mouse tracking is naturally easier to do, our new primary navigation is now vertically on the left. The secondary navigation is on the top under various menus. Unnecessary hover states have been removed so the menu doesn’t disappear just because the mouse cursor accidentally went off it. Customer, Vendor, Employee and transactions oriented workflows can be accessed via the left hand navigation.

Creating of new transactions can now all be accessed from a single place – by clicking the + on top. Having this one-stop button to create all transactions will prevent users from wasting time to hunt around for a particular transaction to create – something our current QBO menu system is notorious for as transaction creation is distributed under different menu items. Eg, to create a bill for a vendor you had to go under the Vendors menu but to write a check to pay off that vendor bill you had to go under the banking menu. Why couldn’t they all be next to each other for easy access? We think it’s incredibly powerful that you can create any transaction you want from any page on the product.

Company settings, lists and other areas can be accessed via the company / gear on the top right. Again, we have tried to reduce the number of different menus so that you aren’t hunting around for stuff.

Simple and distinct browser URLs

Currently in QBO, the URLs look something like https://qbo.intuit.com/c1/v66/123456789/frameset. This URL remains static irrespective of whatever page you are on and looks exactly the same for every page within QBO. The issue with this is that it makes it impossible to properly bookmark it in the browser. There is no intuitive linking between the page url and the actual page you are on.

This issue is now solved in the new QBO. URLs are not only distinct, but they are much smaller and let you know exactly what page you are on. For example, the URL for an invoice is  https://qbo.intuit.com/app/invoice and the URL for the customer center is https://qbo.intuit.com/app/customers. You can now bookmark these pages in the browser and easily navigate to exactly where you need to using them (you will need to be logged in). This will help those users who like visiting certain pages quite often that would normally require additional clicks to get to.

Likewise, you can easily communicate to other users in your company, your accountant and customer support agents where you are in the product just based on the URL. This should save some time and be less confusing than before. Due to these changes, we will also end up fixing another issue raised often in the feedback. And it should make those users happy who missed the old “shortcuts” feature that QBO once had.

(Note: Currently you may see the URLs having a /cNUMBER/ in them, this will be removed soon)

Multi-window behavior

One big customer feedback was making QBO work better when opened in multiple browser tabs. We have made some improvements in this area too. First you will notice that every navigation point (something you can click on to go a different page) is now a simple URL. Left menu items, top menu items, certain blue colored links on the page etc. Which means you can just right click any of them and open in a new tab or window. Likewise you can CTRL / CMD + click too, to open that page in a new tab. This is very much like other websites on the web and something you could not do in the old QBO.

Secondly, when working in certain areas you should see data sync between the tabs. So if you had the customer center open in one tab, and you added a new invoice in the other tab, the customer center should automatically refresh with the new data. You no longer have to manually refresh the browser in such scenarios to see updated data. Likewise adding a new customer or product in one tab, it should be available in the other tabs without a refresh.

Transaction view

When creating a new transaction, you will notice that it comes over / on-top of whatever (non-transaction) page you were previously working on. So that once you finish creating it, you are returned to the previous page. For example if you were on the customer center and are creating an invoice for a particular customer, then on save (or cancel) of that invoice you will be taken right back to the customer center that is now refreshed with the transaction you just created. The frustration of saving a transaction and navigating away somewhere no longer exists.

There was lots of feedback around being forced to scroll all the way down the transaction too often to save. The buttons on the transaction page are now much more accessible than before even if you scroll the page. You no longer have to go hunting for them by scrolling to the bottom of the screen, they are always stuck to the bottom. All the save options are always in the same place at the bottom of the transaction as well as a More button that contains any additional actions you may need.

Copying a transaction

In the current QBO we only allowed copying an Estimate or Invoice. In the new QBO, we now allow users to copy most transactions. You can just open an existing transaction and click the copy link to create a duplicate of that. As before, this duplicate is still not saved to the system, so you can modify it before saving. This should help those users who like replicating transactions on the fly and aren’t using the recurring transaction feature.

Draft state

This is something you will see soon, and is a work in progress. Lets assume you are creating an invoice for a customer that has some pending charges, and you have already filled out some details on the invoice form. Say you have filled out a detail line item or two. But now you need to see the details of that charge before you add it to this invoice. In the current QBO, if you clicked on a link for that charge, you would end up loosing any data you just entered on the invoice form. But in the new QBO this will not be the case. You could navigate away to that charge’s page, and then come back (press cancel or the browser back button) to the invoice and still see your prior entered data in there. Thus you can start where you left off. This should help those customers who have given us feedback about how their changes get lost when they navigate away after entering some data on our transaction forms. (Of course this use case could also now be solved by just right clicking that charge and opening it in a new tab, as shown above.)

Support for high resolution displays

Users have given us some feedback regarding visual artifacts in QBO on high resolution displays (like the newer retina macbooks). As more of these devices get adopted and start becoming a norm, we had to change the UI to render properly on them. Visual artifacts don’t look great, and can be considered as bugs. The new layout and images in the product should now scale better than before on such displays. The icons should look very crisp.

Performance

(As always, performance is relatively measured and will depend on your connection and system specs.)

Performance was one of the primary reasons for investing in a new UI infrastructure. It is something that most users expect to improve over time, and something not everyone asks for explicitly (just like security). Most folks expect it to improve automatically or stay the same, but never degrade. Similar reasons why people upgrade their computers, software, devices etc. over time.

The new QBO is now a single page application. This means that as a user you will get a better experience when navigating around the app. In a typical accounting workflow, you navigate from page to page a lot. Homepage to the customer center, to an invoice, to maybe the receive payments page etc. When going through pages like that, in the old QBO the entire screen refreshes and users see a white flash for a brief time span. Slower connections see it for longer and can give the impression of the page being stuck. In the new QBO you will no longer see this and your browsing experience will be a lot more fluid, instantaneous in some cases. You will notice only those parts of the page change, that actually need changing. For example, the menus should not need continuous reloading, they don’t magically change. But in the old QBO they still are loaded every time you go to a new page. This performance improvement should make those customers happy who gave us feedback wanting QBO to be as fast as the desktop version. Well it is closer to that now if not all the way there.

Another improvement to performance comes as a result of reducing network traffic – data transfer over the wire. Currently in QBO every time you navigate to a page, we not only send your accounting data over the wire, but also the entire UI for that page. So if you go to an invoice page more than once, you get the entire UI for that invoice every time. This is highly redundant as the invoice UI is quite static and we weren’t making good use of browser caching. We have now architected the frontend UI to be isolated from your user data. The entire UI is now served from faster content delivery networks (that may be a lot closer to you physically than Intuit’s own data centers) and once you have the UI cached locally, your browser never fetches it again until the next QBO release. The only thing that now goes over the wire back and forth to Intuit’s servers, is your user and accounting data. This reduction of data transfer will help people on lower bandwidth and/or higher latency connections like on 3G or LTE. This will also improve the app’s responsiveness and load time for everyone.

To give you an example, see the screenshot below. I logged in, landed on the homepage/dashboard and then clicked to create a new invoice. The image will show how many requests were made to load that invoice page and how much data was transferred. For the new QBO, the number of network requests can be counted on one hand, but not so much for the old QBO which is about 50 requests. Likewise only a small amount of data was transferred – approx. 3KB for the new QBO vs approx. 30KB for the old. Also, if this was a first time visit, my cache would not have been primed and all the cached requests would have been additional data over the wire.

Lastly, on a more technical note, some parts of the UI now also take advantage of the GPU (Graphics Processing Unit – your device’s graphics/video processor) via GPU Accelerated Compositing. We are also relying a lot more on CSS animations using @keyframes. These changes should make certain things like scrolling and animations more fluid and reduce lag.

Removal of Popups

There was a lot of negative feedback from users regarding window based popups in QBO. Folks are forced to enable popup blocking to get QBO to function and if somehow a popup got blocked, the app would freeze giving the impression that something broke or QBO went down. Users then would try to close and re-open the browser, press refresh multiple times or even call support as they were lost and unable to proceed further. Popups give a bad experience to web applications. With the new QBO we have eliminated window based popups on all the upgraded pages which should make our users happy. You will no longer get a plethora of popups filling up your screen. We firmly believe that popups make babies cry. For the few pages that are still reminiscent of the old version, they will be upgraded soon for a fully popup-free QBO experience.

…and finally tablet browser access

The biggest customer feedback we have gotten in the last couple of years was accessing the full QBO website on the tablet browser. Because of the performance improvements mentioned above as well as removal of popups, the new QBO is now accessible via mobile Safari on iOS, Chrome on Android and IE on the Surface. Just go to https://qbo.intuit.com in your tablet’s browser as your would in your desktop browser. While we still have certain issues to iron out, specifically related to data entry, the read only pages should work relatively well. Since this is a work in progress, the tablet browsing experience will become better over time as we continue to put effort in this area.

(Note: Some pages within QBO will still not be accessible on a mobile browser as they are still being ported over to the new UI infrastructure. Eventually we expect all pages to be accessible. Also, we still have native apps that can be installed from either the Apple app store or Google Play store.)

Summary of more changes

So those were our few high level changes to the entire app. As mentioned before, over the next few months we will talk more in depth about changes to specific areas like

• the new homepage
• the activity feed
• the new customer and vendor centers
• changes to invoicing and other transactions
• better payments integration
• invoice customization
• attachments / document manager
• online banking
• improved search functionality
• bounced email notifications
• accountant collaboration
• square integration
• online invoices
• etc.

Below are some work in progress screenshots of the above. Keep an eye out on this blog to learn more about these in the near future!