911爆料网

New Cost Overall Page: A Leap Towards Accessible and Usable Design

Steve West
By
Steve West
Contributor:
Nov 24, 2022
New Cost Overall Page: A Leap Towards Accessible and Usable Design

Today I'm excited to unveil major updates of our Cost Module Overall page!

Back to 2019 when we first started, 911爆料网 was launched around an initial niche goal to provide real-time project and program financial reporting in a new, transparent and automated way. Our first product had to be simple and solve a pain. So we decided to build a project cost tool that rolled up real-time data to a program level, with deep drill down capability. That was how the Cost Module was born!

The pi猫ce de la r茅sistance of the module was our Overall page - a world-first, innovative way to manage capital project finances. Anyone on the project could easily drill down to see detailed financial information, without looking at complicated formulas. Reports could be produced straight to PDF - bye-bye spreadsheets!

This new way of working enabled better, faster decisions and transparency that hadn't been seen in the project management consulting industry.

Overall Overhaul! More time saving, less time wasting

Three years on and we鈥檙e always in pursuit of perfection at 911爆料网. The team 鈥 myself, Dom, Ben, Dylan, John - 聽saw significant value in re-designing a faster, better Overall page that provided users with new functionality to manage projects and met the needs of our maturing, tech savvy user base.

New Cost Overall page: a leap towards accessible and usable design: A project management app screen with numbers and graphs
Time to say goodbye old Overall! You will be dearly missed!

So we Overhauled the Overall and today we're deploying this world leading tool to our customers.

Now our customers can enjoy:

  • 95% increase in speed
  • 10x functionality
  • Google level configurability

We鈥檝e made a ton of improvements to achieve those stats! Here鈥檚 what's new in the Cost Overall page:

Building on the base of the Material UI design system (MUI), we have improved the visual style of the Overall view focussing on readability, accessibility and usability. With consideration of contrast, colour, icons, spacing, font weights and sizes, we鈥檝e massively improved the page's overall look and feel and its table entities.

New Cost Overall page: a leap towards accessible and usable design: A project management app screen with numbers and graphs

Different colours for different entities

The primary area of improvement is the distinguishing of each entity type (i.e. Budget, Contract, Variation, etc) to assist with scanning vast amounts of data on the screen.

New Cost Overall page: a leap towards accessible and usable design: A project management app screen with numbers and graphs
Spot which row is Contract, Budget, Forecast, Variation in no time.

Each entity has been assigned a colour, which is presented via a small icon on the tree side of the row, as well as being used as a highlight colour when hovering the row. This allows simple association of the entity being viewed without a heavy cognitive load. It assists the eye to track across the row immediately.

New Cost Overall page: a leap towards accessible and usable design: A project management app screen with numbers and graphs
Enjoy colourful hovers from now.

Additionally the numeric column data is now using a mono-spaced font across the app. Mono spacing means each number takes up the same horizontal width as its siblings, allowing a more consistent and readable experience horizontally and vertically.

Speed Dial drop-down form

To help reduce the visual clutter in the Toolbar, we moved the Add buttons for each form up into a single Speed Dial component that drops down when hovered to expose buttons for each form. The Speed Dial acts as the "Floating Action Button" from MUI as it is the primary action for this page.

New Cost Overall page: a leap towards accessible and usable design: A project management app screen with numbers and graphs

Decide how the columns look, your way!

We didn't just make changes to the look of the page. The new data grid allows you to do some really cool things with columns, like re-arranging, re-sizing, showing and hiding 鈥 all of which persists on reload, or if you navigate to another page, or come back in a month's time!

This persistence of state also applies to the unravelling of rows. So once you鈥檝e set up the state of the table to the way you need it and like it, it stays that way. You can easily Reset the table to default if you need to.

We鈥檝e removed the divider lines once you鈥檝e unravelled to Contract level, and added a single level of depth shading, to indicate you鈥檙e inside a core entity. This distinction assists with keeping the table within accessibility contrast standards.

We鈥檝e added some new columns that have been requested 鈥 specifically the breakdown of Payment Progress into 4 separate columns, in addition to the Payment Progress bar.

New Cost Overall page: a leap towards accessible and usable design: A project management app screen with numbers and graphs

Lastly, there are tooltips that describe the calculation used when you hover a column header. Cool!

You can now copy and paste the cells from the table directly! Woohoo. There鈥檚 also a new feature - Export Current View - which allows you to dump the currently visible/unravelled rows and columns to a csv file.

A project management app screen with texts

Where to find more information

As always, if you find any of the information above unclear, you can see a detailed help page , or contact me on hello@mastt.com. I'll be more than happy to answer your questions.

Have fun exploring your new Overall page.

罢辞辫颈肠:听
Steve West

Written by

Steve West

Steve West is a seasoned software engineer with over a decade of experience building fast, scalable web applications. He鈥檚 worked across startups, agencies, and enterprise teams, including a senior front-end role at 911爆料网. Today, he runs his own freelance practice, delivering high-performance websites with clean code and thoughtful UX.

Contributions by

LinkedIn Icon
Back to top

Related Articles on聽

See All
No items found.

Powering Construction Project Management with Easy-to-Use Tools