Back

Zsolt Laszlo

Clever Cost

My role & Responsibilities

UI Designer – Interaction Design, Visual Identity, Design System

Team

René Hansen – UX Designer

Zsolt Laszlo (me) – UI Designer

Project length

6 months

Overview

Clever Cost is an expense management tool that simplifies cost tracking, empowers users with real-time insights, and optimizes financial decisions. With a user-friendly interface and smart algorithms, it streamlines expense management for businesses of all sizes.

While I worked for Clever Cost, I teamed up with an amazing UX designer. My responsibilities included crafting the UI based on the wireframes, and developing a dashboard that effectively presents diverse and complex data points in a manner that is easy to scan and comprehend.

My goals for this project

Due to the short timespan of the project, the UX designer and I had to work simultaneously. It was essential to keep a clean workfile and provide as much flexibility in the design as possible, so we could iterate on ideas quickly.

From the start of the project, I approached the design system process systematically to make sure that we would have a smooth workflow down the line.

I prioritised user experience over the look and feel. Clever Cost is a productivity tool, so I made sure to not overwhelm the user with unnecessary design elements and keep the dashboard simple and easy to scan.

Let’s get started

Structure and functionality

As this was a team project and my fantastic UX-er had already done all necessary foundations, I could get my hands dirty with the creative work! 🎨 My UX-er pitched the concept and received the initial wireframes, so I could get started.

Taking the first steps

Visual research

After reviewing the wireframes, it became evident that the dashboard needs to include substantial amounts of data in the forms of lists and graphs. To gain inspiration and insights on visualizing comparable data sets, I conducted thorough research.

Laying down the foundations

Design system

Due to the sheer size of the product, a classic atomic design approach seemed the most sensible. Based on the wireframes and the upcoming features planned on the roadmap, we already knew the product will have repeating components, nested in repeating components, nested in repeating components, nested in repea… You get it! 😄

This meant that I planned out how to build up the library, and made sure that the components provide flexibility and they are easy to use.

The processed invoices

Once an invoice is processed, it gets added to a list, providing users with the chance for thorough verification. This list is designed to adapt to various configurations. The use of zebra stripes for rows helps in guiding the user’s eye without introducing unnecessary clutter, ensuring a streamlined and user-friendly experience. Additionally, there are bulk actions to aid the user.

So much data, so many options!

Graphs, charts and others

My aim was to transform complex data into intuitive visuals. We created graphs that automatically populate with real-time data harvested from invoices, simplifying the tracking process and providing valuable insights for informed decisions.

Creating the canvas for our artwork

I created every graph and indicator box to be flexible and interchangeable with every other element on the screen. No matter how much data they have or how much you stretch them, they should work within confines of the canvas. This helps the elements adapt to various screen sizes.

Let’s see an example

Closign thoughts

The project was initially launched in an alpha version, involving a select group of local businesses for testing purposes. This phase allowed us to identify and address unforeseen issues. Since its debut, the product has been actively on the market, undergoing continuous enhancements and refinements on a regular basis.