Adyen Payment Gateway

In moving onto UX design, my first initial task was to re-design and develop the Adyen payment gateway on the checkout of the River Island Website. This was to ensure that the journey for NL (Netherlands) customers who use the iDeal/Adyen payment path is consistent with the current RI checkout design.

Below is the current Adyen Payment Gateway:


This gateway needs to flow and be consistent with the previous check out system step, which is demonstrated in the below:


My final design for the Adyen payment gateway was created in Photoshop and is presented in the below graphic:


In development of this I ensured that the colour scheme (green, black, grey) and style of the checkout was consistent and carried right through to this final step. Key aspects included in the design were box icon buttons, payment bank icons and a clean drop down menu.


Design Iterations

The Understanding of Iterative Design

Iterative design is designing, but more specifically understanding what one is designing through actually creating it. Alistair Cockburn describes it as “learning by completing”. Perhaps most importantly, an underlying principle of the iterative method is that until you have actually built what you are designing, you are not going to be able to fully understand it.

When presenting sketches and ideas to users for their feedback, you are effectively asking them to imagine how the product will work, to prototype it in their mind as it were, and then provide feedback on what they are imagining. However, with Iterative Design you are prototyping at every stage and therefore you get more reliable user or client feedback (The Design and Technology Association 2014).

To demonstrate our understanding of the iterative process we will individually be creating a piece of interactive information graphics for a shared public space, which will elucidate some idea or concept we perceive as key to our 21st century media experience.  This unit will allow us to look at how people react to and understand the graphics we create and how different people experience our work in an environment. We will be observing how people move through and use a space, what they look at and what mechanisms are used in the space to grab attention.

Approaches to the Iterative Process

There are many different approaches to the Iterative process; one approach is the waterfall method:


‘Getting it [design] right the first time’, is not achievable in user interface design.” Yet use of iteration is not an excuse for being sloppy in the first time (Gould, J.D., and Lewis, C.H., 1985). The problem with the waterfall method is that it does not allow trial and error through designing, so therefore we can not simply go back to the drawing board.

Other Iterative processes include the Double Diamond Process:


Bryan Lawson’s Architectural Process:

Screen Shot 2014-10-13 at 11.17.09

Management Environment- Iterative Process:

Screen Shot 2014-10-13 at 11.13.29

In designing an interactive information graphic I will be following this iterative process; this process will allow me to continually evaluate, improve and redefine a design to achieve the highest standard outcome for deployment.


Gould, J.D., and Lewis, C.H., 1985. Designing for usability: Key principles and what designers think. Communications of the ACM, 300-311.

Tech Republic Apps, 2006. Understanding the Pros and Cons of the Water-fall model of software development. Tech Republic. Available from: [Accessed 13th October 2014].

The Design and Technology Association, 2014. Developing an Iterative design process[online]. D&T. Available from: [Accessed 13th October 2014].