How can we present aggregated payment data collected within our system, gain business intellegence, and add real business value to our customers?


Based on a limited time frame and information I began my design research by browsing the internet for inspiration regarding financial dashboards, financial reports generated in excel, data visualizations, and other visuals related to the subject. This helped me develop a better mental picture of what I was going to be creating.

Following my image search I began looking for articles and article recommendations on data visualization. This research led me to several authors one most notably, Edward Tufte. With book recommendations in hand I read a few chapters specifically pertaining to the types of data visualization I was doing.

It was by chance that during this process I attended a lecture from Julie Rodriguez on Visualizing Financial Data at O'Reilly Design Conference.

Sketching & Ideation

My design process continued with a series of sketches and ideas on the subject matter and possible layouts of content on the screen. Ultimately what was chosen for the initial MVP was a solitary line chart with statistical information below the main content for quick review.

Wire-framing & Mockups

During this project wire-frames were used as a method of fleshing out the the initial layout and give some context to my ideas. It also served as a blueprint that I would use when developing a prototype.

Visual design compositions served as an excellent tool for gathering feedback from C level executives. The comps also helped to flesh out styling of the application as we closely tried to match the current brands image and keep a cohesive experience.


Working closely with the engineering department I continued gaining exposure to the Elixir programming language and Phoenix front-end framework in which the application was built upon. The styles for this project were crafted in HTML5 and SCSS. By providing engineering with these types of documents we were able to eliminate waste and speed up the development and future iterations.

Analysis & Data Reporting

Business intelligence was gathered from the inception by monitoring the products usage. The initial audience was limited to a select group and opened to a larger audience after some time. Additonal analytical data was gathered via platforms such as Google Analytics, Hot Jar and Inspectlet.


There have been several iterations since the inception of the first design solution. One improvement came from direct user feedback asking for assistance in understanding what key terminology meant within the system. The solution was to create a custom dropdown select menu with the use of Select2. A theme was created for the definition list that shows the the code name and an explanation below it.

The second pass of Insights saw the addition of two more graphs. Both graphs are percentage area graphs. We also added another sidebar of statistical data reflecting performance rates within the system.

Other iterations included the addition of currency symbols and humanized text regarding the currency type, the addition of a second definition list within the transaction type dropdown select menu and automatic smoothing which helps to reduce jagged points on the line graphs thus improving the viewing of data.

Moving Forward

Further work on this product would entail the creation of user features like alerts and notifications as it has been a steady request from customer feedback.

    • Dane Wesolko - UX/UI Designer
    • Miki Rezentes - Lead Software Engineer
    • Jared Knipp - Senior Software Engineer
    • Research
    • Sketching & Ideation
    • Wire-framing & Mockups
    • Prototyping
    • Analysis & Data Reporting
    • Iterations