my role

I was one of the two UI/UX designers on this project.I participated in all stages of the design process and communicated closely with customers, marketing, and development teams.

goal

The previous version of the software was often difficult to navigate and lacked important features, making it challenging for small businesses to stay on top of their finances. The redesigned SaaS aimed to streamline the billing process and provide businesses with a comprehensive finance management solution that saves them time and money while improving their financial health and overall success.

USER PERSONA

We analyzed user interviews conducted by the customer to gain a deeper understanding of users' expectations, needs, and pain points. To make the new design more effective for users, we created user personas based on the data gathered from these interviews.

Information architecture

One of the goals of the design team was to improve the UX. This was made possible by exploring all user points. When we found out that the invoice sending process is a bit complicated for users - we refined an information architecture to simplify and streamline the process, making it more user-friendly and intuitive.

wireframing and low-fidelity prototype

We began by creating a rough blueprint of the system through wireframing. This allowed us to focus on the layout, content, and functionality of each screen before adding any visual elements. We then created low-fidelity prototypes, which were simple representations of the screens with minimal visual detail. This allowed us to test the functionality and user flow of the system with stakeholders and users before investing significant time and resources into high-fidelity design.

Invoice creation

Creating an invoice - the main functionality of the application - turned out to be the most challenging task for us. We created multiple concepts and tried various approaches, prototyped and tested them with users, received feedback, and repeated this workflow several times until we achieved a result that 100% satisfied our users.

Dashboard

After our redesign, we introduced a new feature that we didn't have before: the dashboard page. This feature allows users to access all the information they need in one place, making it more convenient and efficient for them.

account

After the redesign, we presented users with an updated interface for their personal account. This allowed users to customize their personal information and manage their subscriptions more efficiently. We also improved the subscription flow to encourage more subscription purchases by users.

mobile version

A survey of existing users revealed that the majority of them send invoices to their clients using their mobile devices. Therefore, we have paid special attention to designing a mobile version of the platform that is as user-friendly as possible. This is not just a responsive view of the application, but a separately built and well-thought-out solution.

DESIGN SYSTEM

To create a consistent and efficient design system for our invoicing SaaS, we utilized Atomic Design as the foundation. We began by defining the system's atoms - including buttons, inputs, labels, and icons. These were combined to form molecules, such as form fields with labels and inputs. Molecules were then combined to create organisms, such as forms with multiple fields. Templates were formed from organisms, like dashboard templates that included several. Finally, we added content to templates to create pages.

The result was a scalable, easily maintainable system that sped up development and improved the user experience by breaking the UI down into reusable components.