Earlier this year MYOB released a new product to market and I was fortunate to be asked to be apart of the design team to make the future of MYOB happen. In developing this new platform product one of my tasks was to design an improved navigation experience. This complicated and crucial project involved coordinating our visual design team, design systems team, and development team to build and implement the required components and design and test simple pragmatic navigation.
Deep dive
MYOB has two existing SME products: ARL and essentials. ARL is a feature-rich and powerful albeit antiquated desktop product while Essentials is a simpler web-based product built on a different code stack. This had its advantages, but has also created a large overhead for the business to maintain. Part of the strategic implementation is to bring these two products together.
The new platform front-end has been constructed from the ground up but uses the backend of the ARL system. Our goal was to give the new product an equivalent feature set as Essentials and merge the two existing products into one. Knowing customers using the existing Essentials app would eventually merge into the new platform we started with the assumption that the navigation should be similar to the existing essentials product. We did, however, immediately see several points to improve with the hierarchy, UI design, and responsiveness of the component.
From existing user feedback in forums and raised support issues, we identified many things we could improve. This included simple UI changes such as removing the element affectionately named the swag line, a 5px gradient line at the top of the interface which unfortunately users had perceived as a loading bar.
The visual design of the app was also updated to increase legibility and contrast to allow for AA compliance. Making the navbar the full width of the browser gave the navigation more prominence and real estate, the ability to add more features we knew were in the roadmap, and a more contemporary product aesthetic rather than a splash page or marketing website. For more personality and recognition if the users deal with multiple business files we added an avatar to the business details and account drop-down.
We consistently heard it was inefficient to create a new invoice/bill/spend money etc. to have to click on a drop-down then click Create Bill. Users perform this action dozens of times a day. We created a quick add feature. Along with this, we added two other new features to the New Essentials such as an In-product help and Feed (onboarding); all of which needed a launch point in the menu. We arranged the information in the menu as such to have product functions on the left side, account and business details and settings on the right. We placed the quick add, help, and tasks between the two.
On the top is the previous old stack Essentials product and on the bottom is the new Essentials platform product.
From user interviews, card sorting exercises, and quantitative data and validated with prototype testing we found the most commonly used menu items day to day were entering sales and purchases and dealing with bank transactions. We placed the menu items to reflect this. One of the bigger changes we had made to the IA was creating an Accounting tab and moving the accounts list out of the business details menu and renaming it to Chart of Accounts. This was one of the greatest frustrations amongst our accountant users and we heard repeatedly in user testing that this was more easily understood and intuitive.
One painfully apparent issue with the existing Essentials nav was the lack of responsiveness. Possibly one of the greatest challenges because we needed to be able to manage a lot of menu items as the site rolled down to mobile. Beginning with the mobile experience we wanted to keep the menu structure intact with the product features menu on the left and the business and account details menu on the right. As the menu bar decreased in size if the user scaled their browser window we encountered a problem with wrapping the menu items. We didn’t have a solution currently available in our design system and had to work very closely with that team to develop and integrate the solution. Finally, at the mobile level, we wrapped the product features menu into a hamburger menu, we left the quick access icons visible at the top, and the business name wraps into the avatar to save space but is still available at a glance.
Development
Designing this new experience involved a range of teams from across the business to make a reality. This project was undertaken with collaboration with the visual design team and the design systems team. To build a consistent platform of products MYOB has created a design system called Feelix which our developers pull components from and the Product Designers use when designing. With this project, there were several components we wanted to implement, wrapping the menu, and the business avatar for example. Numerous discussions were held around how the visual design team can create the required components, how the Design Systems team would build and release them for dev teams to ingest, and how finally the Development team would implement it. I had acted as the liaison between all three teams and other stakeholders such as the PM to make sure the release cycle of the design systems team lined up appropriately with our devs in the product team. This didn’t always align as simply as one would hope. If something slipped many times I had to negotiate effectively with all stakeholders to make sure we could receive it in the next release.
Outcomes
In the end, we had managed to successfully create a navigation that is clear and easy to use, even for users who have never seen our product before but kept it recognisable enough for those users that know and love our product. We cleaned up the visual design to bring it into a contemporary aesthetic that is in line with our platform line-up rather than appearing as a stand-alone product. We enhanced the experience by adding an in-product help, feed (onboarding), and quick-add items and making the navigation fully responsive from mobile up.