In 2018 Practice Online (now just “MYOB Practice”) was MYOB’s Premier digital solution for Accounting Practices.
My role was to manage and maintain the visual layer of MYOB Practice Online, this meant styling all components used throughout the system and raising with other Product Designers and stakeholders to ensure consistency across the entire suite of online tools.
On a daily basis I would liaise with my peers to ensure the layout and styling of experiences was consistent across all areas. I had to maintain a “ten thousand yard” view of the entire product, ensuring that components and features were consistently being used correctly across multiple experiences and workflows.
Create a single product that met all the needs to an Accounting Practice, to run their business more efficiently.
MYOB Practice Online was MYOB’s digital solution for all types of Accounting Practices – large and small – but in order to create a product that people would advocate for, it needed to cater for all of their needs. One of the tasks I was asked to tackle, was to “re-brand the existing services and package it into a single digital solution”. To do this, we needed to learn precisely what users needed from a digital solution, and design it in a way that was better than they were expecting..
As Visual Designer and owner of the digital visual layer – I was tasked with understanding users visual requirements and expectations – and deliver that in a way that was delightful, helpful, clear and of the “MYOB” standards set by the brand.
I created a set of system icons that helped make Practice Online’s UI bolder and easier to understand. Unquestionably confident with a hint of playfulness – just the right tone.
I rebranded the existing product to bring it in-line with other MYOB products. These icons were cross-platform and used across the entire digital suite of products (along side marketing materials at times). Meant to compliment the brand aesthetic and be bold, engaging and clear.
Learn more about MYOB Essentials and see some of the other icon work I helped with.
What is “The Shell”
The Shell was the surrounding navigation area, which helped anchor users and navigate around the product. Myself and other Product Designers undertook multiple rounds of user testing to determine what this area should be like, and to learn how customers perceived where they are within the system. Once we understood how users wanted to navigate (and what was conceivable from a development perspective) we set out to design “The Shell”.
Here are isometric versions I created to help stakeholders understand the multiple layers involved.
Getting the navigation just right took patience and perseverance.
Once we understood the requirements from users, we set out to style the navigation in a way that complimented our other products, such as Essentials and AccountRight, to ensure MYOB Practice Online felt part of a cohesive branded experience (as often customers would jump between platforms).
I created untold different variations – being careful to not over-use our Brand Pink or Purple, only using it sparingly when necessary. Eventually, this became a rule – to only use purple to distract users just enough so that it didnt get in the way, but remained useful. Purple highlighting indicated a section, a selection or to indicate a feature.
Column widths
The Shell had to be hidden on a users command – but when visible, we went through many, many different iterations of sizing to fugue out how much should be on screen at a certain time. I created many different variations based on:
- The Golden Ratio
- 2, 3, 5, 8, 13, 21 “Fibonacci Sequence”
- 4px scaling system / baseline grid (that we had introduced into other MYOB products)
Sharing the results with the design team
Once we had established what we needed to build, I created an entire UI Kit which encompassed all of the decision making, into something Product Designers could take to user testing for further validation.
I managed, distributed and maintained the Practice Online UI Kit.
Continuous Improvement
The way we managed continuous improvement was to have weekly Design Critique sessions which analysed the effectiveness of the experiences Product Designers were testing with customers. Using the Practice Online UI Kit to design workflows and screens; Product Designers would ask questions about the navigation, the aesthetics and overall effectiveness of the Shell, and Practice Online as a whole.
I would take all this feedback on and relay that information back into the UI Kit, to ensure that everything customers are saying, was addressed at the source.
Learn more about Feelix (The MYOB Design System)
When changes based on user feedback are made to the UI Kit – they need exposure.
In order to expose changes to the UI, based on the feedback discovered through user testing – I would work with Product designers, stakeholders and the Feelix Design System team, to create components that fit into the current Design System.
The decision to include a new component into the Design System was taken to the Design Council (made up of senior Design Team Leaders) to be analysed whether or not new proposed components were needed globally – across the entire product suite offering.
Next Steps
My involvement with MYOB Practice Online ended when I left MYOB late in 2018, but MYOB Practice continues to grow and add more features.
You can find out more about it’s status on the MYOB Practice Help Page.
