Comma
UX, UI, WEB, Branding
Comma 's platform integrates with platforms like Xero and Quickbooks to enable small businesses to pay payroll and bills in bulk, using new Open Banking technology, saving many hours each month.
Comma 's platform integrates with platforms like Xero and Quickbooks to enable small businesses to pay payroll and bills in bulk, using new Open Banking technology, saving many hours each month.
I joined Comma as its 4th employee as the Head of Design. I focused on the whole Product Design process from user flows, wire-framing, full user interface designs, prototypes and design handoff to the developers.
I used Figma to design the product from its very early stages, the brand, logo, and the company's website, which I built using Webflow.
I have also built out an entire design system of components in Figma to make designing new features even quicker.
What I enjoyed most about this project was the intricate process that comes with designing such a large and multi-functional site, expanding to new product features, partner pages and more as the business grew.
As the website evolved, an aspect of the brand was to make the product and website feel fun compared to a lot of more traditional financial software. With this in mind the website was designed and built to include soft shapes, bright colours and animations throughout.
When I joined the Comma website consisted of only a couple pages and a very basic website.
On every page I created subtle load animations for the hero section. This is to help add to consistent brand theme of fun and welcoming and a pleasure to use.
As the user scrolls up and down the website content animates in a subtle but fun way.
I built and animated the website from scratch in Webflow.
Here are a few examples from across the website
Using Adobe After Effects I created an subtle animated rectangle of moving gradients to highlight key parts of titles. I then exported and turned it into an APNG file.
AnimatedPNG is a new technology now supported by most modern day browsers. It is higher quality and can sometimes be smaller in file size than a Gif.
I then used clipping css to mask the animated background to the live text. This is a great piece of technology as it allows the text to remain as live text so it doesn't damage SEO.
“I’ve worked with many designers but Josh is one of the best. The projects we took on, such as redesigning the website and reinventing the UI, were seamlessly executed.”
The Comma platform allows users to import bills and payroll either via linking their account with other software like Xero, QuickBooks or Keypay or via manual upload.
Once their data is in the platform they can select bills/people to pay and then through our platform they can make these payments quickly in bulk. Saving companies many hours each month.
When I joined the Comma the apps design and UX felt like old banking software. It wasn't fun or a joy to look at. and work in.
As part of rebranding the company and the product I made it a priority to make using the app a more joyful and colourful experience.
The Comma platforms main selling point is the time it saves users in paying bills and payroll each and every month. To do this it utilises a lot of new Open Banking technology allowing us to group payments up and pay them in bulk without manual entry.
Depending on the Bank the user connects to pay with we can bulk payments up in different ways. Some banks that are more modern and making use of the new Open Banking technology allow users via Comma's platform to pay 100s of bills in one go.
Other banks that are catching up a bit still will rely on us having to group up payments into multiple groups. Its a confusing thing to design for but i feel we have covered this problem well with our solution.
When I joined the Comma the paying page looked like this. It was less clear what the user was paying and also very drab.
As part of rebranding the company and the product I made it a priority to make using the app a more joyful and colourful experience.
Modals are part of almost every platform and are used throughout for various reasons, from simple messages, to confirmation modals to more complex create modals.
The Modals at Comma when I joined felt very dated and the content within didn't utilise space very well.
The new modal design makes better use of space and brings in colour from the icons/logo circles at top. The glass effect on the CTA footer row helps indicate to users that there is content hidden behind they can scroll to.
