Goal

The goal of this redesign was to provide users with a way to compare their payment gateway’s performance metrics against an industry average. In turn capturing leads and giving a once forgotten micro-site an update in purpose, content, and visual design.

Research

Initial information gathering commenced with a project briefing and an understanding on the purpose of this project. Since the time-frame was short and there was value to be had in gathering business intelligence we began by identifying key information that needed to be included in this design.

That information consisted of educational content on the company's product offerings, valuable content regarding payments, and data visualizations which compared several data-sets regarding payments and transactions.

Sketching & Ideation

Ideas and sketches were gathered quickly and rough concepts thought through with the intention of shipping fast. These sketches were shared with the group and through collaboration a conclusion was drawn on the design and direction of this iteration of the microsite.

The sketching phase also served as a time for discussion around the types of data visualizations that would be present in this design.

Wire-framing & Mockups

Basic wire-framing was done in Sketch App and shared via Slack and Zoom meetings for feedback. There were several rounds of discussion regarding the design and how we wanted to present the information. It was at this time iterations to the content and layout of the page were made. Once a design was agreed upon by the group there were also several rounds and visualization exercises in the types of graphs that could represent the information we were showing and best help to tell the story behind the data.

Prototyping

Initial development of this project kicked off in an Elixir application on the front-end framework Phoenix where I built HTML5 and SCSS files. These documents where shipped to the engineering team via Github where they were able to pair them with the working backend. Once an intial prototype was established it was presented to the group for review and several more rounds of iterations followed.

During the prototyping process I was exposed to a deeper level of involvement with the High Charts data visualization library. It was during this protyping session where I gained further insight and understanding in how to create visual styles via JSON files.

Analysis

Information was gathered for marketing from a form on the bottom of the page asking viewers if there was any additional information they would like to see. This information is currently being aggregated and plans to utilize the information for business intellegence are in order once enough information has pooled.

Web analytics were gathered for various departments of the company via Google Analytics, HotJar and Hubspot.

Iterations

Additional iterations included the Success by Card Brand visualization and statistics. Plus the addition of a dynamic section containing content on financial data. Beyond that iterations included structural adjustments and refactorings of codebases.

Moving Forward

As user data collects decisions towards improvement can be spotted in the patterns that emerge around feature requests or enhancements.

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