Project Goals
I had the priviledge of redesigning the Credit Card Processing website for my new marketing team at Paysafe. The goal tasked to me was to bring some sophistication to this recently acquired brand and provide a more welcoming experience for new customers of this industry. I used large hero images showing people to add a human element to help mesh with the pretty vibrant colors the original designers chose. I broke out the pricing page into three different and unique pricing plans and redesigned the navigation to make it easier to navigate. The site began to take shape with the newly incorporated features and I also had hands on work within a new content management system called Typo3. I used some new CSS techniques to lay out CSS grids and flexboxes to compose complex sections displaying pricing options for users.
My Process
01
I discuss with the client what information they would like to present, images to use, color assets, and typefaces. After I get a feel for all the content and number of pages for the site, I start to formulate a plan to execute.
02
I start with a wireframe using Adobe Photoshop. This will be used as a template to show where the images, icons, and the provided verbiage will go as placeholders. Then I will flesh out each page using the discussed assets such as typefaces, color scheme, imagery, and icons.
03
After creating and laying out the design that includes all the assets, I use Adobe XD to prototype the site’s functionality. This will include how the navigation will function, the buttons hover effects, and where each button and link will lead to.
04
Once approved, I will slice each graphical element so I can store and add them to the site. I will reference the designed pages and page building modules and some custom code to create each page. Finally, I will test each version of the site for desktop and mobile options.
Project Details
Font Family
Roboto
AaBb
Color Swatches
#1087c9
#ff7701
#000000
#ffffff
Software Used
Adobe Photoshop
Adobe Dreamweaver
Typo3
Credit Card Processing Website
Interchange Plus Pricing
This page displays information on this customized pricing plan and goes into depth on the payment program details.
Flatrate Pricing
This page displays information on this customized pricing plan and shows the various individual flatrate pricing.
Cash Discount Pricing
This page displays information on this customized pricing plan and goes into depth on what the cash discount program is and how to save you money.