Sage Pay reskin

UI (App) design

After the marketing side of business completely rebranded, it was expected that the client side gets a facelift as well. A brand new responsive, mobile first approach was the obvious choice.

I was so excited for our system to be the first that has implemented the new updated brand within Sage SA :D
Client
Sage Pay
Status
Ongoing

Technologies
Bootstrap, HTML, CSS
Client's satisfaction

Challenge

Throughout the years of building the merchant and admin site, the stylesheets became “bulky” (for lack of better term).

The stylesheets of these sites also needed to be adjusted to be up to date with Armonye Bootstrap as displayed on design.sage.com.

Solution

I cleaned up the stylesheets to remove duplicate code while I helped the Lead Developer make all these CSS changes to the main client facing site.

I also cleaned up the stylesheets of the partner integration site (Project: iFrame) and removed A LOT of duplicate code. I then helped the Senior Developer implement the same stylesheet on his side of the server.

The process

We have our own design portal that offers all brand guidelines, UI kits as well a sample code snippets (our own customised version of Bootstrap) to streamline the design process.

I collaborated with the PO, PM, BA, Copywriter, Graphic Designer and Developers throughout the project. I gathered all the business/technical requirements along with feedback from customers. I used this information to come up with a fresh interface design.

Adobe XD was finally available for Windows and I couldn’t wait to experiment with it! After the prototype was approved, I used Dreamweaver to manipulate the sample code from the design portal to create a functional HTML mock-up of the final product.

This mock-up was then handed over to the developers to use as a guide to build a fully functional system. The system still runs on my CSS :)

Besides the new interface, I was involved in various parts of rebranding, including the automated system emails (HTML) as well as their dynamically generated pdf attachments.

The attachments are usually sent as transaction notifications. I took the ‘paper design’, stripped it apart and rebranded it from scratch using HTML and CSS.

Maryna accomplished all the goals set out for her for FY 2017. Her design expertise, as well as her continuous efforts to improve the UX and end-user functionality of the Sage Pay system, contributed greatly to a successful year and truly made the Sage Pay system world class.

Leon van Zyl
HOD: Systems Development, Sage
Don't be shy, introduce yourself :)
Hello! My name is and I wanna chat about:
Pop me a mail, would you?