giffgaff Money


giffgaff Money


  • User & UX Research
  • User Testing
  • Information Architecture
  • Usability analysis and design
  • User Journey
  • Create Prototype

Live site


Prototype wireframes


[Prototype wireframe] Link

Example browse journey



file size: 5.4MB
[Simple version] Link


The brief

We didn’t want to ‘hard sell’ giffgaff Loans, we wanted to create a blog that could connect and communicate to members and customers by giving helpful money tips, using a soft touch and educational approach. Also we can create a lot of content, which is good for SEO ranking, by driving more traffic to the giffgaff Loans page.


  • – Tight deadlines – needed to deliver the end product to go live in 2 months
  • – Technical functionality restrictions – due to third party application frameworks
  • – Create a full scale of the end product and breakdown the project into 3 phases to deliver and launch live


The process


Market research

  • – Key competitors (UX, UI design and content)
  • – What do people use loans for?


The Workshop

  • We kicked the project off with a half-day workshop of collaboration with business owner, project owner, design team, UX team that would help all involved agree and align on:
    Primary objectives, secondary objectives, KPIs, type of content and categories.


1st draft product requirements


Persona workshops

  • Identified user goals, needs, interests, features, current pain points and product requirements.


User journey

  • Based on the outcome from ‘Persona workshops’ and product requirements, laying out everything and building the story for mapping a user journey.


Low fidelity prototypes, user test & iterate

  • Due to tight timeframes, I sketched 2 draft prototypes to review with business stakeholders, UX and design team all the pages for feedbacks. After 2 iterations, we got a signed-off design, then I worked with brand team, design team and content team closely, so they would know what I’m creating, then also they could start thinking about the UI and content, as I needed to use real content for the prototypes, as I needed to create a wireframes for desktop and mobile views using Auxure. I walked through and tested these design solutions with giffgaff members and stakeholders to find out what works, and what needs to change. I iterate this process until it’s time to finalise the design interaction.


Functional specification document

  • As we needed to pass to outsource service company to build the ‘giffgaff Money’ site, it is always a good practice to create a functional specification document, that can help illustrate user journeys, and capture all the functional requirements, in case they misunderstanding or miss out to build some of the functions, by reducing errors and complex problems, which would become easier to understand and solutions present themselves.