How could Xero improve the homepage?

Thanks so much Andrew, you're doing outstanding work - I owe you a beer or five.

And Xero team, I apologize for my harsh words before - you know I love you, but my expectations are high for your outstanding product and this UX behavior is well beneath anything I've ever seen before (from you or anyone).

Compounding my frustration is that I first noted this issue in a product idea on December 15, and the only response has been that we can try painstakingly rebuilding our preferred layouts on various screen sizes and hoping that they're remembered (to say nothing of the fact that most of us just want to use one single layout, regardless of screen size).

I am always happy to do a screen-share to show what my day-to-day would look like without Andrew's wonderful workaround in place - I'd love for a designer to tell me if what I'm experiencing is actually considered an acceptable (let alone desirable) user experience from your team's standpoint.

@Elliot - Yes, Xero made some changes to their code on their side. My updated version of the CSS for you is copied below.

In simple terms - replace ".dashboard-template-beta-grid" with ".dashboard-template-grid" - this will fix my hack to pick up based on their recent changes.

For reference, the full CSS I'm applying to the Xero site is copied below, which includes all the changes needed to take account of their recent updates. I still need to do some more work on fixing (in place) the blue menu bar - once I've some time to get to that I'll post another update.

Remember to choose either 2 or 3 columns from the CSS based on your preference - if you copy/paste, it'll be 3 columns, but hopefully there's enough here for you to understand how to get it working.

A.

@-moz-document domain(go.xero.com) {
/* Fix navigation bar */
/*
#shell-nav { position: fixed !important; width: 100% !important; z-index: 1000 !important; }
#shell-app-root { margin-top: 64px !important; }
*/

/* Move homepage content header (and edit button) into page header */
.dashboard-template-zone-header {
width: 380px !important;
margin: -50px auto 50px auto !important;
}

/* Widget border */
.dashboard-template-widget--contents article {
border: 1px solid #c0c0c0;
}

/* Account watchlist compact mode */
.accounts-watchlist-widget-readonlytablerow td {
font-size: 12px !important;
padding: 4px 16px 4px 0 !important;
}

/* Full height account watchlist - change "11" to actual widget position/index, and "6" to required row count */
.dashboard-template-grid > .dashboard-template-widget:nth-child(11) {
grid-area: span 6 / span 1 !important;
height: auto !important
}
.accounts-watchlist-widget-AccountsWatchlistWidgetContent {
height: auto !important;
}

/* Restore VAT submissions separator */
.mtd-vat-dashboard-widget-wt-widget-template--body hr {
visibility: visible !important;
margin-left: 24px !important;
margin-right: 24px !important;
}

/* Fix columns to 3 columns regardless of screen size */
.dashboard-template-grid {
grid-template-columns: repeat(3, 1fr) !important;
max-width: 1360px !important;
}

/* Fix columns to 2 columns regardless of screen size */
/*
.dashboard-template-grid {
grid-template-columns: repeat(2, 1fr) !important;
max-width: 900px !important;
}
*/

}

I've raised this issue off-the-cuff in a few Xero Research sessions this year, but have otherwise mostly forgotten about it since Andrew G's CSS workaround has worked so brilliantly.

But for whatever reason, it broke yesterday (in Firefox - I've tried deploying it in Chrome this morning and am not having any luck, but I'm not sure if it's the code or just my DevTools skills).

Until this nightmare is resolved, I can't possibly recommend Xero to anyone looking to escape their QuickBooks environment. And I'm personally embarrassed for the design team that hasn't chosen to address this over the last six months.

I'm not a UX professional, but I'm certain that "knowing where to look" is a basic principle of good design. And if you tracked my eyes searching through a familiar set of accounts while my homepage scales from 2 to 3 to 4 columns, you'd see them rolling around my skull.

(I have painstakingly grouped 6-12 accounts each across 8 Xero organizations into Bank, Card, Stripe, etc. in my standard 2-column layout, only for all of that to explode when my homepage scales to 4 columns.)

Right now, the only thing standing between me and being disgusted to even open Xero every day is Andrew G hopefully updating their bit of CSS code - what a sad state of affairs.

Provide an option to limit the number of cards per row/column to return to the old vertical format. I am used to a quick vertical up-and-down review of multiple bank accounts. I now have to scan left-to-right across a busy, cluttered set of cards. Please re-add an option to view bank accounts in a vertical manner.

Number of columns and position of widgets should NOT change depending on the screen size - this is bad design. What should happen is the size of the widgets change and information either shows or hides (to a maximum or minimum size). This is basic web design. The current way is not user friendly and is counter intuitive.

I agree with the comments to give us the ability to sort the home page by column rather than row. We need to be able to choose the number of columns and the order of the widgets in those columns. Even with several of the widgets deleted the home page is hectic and chaotic on my wide screen monitor. Then when I go across to my laptop all the widgets are mixed up. I do not want the widgets going across my entire page. I want two columns. If we can sort by columns this will make the transition between devices (wide screen, laptop and iPad) far simpler. I do not like that changes have been forced upon us that make the program more difficult to use, but the fact that we can not even order the widgets in the way that works best is utterly ridiculous. I cannot understand what goes through the minds of the people who make these changes - they have obviously never ever used the program in the real world.

This is what I came to say. I find have 4 columns chaotic and find it hard to locate information. Its far too busy. I'd like large bank account widgets in a single scrollable column, or double at most. It would be fine with one bank account but with several, 4 columns is awful!

Should be able to choose the number of columns. I prefer two - which stops items from re-sorting depending on browser windows size.

I am reposting Eric Dunn's comment as I agree with it:
'Please allow the widgets to be organised in columns - currently it automatically arranges them in rows. OR allow the auto arrangement to be turned off so I can put them where I want.'

I am copying Steven Mallender's comment as I totally agree:
'Allow Widgets to be ordered into Columns.
My preference as below; but at least then everyone knows where to find a specific Widget - not in some random pool like it is now.
Column1 = Bank accounts;
Column2 = Tasks, invoices to chase, bills to pay;
Column3 = Business Performance.
(I have 30+ (multi-currency) bank accounts and currently there's no point trying to find them on the new Homepage).

Agreed. I want to fix the position of the widgets, possibly with 'sections' so the banks accounts only ever take up the first 2 columns and the rest of the widgets can take up whatever is left. This i because I have a wide screen, but sometimes use a narrower screen and when I swap between the 2, the position of each of the widgets cahnges, which is confusing!

Based on this, I would like the widgets locked so they don't move when you resize the page.
One of the businesses I use has a lot of accounts and as I change the size of the page, they move, making it trickier to spot the one I want quickly.

The new homepage layout feels very cluttered.

For clients who have transitioned to the new homepage, the first thing I do is remove unnecessary widgets — typically leaving only bank accounts and invoices & bills visible.

However, the current layout forces widgets to fill the top row first. For example, if there are three bank account widgets and both invoices and bills widgets enabled, the system will display four widgets across the top row and push the remaining widget to a second row.

There is no option to leave space in the top row or manually group similar widgets together. This makes the homepage feel visually unbalanced and contributes to a cluttered appearance.

Allowing users to customise widget positioning (e.g., manually arranging or grouping widgets) would significantly improve clarity and usability.

Please make it so I can choose how many columns and rows I have, or just allow me to keep the original homepage.

I logged on today using my laptop and discovered the home page displays differently on different devices - rather confusing to say the least. Could you fix this so it stays the same on all devices used please?

Huge thanks to Andrew G for this improved custom CSS (which is well worth updating for anyone else using it). It now functions exactly the way I'd like to see it implemented in the product (aside from the left-right sorting issue that they mentioned).

If anyone needs help enabling it in Firefox, I followed these instructions through Step 4 and it worked perfectly (noting that the file to update is userContent.css, not userChrome.css). https://www.reddit.com/r/FirefoxCSS/wiki/index/tutorials

Regarding the new Homepage in general - all I can say is that I've fully made my peace with the new look (and actually quite prefer the "quantized" widget sizes), but this sorting and especially scaling behavior remains 100% inexcusable.

The fact that people are talking about CSS hacks to fix this surely should tell you something, you've made something worse in the need for endless "improvement".

Please please give us the option for 2 columns or to use the old home page permanently. Why get rid of it? Then you can be A/Bing pages.

Hi Kelly.

Thanks for the notification that you have no plans to fix the issue that we all have.

As has already been discussed below, the screen size "FIX" is no fix at all.

It is also immensely annoying that every time you log in you have to change the view back to the original. The "NEW" layout is absolutley awful, and nobody who has ever used Xero likes it.

Why do you (Xero) insist on changing things that work into things that don't? (Not expecting a reply, as usual.)

I just posted this in another thread, if you're comfortable installing a CSS addon/plugin to apply your own custom CSS to the Xero site, you can use this hack to fix the number of columns.

Choose either 2 or 3 columns based on your need (delete the lines you do not require):

@-moz-document domain(go.xero.com) {

/* EITHER: Fix columns to 3 columns regardless of screen size */
.dashboard-template-beta-grid { grid-template-columns: repeat(3, 1fr) !important; max-width: 1360px !important; }

/* OR Fix columns to 2 columns regardless of screen size */
.dashboard-template-beta-grid { grid-template-columns: repeat(2, 1fr) !important; max-width: 900px !important; }
}

This will ensure that your fix-column dashboard remains centred in the screen, with the fixed column count.

NB: For anyone using my previous hack to fix the number of columns, I've updated/improved the coding here to work better. Keep in mind you'll need to ensure that every screen resolution (2, 3, and 4 columns) has the correct layout saved as Xero now remembers the saved layout based on screen size.

This does not unfortunately change the ordering left-to-right, which means it does not fix/allow us to have some columns longer in length than other columns (meaning you still cannot have all 50 bank accounts in the first column only).

100% agree. I am faced with TWELVE different widgets when viewing on my monitor, from border to border of the screen. Absolute information overload. I need the ability to reduce the number of columns. I don't understand how after all this time you guys don't seem to properly test what you release...