top of page

PROTOTYPING & WIREFRAMES CASE STUDY

BACKGROUND

A financial services company wished to investigate the optimization of their credit card form.  They commissioned a prototype of the optimized form to test whether research participants were able to easily navigate, error recover and understand the structure and navigation of the form.

APPROACH

I created a series of wireframes for both desktop and mobile, optimizing the journeys and aligning the wireframes with the business requirements.

​

Using best practice usability, each screen of the existing form was analysed and optimised, with the objective of removing any ambiguity around eligibility tests versus the application itself, reducing large tracts of text (providing infographics/accordion links etc, where appropriate), inspecting labels, copy and error messages, and evaluating/improving the current journeys.

​

A series of customer experience empathy strips were created to help the business understand the user experience issues within the application process.

Empathy Strip

Customer Experience Empathy Strip

Wireframes for mobile

Wireframes for Mobile

PROTOTYPES

Once the wireframes were iterated and approved with the client, I created fully interactive prototypes and conducted testing with research participants. The prototypes were given an anonymous branding.  

​

Following the research, participants reported that :

​

  • The number of fields in the form was not perceived as being too many or too little.

  • Expectations around filling in credit card application forms meant that the form was seen positively and compared well to other online application forms

  • Most of the fields were perceived as being necessary

  • 30 minutes was the average amount of time participants would invest in completing an online form - although the quicker the better was the general consensus

​

Interactive prototype
Interactive prototype

Interactive Prototype

bottom of page