Invoice and Billing Systems

Context

This software was actually existing prior to our team getting into the project. However, the older system was part of a different software that not just handled the invoicing and billing, but a lot more things.

The previous software was not developed using user experience in mind, and there were a lot of complaints on how it worked, and how it could be improved.

Background

Daymon is a giant in the retail world, that provides a full service on creating and managing products for retailers since1970. I have been working for the IT Team, based in Lisbon, since August 2018 as a Product Designer.

Currently, I am half the design team at Daymon.
The team has over 20 engineers and 10 QA's. I support design across every aspect of our business and am responsible for leading UX and UI across key parts of the application side of the platform.
I've grown tremendously in the last year, some key achievements of which I have listed below:
  • Implemented a design process. We work with Lean UX, and we came up with a process that has helped the team establish more structure to how we communicate between teams, and our work has allowed business to gain visibility across our upcoming sprints. We try to develop small portions of work, only focusing on what is essential (MVP).
  • Improved usability across projects. No usability tests were conducted before dev handoff before. Since we established a design team, we have been actively working towards conducting UX best practices, usability testing on all projects that we could, and managing to show the value of it to the business.
  • On every project, we establishing a design kit. We work with atomic design, making sure we do not produce extra work for the engineers unnecessarily. This has helped to maintain consistency in the look and feel across multiple projects.

The process

Our process at Daymon is based on the Double Diamond Theory and Lean UX process. We aim to incorporate the key phases of Discovery, Definition, Ideation and Implementation in all of our projects.

Understanding the problem

The previous app was created without any usability testing. I was able to conducted research interviews with our users to uncover any pain points that they were experiencing.

My research encompassed:
  • Understanding the user goals and needs
  • Uncovering pain points with the existing user journey
  • Determining the success of the tasks measured

We then build a finding and recommendation report from all the comments we gathered.

Prioritisation of issues

When I start working on assumptions, I like to organize issues by steps so I can help me and my team focus.

Since I like to use Azure Dev Ops Project Management system, I also tend to help product managers be able to organize the project a little better. I like to organize problems in epics, PBI's and tasks for our team, but the same tickets can continue to help engineers and even QA's along the road.

Wireframing the solution

Based on the problems identified, I worked towards addressing these pains by coming up with potential solutions:
  • Several UI discrepancies The app didn't easily show what is a dropdown and what is not, to name one of many examples.
  • Flow was not functional - There were a few options that should not be active once we clicked do not bill, and they still were, making it very confusing.
  • Although it should only have one feature now, the app should be built for expansion The idea here being that this new app will overcome the older one, and so we needed to take expansion into consideration as well.
  • Lack of space The users are used to seeing a lot of information at once, and the current app was limitative.

So after gathering in an ideation section, we ended up with a few ideas to try out with a wireframe.

 

On the wireframe, we showed a few ideas on how we could improve the usability of the site. Here are a few of them:

  • Minimize the space from the menu, opening up space for more data. Also, the same solution could be done with filters, being able to hide or show them as we pleased.
  • We also kept a navigation bar for future menus, and cleaned the app so the information would make sense on the details of each program invoice.
  • Anchoring action buttons The action buttons, that were previously easily lost from the scrolling inside a detail page, are now anchored.
  • Filters and main content separated Before, while scrolling, we would lose context as the whole page would scroll. Now, only the filters bar would scroll.
  • Color coding could potentially help bring attention to urgent data, in a sea of information.

Validating the designs

I conducted usability testing sessions with our primary users to validate whether the new designs would solve their problems. I wrote a script including a scenario asking the user to create a new Audience targeting females of all ages on mobile devices with manual bidding enabled.

During the session, I observed how they interacted with the prototype. The usability session revealed that it was less arduous to read and understand where some information would be inside the details.

However, the main table was problematic. The users felt pain as they scrolled to search for filters, and although it felt clean, it was not showing enough information at this time.

Since the table is the main area of work, we decided to focus time solely on this part of the design. So we went back on the drawing board, and ideated on what could be potential features that would make the users perform better.

We decided that we should work on several points:

  • How can we make the area larger so more items will fit in?
  • How can we help the users see what they want to see?
  • Different users may want to focus on different areas?
  • If we show a lot more information, how can we keep the user grounded, knowing where he is, and what he is seeing?

After ideation, we had a new wireframe idea that we thought could do what the users were expecting.

image

We redesigned the whole table, making sure we had the most data we could, without having reading problems.

We also added the possibility of choosing your own order of the columns, as well as hiding or showing them.

Also, you could lock up to 3 columns, making sure these would be sticky, while the rest of the table could be read.

Developing the designs

From the information I gathered, we could advance to making sure with had alignment with the Engineering team and business. This particular project, I did not designed the final UI.

I however, conducted a UX review of each front-end ticket that was implemented to ensure it was aligned with the designs before it went live.

Results and takeaways

Since the implementation of the new rebuild of the Invoice and Billing System, we have seen a significant decrease in the number of complaints lodged through the service desk. Additionally, I have received positive feedback from users about the simplified configuration of their invoices, saving them a large proportion of their time. Also, the users felt the way they can interact with the table is a great advantage in how they can read and manage the data.

Description

  • Daymon

  • 2021

We were tasked to develop an In-house Invoice and Billing System to replace an older software that could be improved.

 

My role: Product Designer

Contextual Interviews

Information Architecture

Proto Personas

Process Fluxograms

Ideation Sessions

Wireframing

Documentation