Checkout Payment Page

Since the success of a checkout is heavily governed by how closely it meets the user’s expectations from checkouts on other websites the project started with a market review. I set out to collect examples of payment page designs from companies whose main product was their checkout, companies that had strong checkout experiences and companies that were direct competitors in my client’s marketplace.

After the review, I selected 3 checkouts that I felt were modern, and had a good mix of convention and innovation to use as starting points for paper sketching sessions. I was looking to break each of them down into their component elements, both to find the points of commonality between them and also to find the elements that elevated each particular checkout.
‍
Those three sets of sketches ended up as the three different design directions that were pitched to my client. In the end the client like elements from each of the directions so I ended up iterating a new design that integrated all the elements the client was interested in developing.
‍
The final iteration was signed of by the client as the approved design direction, and we moved on to wireframing and prototyping.

Because of the detailed iteration work that had been done before the wireframing step, this stage went smoothly. Work on mobile and desktop wireframes went quickly and there were only a minimum number of changes required by the client.
‍
The deliverables at this stage were wireframes, a clickable prototype and both videos and and an html prototype showing the animation in the card number field.

We didn’t have a large testing budget for this prototype, but we did have access to a pool of customers from the client’s bricks and mortar store.

Three moderated user testing sessions with 5 participants total showed that there were no unexpected issues with the design, and all participants were able to use the prototype to complete an order successfully.

With the project finished from a design and testing perspective it was time to move on to developer handover and visual design
‍
I was partnered with a visual designer for this step of the process. Whilst she took the final wireframes and developed them up into a visually complete page, I worked on annotating the existing wireframes into complete handover documentation for the developers.
‍
These two pieces, were packaged up and delivered to the client’s development team for implementation

Because they were an in-house dev team, it was possible for us to run several sessions with them during the build process both to answer qustions and correct visual mistakes that crept in during the build.
‍
The result was a final product that exactly matched the visual design and also included all intended functionality.