9 Spokes ‣ BNZ MyBusinessLive: Platform redesign to support white-labelling
Overview
Business context
The 9 Spokes platform is a cloud-based insights platform that banks subscribe to, brand and serve up to their SMB client base - for customers is a free data Dashboard that connects to their favourite business apps.
The Dashboard is made up Tiles which can be added and removed based on your needs - The tiles are designed to show actionable insights from a variety of commonly used apps including; Xero, Quickbooks, GA, MYOB, Vend, Shopify, and many more. These insights are shown as charts, tables, and carefully selected metrics.
The Challenge
At the time, we'd recently engaged in a partnership with Bank of New Zealand (BNZ). This presented a great opportunity to evolve our product. We were tasked with creating a new product called BNZ MyBusinessLive, essentially an re-branded version of the 9 Spokes platform. This project pushed us beyond a simple re-skin, requiring us to develop a unique scalable system that could support not only this partnership but future collaborations as well.
Project objectives:
Develop a flexible white-labeling design system
Ensure seamless integration with BNZ's brand identity
Adaptable for future partnerships
Maintain the core functionality and user experience of the 9 Spokes platform
Output
Solutions
In collaboration with the design lead, we delivered the following:
Designs for 50+ screens across 4 different breakpoints including propriety mobile screens and components
Developed a highly adaptable interface design, easily configurable for BNZ's brand and scalable for future brand implementations in both design and dev.
Resolved critical usability issues across key areas, including the dashboard, app overview pages, tiles, app marketplace, and onboarding process.
A unified and theme-able component and tile library, establishing a comprehensive design system to serve as a single source of truth. This addressed the previous lack of cohesive design files and inconsistent component documentation.
Conceptualised and designed new region-specific tiles for applications tailored to the New Zealand and Australian markets, expanding the product's functionality and reach.
Theming experiment
Initial design test for theming the interface where we just reskinned the existing UI
and theming for new local tiles.
We weren't happy with the result, and neither was the brand team. Components were scaling weirdly and the existing interface didn't suit BNZ's lighter interface.
So we went back to the drawing board and opted to overhaul the design.
Design overhaul
Dashboard
This is the main platform page where all a user's app tiles appear - Tiles can be added/ removed and organised to meet the users needs.
When we designed the tile graphics we had to be mindful of creating charts that aligned with each- other visually, that reused sub-components, while also being easily configurable to different brands.
We also made the tile grid 3 columns wide to accomodate larger tiles.
Marketplace Desktop Page
Users can browse all partnered apps available to connect to MyBusinessLive.
App Overview Desktop Page
Overview of a partnered app and what tiles can be powered by it.
Design library and style-guide
I took full ownership of setting up a fully configurable design library in Sketch, ensuring consistency in components, styles and layout.
Additionally, I set up the developer handoff workflow and style-guides utilising DSM + Zeplin.
Things that didn't make the MVP cut
Universal Date Picker
Notifications
Additional (not UX) work
App guide
I worked with our copywriter in creating a guide to business apps. This required dusting off the in-design skills - but was important for us in communicating product value to potential customers.
Product guide video
Created product guide videos in AfterEffects
Animations for social channels
Created animations for our social channels.
Thanks for reading, check out some of my other work below.
