iFrame

UI design | User Experience | App

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

Client
Sage Pay
Status
Building App prototype New

Software
Adobe XD, Sketch, Invision
Client's satisfaction

Challenge

Users have to log into their Payroll or Accounting software to load salaries/payments and then log in again to Sage Pay to load the payments. The super user then needs to sign in to authorise the payment before it gets released.

From a technical perspective, each OpCo integrates the app with a different sized pop-up link. It’s hard to ensure a smooth user experience if this is the case.

Solution

We integrated our systems with the Sage Payroll & Accounting software so users are able to load their payment batches directly from their software. The iframe was then created to also allow users to authorise their batches directly from the software.

This saves time (and the schlep) of avoiding all the logins. It also ensures that the superuser don’t miss cut off times, and all payments are made on time.

The site was created to mimic the feel of an app so we're able to use that as a base when we decide to creating an app. A mobile first approach was the way to go *see update below for more details on the app.

The process

I was extremely excited when I heard that Adobe is busy working on a XD tool for designers. At first, Adobe XD didn’t look like it was capable of much.

I decided to watch some Lynda.com videos to familiarise myself with the interface, and boy was I wrong! The software itself is almost like a mobile app type of simple – how APPropriate!

I fell in love with Adobe XD while working on this project. I was able to create all my mockups in vector format designed @2x to easily export assets for normal and retina screens.

I could also create the prototype in Adobe XD. This new process was so much faster compared to designing in Photoshop/Illustrator and having to export screens to hotspot link in InVision.

Because I'm working with vector assets, I could link each "symbol" to a screen to mimic the functionality. I could also include animations to give the prototype a real app feel for testing purposes.

Check out the prototype :)

Update

We've been excited about creating a mobile app for a very long time. The excitement caused a bit of a rushed kick off.

With my past experience with doing user research and the great results we got from it, I convinced business to take a step back and try out the global UX approach.

I did a lot of research on what apps are currently within Sage that we can draw inspiration from. We obviously don't want to make the same mistakes so speaking to the customer is vital before we potentially waste time developing an app that won't solve pain points.

Along with the best examples I could find and a business generated app mock up (to get the basic idea visually across), we kicked off again with an ideation session on the whiteboard with sticky notes. (I LOVE sticky note sessions!)

When we ditched the waterfall approach and collaborated instead, we managed to come up with a workable wireframe within an hour or 2 instead of the usual 2 - 4 meetings and then still wasting time by working on the project individually.

I'm currently busy translating the sticky note layouts into a digital prototype. We will use this to test the app with users by doing a series of user interviews to fix user pain points before it goes into development.

Don't be shy, introduce yourself :)
Hello! My name is and I wanna chat about:
Pop me a mail, would you?